Visual Direction — 视觉方向

入口/出口

入口: 需要定义视觉风格、层级、组件外观或对外呈现质感
出口: 视觉方向、风格约束和层级规则定稿
指向: 需要交互主路径 → design-experience-interaction；需要排版 → design-content-layout
输出路径: build-content-layout（下游 build 技能）
前置加载: CANON.md + design-workflow-design

何时不使用

纯文本或纯后端任务
用户明确只允许沿用固定品牌模板，且不做方向判断

Iron Law

视觉方向必须服务理解和气质，不得替代结构和内容本身。

核心原则

Hierarchy Before Decoration
System Before One-off
Brand Before Personal Taste
Mood Must Match Task
Visible Consistency Beats Clever Variation

最佳实践输入

先读取 references/design-best-practices.md、references/design-inspiration-catalog.md 和 references/design-pattern-extract.md，并把视觉相关证据写入 02-design.md 的 Design References / Pattern Synthesis / Adopt / Reject。

扫描重点：

Enterprise Product Patterns: 同类产品的视觉密度、信任感、品牌气质和组件语言
Official Systems / Platform Rules: 品牌规范、设计系统、平台视觉规则、可访问性对比度
Methods / Theory / Style Schools: 视觉层级、色彩角色、排版体系、风格流派
Anti-patterns / Verification: 单色调滥用、装饰压过信息、卡片泛滥、品牌混搭冲突
Local Project Truth: 现有 token、组件库、品牌资产、媒介限制和用户目标；项目根 DESIGN.md（如果存在，读取 YAML token 和视觉方向）

流行风格必须经过 Adopt / Reject；不能把“高级”“科技感”“像某品牌”直接写成结论。

流程

Step 1：读取约束

品牌色
字体约束
组件库 / 现有视觉系统
媒介与尺寸
✅ 验证点: 是否已读取项目根 DESIGN.md（如存在）中的 token 定义？

Step 2：定义视觉目标

想传达什么气质
第一眼希望看见什么
哪些信息必须被降权
✅ 验证点: 视觉目标是否用可衡量的层级规则表述，而非仅用形容词？

Step 3：定视觉系统

色彩角色
字体层级
间距和对齐
卡片/按钮/图表/模块的视觉规则
✅ 验证点: 每条视觉规则是否可落到具体页面或组件，而非笼统方向？

Step 4：记录不做清单

不使用的风格
不采用的视觉套路
不允许的冲突元素
✅ 验证点: 不做清单中的每一项是否有明确的冲突来源或证据？

输出契约

写入 02-design.md：

视觉方向
风格与系统
页面视觉层级
Adopt / Reject（视觉模式）
不做清单

验证失败处理

失败场景	处理方式
风格词过于抽象	改成可执行的层级、色彩、排版规则
视觉方向与品牌冲突	以品牌约束为准，记录取舍
视觉方向遮蔽信息层级	回退装饰，强化主次层级
视觉模式无证据	补充 best-practice scan，写清来源层和取舍理由

常见说辞

说辞	现实	后果
“先做默认样式，后面再美化”	默认样式会固化成事实设计。	默认样式固化 → 后期修改视觉方向需重构 40-60% 的 UI 代码，返工量翻倍
“多加点效果更高级”	效果不是层级，噪音会吃掉重点。	装饰压过信息 → 用户首屏注意力分散 30-50%，关键操作转化率下降
“差不多就行”	差不多通常意味着没有视觉系统。	无视觉系统 → 后续每个页面独立决策，一致性成本逐页累积，项目越大越失控

好坏示例

✅ Good: 证据驱动的视觉决策

视觉目标: 传达专业信任感，让数据成为主角

色彩角色:
- 主色: #2563EB（品牌蓝，来源: DESIGN.md → brand.primary）
- 辅色: #64748B（中性灰，数据标签用）
- 强调: #DC2626（仅用于异常指标和 CTA）
- 背景: #F8FAFC → #FFFFFF（层级区分）

字体层级:
- H1: 24px/700（数据标题）
- H2: 18px/600（卡片标题）
- Body: 14px/400（数据值和描述）
- Caption: 12px/400（辅助信息，降权）

Adopt: 单色主色 + 灰层级（参考 Stripe Dashboard，Pattern Synthesis 来源 #2）
Reject: 多色渐变 Hero（与"数据是主角"目标冲突，来源: Anti-patterns）

❌ Bad: 抽象模板无具体决策

视觉目标: 高级、科技感

色彩: 用蓝色系（未定义角色和层级）
字体: 现代无衬线（未定义尺寸层级和对比）
不做清单: (未写)
→ 没有来源证据，没有 Adopt / Reject，无法落地到组件

输出模板

视觉方向产出应写入 02-design.md 的以下结构：

## Visual Direction — [功能名称]

### 视觉目标
- 传达气质: [具体描述，非形容词堆砌]
- 首屏焦点: [哪个信息/组件是主角]
- 降权项: [哪些信息必须视觉降权]

### 视觉系统
| 角色 | 具体值 | 来源 |
|------|--------|------|
| 主色 | [色值] | DESIGN.md / 品牌规范 |
| 辅色 | [色值] | ... |
| 强调色 | [色值] | ... |
| 背景 | [色值] | ... |

| 层级 | 字号 | 字重 | 用途 |
|------|------|------|------|
| H1 | [px] | [weight] | [用途] |
| H2 | [px] | [weight] | [用途] |
| Body | [px] | [weight] | [用途] |

间距尺度: [4/8/12/16/24/32px 等]
组件视觉规则: [卡片、按钮、图表等的具体规则]

### Adopt / Reject（视觉模式）
| 模式 | 来源 | 决定 | 理由 |
|------|------|------|------|
| [模式 A] | [来源层] | Adopt | [具体理由] |
| [模式 B] | [来源层] | Reject | [冲突点] |

### 不做清单
- [不做项 1]: [冲突来源或证据]
- [不做项 2]: [冲突来源或证据]

红旗 — STOP

没有品牌或场景约束就开始选风格
缺少视觉 best-practice scan 或 Adopt / Reject
把视觉方向写成审美形容词堆砌
同时追求多个相互冲突的气质
视觉规则无法落到页面或组件

design-visual-direction

Installation

Stronger alternatives

Similar popular skills

Also in this package

Agent compatibility

Repository health

Package contents

History

SKILL.md