怎么在现有项目里比较三个设计方向

1. 安装完整技能目录

需要 Git 和 Node.js 22 或以上。仅复制 SKILL.md 不够。Claude Code 的安装路径不同，见安装指南。

git clone https://github.com/YuqingNicole/variant-design-skill.git ~/.codex/skills/variant-design

查看完整安装指南 →

2. 在项目里发出任务

在 Agent 中打开你的代码项目，粘贴下面的指令。第一次可以只做一个页面或 hero 区域。模型由你的 Agent 提供。

使用完整 Variant Design 技能。在当前项目中先检查页面结构和设计系统，再生成保留核心任务的 A/B/C 三个设计方向。已有品牌保持字体与 tokens；没有品牌约束时探索三种鲜明风格。打开三版预览，说明优化、取舍与适用场景，并给出有理由的推荐，但先不要替我选定最终方案。

3. 比较和试改

试改一版不等于选定它。下面的简写可以直接发给 Agent，也可以用自然语言描述。

• compare：重新打开三版比较页。
• B vary subtle — hero：只精修 B 的 hero。先保存快照，其他区域和品牌 tokens 不变，也不会选定 B。
• Mix A + B：合并两版，并说明冲突时的取舍。
• undo B：恢复 B 上一次的文件和 tokens。A/C 与最终选择不受影响。

4. 选定并接入

只有你明确选定时，才会记录最终方案。接入前会备份目标文件，之后可以回滚。

• pick B：把 B 记为最终方案，再从 B 提炼出完整的设计系统：色板、字体层级、间距、圆角、阴影、动效，以及 B 用到的每个组件的全部状态，并写明使用规则（DESIGN.md）。确认（ds confirm）后，之后的页面都用它，并导出可导入 Figma 变量的 DTCG 令牌文件。修改与选定分开记录。

把 B 接入项目。生成接入文件前先准备源稿与目标文件基准，覆盖前先备份，运行现有类型检查与构建，返回可打开的预览地址，并列出改动的文件和撤回方式。

实测记录

2026-10-27，我们在 3 个示例项目上分别用 Claude Code 和 Codex 跑了第一次生成，共 6 次，自动检查全部通过。Claude Code 每次用时 589–1026 秒，费用 $1.82–2.46；Codex 每次用时 309–513 秒。这些项目是我们自己写的，数字来自当时的版本，不代表你的项目。

查看完整记录 →