阶段 2：设计
目标：所有者已批准在手机和笔记本电脑上看到的外观。该外观以令牌的形式编写，因此可以复制为 WordPress 皮肤，且以后替换时不会丢失功能。
步骤
- 方向。 填写项目的
docs/DESIGN_DIRECTION.md：北极星目标、受众、绝对不能看起来像什么（竞争对手、模板）以及不可妥协的要求。最多提供两到三个方向，以小型情绪板或主页模型的形式呈现，而非完整站点。 - 在
static/中制作原型。 纯 HTML 和 CSS。css/tokens.css使用与主题skins/default/tokens.css相同的名称。组件仅使用令牌。真实结构（页眉、主页、卡片、表单、页脚），占位内容，无价格和政策文本。 - 从一开始就实现无障碍：
- 文本对比度 ≥ 4.5:1；
- 可见焦点；
- 一个 H1；
- 跳过链接；
- 键盘路径；
- 尊重
prefers-reduced-motion。 在展示原型之前，使用 axe（浏览器扩展）检查原型。
- 所有者审查。 每页在手机（375 px）和笔记本电脑（1440 px）宽度下的截屏。将批准日期记录在
DESIGN_DIRECTION.md中，并将截屏保存到docs/design/。 - 字体： 自托管
.woff2文件，子集化为所需语言，检查许可证，并预加载一两个首屏字体（命名为*-preload.woff2）。任何地方都不请求 Google Fonts。 - 移植到 WordPress（
references/design-system.md）：- 将令牌复制到皮肤中；
- 将组件 CSS 移动到
skin.css； - 使用核心的渲染函数布局模板；
- 仅在标记必须不同的位置添加皮肤部分覆盖。 外观改变；核心的数据和标记合约不变。
- 后续重新设计 即为新皮肤：将
skins/default复制为skins/<name>，更改令牌，使用?skin=<name>（管理员）预览，并在批准后通过<prefix>_skin选项切换。
关卡（在 SITE_STATUS.md 中勾选）
-
DESIGN_DIRECTION.md已编写；所有者批准已记录并附有截屏 - 令牌已定义；组件仅使用令牌
- 字体已自托管；0 次对 Google Fonts 的请求
经验教训
- 当业务伙伴发送自己的重新设计时，锁定的设计发生了变化。因为外观是皮肤，切换保留了所有功能。将每个设计都构建为皮肤，即使是第一个。
- 不要复制竞争对手的调色板、字体配对或布局。所有者会注意到，而访客不会记住你。
- 用于尝试想法的仅测试皮肤（
dev-*）从不在生产环境中显示。 - 如果安装了
frontend-design或design-motion-principles技能，请使用它们来确定方向和运动效果。