visual-design-foundations

name	visual-design-foundations
description	当需要优化视觉基础（字体、色彩、间距、图标与层级）并提升一致性时使用。

权威入口

• .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. 形成可复用的设计检查清单。

常见陷阱

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