# Visual Design Foundations

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

- Skill: `sunflowermm/visual-design-foundations` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add sunflowermm/visual-design-foundations`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sunflowermm/visual-design-foundations/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: sunflowermm (https://skillmd.com/u/sunflowermm)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sunflowermm/visual-design-foundations

---


## 权威入口

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

## 常见陷阱

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