返回AI 入门教程
AI 入门教程
产品设计工作流：让 AI 做出你真正想要的设计
阅读时间：12 分钟
🔥 装上 Skill 只是开始，让 AI 理解你的设计才是关键。这套 7 步工作流来自 Claude Design 设计师的真实实践，一步步把 AI 输出从「AI 味」变成「设计感」。
核心理念：约束先于生成
新手的问题：装上 Skill → 给 AI 一句话 → 不满意 → 重复。专业设计师的做法：先定义设计约束 → AI 在约束内生成 → 逐轮细化。AI 在框里画比你自由发挥效果好 10 倍。
❌ 新手的循环
一句话 → AI出图 → 不满意 → 再一句话 → 又不满意 → 放弃
⬇️
✅ 专业工作流
设计简报 → 建立Token → 拆解任务 → AI在约束内生成 → 逐轮审查 → 满意
🎨 7 步完整工作流
每一步都有对应的 Claude Code Skill，按顺序执行。
0
/grill-me需求澄清
让 AI 反复追问，直到每一个设计决策都被敲定。你要什么风格？给谁用？什么场景下用？什么绝对不能有？这一步决定了 80% 的最终质量。
1
/design-brief设计简报
AI 自动探测你的代码库（颜色/字体/组件），生成结构化设计简报。包括：品牌定位、目标用户、竞品参考、功能需求、技术约束。
2
/information-architecture信息架构
定义页面层级和内容结构。哪些信息最重要？用户进来第一眼应该看到什么？导航怎么组织？
3
/design-tokens设计 Token 系统
生成完整的颜色/字体/间距/圆角/阴影 Token，支持深浅色模式。所有后续生成都要引用这些 Token，确保全局一致。这是防止AI风格漂移的核心。
4
/brief-to-tasks拆解为任务切片
把完整设计拆成可独立构建的垂直切片。每个切片：一个组件+它的所有状态+响应式变体。AI 一次只做一件事，质量远超一次做全部。
5
/frontend-design8 种美学哲学
选择一种美学方向：Dieter Rams 功能主义 / Swiss 国际风格 / 日式侘寂 / Brutalist 粗野主义 / Organic 自然有机 / Minimalist 极简 / Luxury 奢华 / Playful 活泼。每种锁定配色+字体+间距+质感。
6
/design-review设计审查
按设计简报逐项检查：Token 合规性？组件状态完整？响应式正确？无障碍达标？与品牌调性一致？发现问题回到对应步骤修改。
📁 设计文档目录结构
所有设计决策保存在 .design/ 文件夹，团队共享，Git 版本控制：
.design/
├── brief.md ← 设计简报
├── tokens.css ← 设计 Token
├── architecture.md ← 信息架构
├── tasks.md ← 任务切片
├── philosophy.md ← 美学方向
└── reviews/ ← 审查记录
⚡ 快速开始：今天就用
1安装工作流 Skills：git clone github.com/julianoczkowski/designer-skills ~/.claude/skills/designer
2运行 /design-flow 启动完整工作流
3或者单独运行某个步骤：/design-brief → /design-tokens → /design-review
4把生成的 .design/ 文件夹提交到 Git，团队成员共享
一句话：Skill 不是魔法，是流程。装上只是第一步——按这个工作流跑一遍，AI 输出的质量不是提升 10%，是从「没法用」到「能上线」。