Visual Design Foundations

当需要优化视觉基础(字体、色彩、间距、图标与层级)并提升一致性时使用。

sunflowermm 764aca7 4 files · 30.8 KB Updated

File contents

权威入口

  • .cursor/skills/visual-design-foundations/references/typography-systems.md
  • .cursor/skills/visual-design-foundations/references/color-systems.md
  • .cursor/skills/visual-design-foundations/references/spacing-iconography.md

适用场景

  • 需要统一视觉语言并建立可复用规范。
  • 需要修复页面层级混乱、对比不足、节奏失衡。
  • 需要沉淀基础视觉 token 与组件视觉规则。

非适用场景

  • 不用于替代交互流程与业务逻辑设计。
  • 不用于单次临时页面的随意风格调整。

执行步骤

  1. 先定义字体层级与字重使用边界。
  2. 约定主辅色、语义色和中性色梯度。
  3. 统一间距尺度与组件内外边距节奏。
  4. 规范图标风格、尺寸与对齐策略。
  5. 形成可复用的设计检查清单。

常见陷阱

  • 字体和颜色缺少语义命名,难以维护。
  • 同一页面混用多套间距节奏。
  • 图标视觉重量不一致,导致界面噪声高。

sunflowermm/xrk-agt/tree/main/.cursor/skills/visual-design-foundations commit 764aca7d94

Frequently asked questions

npx skillmds@latest add sunflowermm/visual-design-foundations