mcpField
E
engram-visual-language

engram-visual-language

github.com/gentleman-programming设计与 UI7.7k70 次安装今天更新
代码仓库

关于 engram-visual-language

面向 Engram 仪表板编辑工作的视觉设计技能,提供层级、留白、排版和配色指引,并说明如何呈现表格与指标中的数据。

主要功能

  1. 01仪表板视觉层级指引
  2. 02TUI 风格配色与点缀
  3. 03间距和排版规则
  4. 04提升时间戳与标识符的可读性
  5. 05表格和指标的呈现指引

适用场景

  1. 01调整仪表板布局与留白
  2. 02选择配色和显示字体点缀
  3. 03让时间戳便于快速浏览
  4. 04提升表格和指标的可读性

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/gentleman-programming/engram --skill engram-visual-language

安装后在 Claude Code 中输入/engram-visual-language确认已加载。

详细介绍

适用场景

在以下情况使用此技能:

  • 编辑 styles.css
  • 创建新的仪表板区域或状态
  • 优化布局、间距、排版或配色

视觉规则

  1. 仪表板应体现 Engram 的风格,而不是通用的 SaaS 管理后台。
  2. 优先采用清晰的层级、更少的容器和更宽裕的留白。
  3. 有意识地使用 TUI 风格的配色,以及等宽字体和展示字体作为点缀。
  4. 将机器时间戳和原始标识符格式化为便于用户浏览的界面内容。
  5. 装饰性边框绝不能影响内容的可读性。

信息密度规则

  • 避免重复嵌套方框,除非这样能让信息分组更清晰。
  • 重要文本不得紧贴边框或显得拥挤。
  • 指标应一目了然。
  • 表格应保持整洁、对齐,视觉上比主视觉区域更低调。

评论

支持 Markdown