关于 engram-visual-language
面向 Engram 仪表板编辑工作的视觉设计技能,提供层级、留白、排版和配色指引,并说明如何呈现表格与指标中的数据。
主要功能
- 01仪表板视觉层级指引
- 02TUI 风格配色与点缀
- 03间距和排版规则
- 04提升时间戳与标识符的可读性
- 05表格和指标的呈现指引
适用场景
- 01调整仪表板布局与留白
- 02选择配色和显示字体点缀
- 03让时间戳便于快速浏览
- 04提升表格和指标的可读性
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ gentleman-programming/ engram --skill engram-visual-language安装后在 Claude Code 中输入/engram-visual-language确认已加载。
详细介绍
适用场景
在以下情况使用此技能:
- 编辑
styles.css - 创建新的仪表板区域或状态
- 优化布局、间距、排版或配色
视觉规则
- 仪表板应体现 Engram 的风格,而不是通用的 SaaS 管理后台。
- 优先采用清晰的层级、更少的容器和更宽裕的留白。
- 有意识地使用 TUI 风格的配色,以及等宽字体和展示字体作为点缀。
- 将机器时间戳和原始标识符格式化为便于用户浏览的界面内容。
- 装饰性边框绝不能影响内容的可读性。
信息密度规则
- 避免重复嵌套方框,除非这样能让信息分组更清晰。
- 重要文本不得紧贴边框或显得拥挤。
- 指标应一目了然。
- 表格应保持整洁、对齐,视觉上比主视觉区域更低调。
评论
支持 Markdown