Design Craft Pro

融合三大设计技能体系的 Codex Skill — 一个 skill 覆盖从设计意图到交付的全流程。

---

这是什么？

Design Craft Pro 是一个面向 AI 编程助手（Codex、Cursor、Claude Code 等）的 前端设计技能文件，融合了三大开源设计技能体系的精华：

来源	贡献	原作者
taste-skill	美学引擎：Design Read、三度盘调参、排版/色彩规则	@Leonxlnx
impeccable	流程框架：23 个命令式工作流、反模式检测	@pbakaus
emilkowalski/skills	动画工艺：频率决策框架、Spring 物理、动效审查	@emilkowalski

涵盖内容（15 个 Phase）

• Phase 0: Setup & Context — 项目初始化，DESIGN.md/PRODUCT.md
• Phase 1: Design Read — 读懂需求，输出设计判断
• Phase 2: Three Dials — Variance/Motion/Density 量化审美
• Phase 3: Command Workflow — 23 个命令 (build/evaluate/refine/enhance/fix)
• Phase 4: Typography & Spacing — 禁 Inter、字号系统、间距规则
• Phase 5: Color — 反 AI 默认色板
• Phase 6: Motion — 频率决策框架、10 条动画铁律、stagger/GSAP
• Phase 7: Animation Review — 强制 Before/After/Why 表格
• Phase 8: Apple Fluid Design — Spring 物理、可中断性、直接操控
• Phase 9: UI Library Picks — 精选库推荐
• Phase 10: Prototype Workflow — 多方案设计探索
• Phase 11: Animation Vocabulary — 动效术语速查
• Phase 12: Output Discipline — 防偷懒，禁止骨架代码
• Phase 13: Anti-Pattern Detection — Ship 前 20 项必查
• Phase 14: Design System Awareness — 已有系统优先
• Phase 15: Ship Checklist — 最终交付清单

安装

# 使用 skills CLI（推荐）
npx skills add https://github.com/<你的用户名>/design-craft-pro

# 或手动复制到 Codex skills 目录
cp skills/design-craft-pro/SKILL.md ~/.codex/skills/design-craft-pro/SKILL.md

使用

在 Codex 对话中调用：

/design-craft-pro craft
/design-craft-pro critique src/
/design-craft-pro animate hero-section
/design-craft-pro polish

许可

MIT License — 详见 LICENSE

致谢

感谢以下项目的开源贡献：

• Leonxlnx/taste-skill — MIT
• pbakaus/impeccable — Apache 2.0
• emilkowalski/skills — MIT