完整教程:用 Claude Design 和 Claude Code 25 分钟从想法到应用

• 要做的东西：Tastemaker，一个把你喜欢的一切（电影、剧集、游戏）收在同一个页面的网站。要设计的是两个页面——landing page，和一个"品味主页"（放他真实的收藏、影评、片单）。做它的动机很个人：他看过成千上万部影视、玩过几百款游戏，一直用 IMDb 记录，但 IMDb "就是一个干巴巴的列表"，界面差强人意。→ 详细
• 六步是：① 定义用户问题 ② 找灵感、写一份 design.md ③ 在 Claude Design 里探索 prototype ④ 写一份 HTML 格式的 spec（把产品设计和技术要求都塞进去）⑤ 把所有核心页面设计出来 ⑥ 把 app 真正构建出来。他开宗明义就说了这套流程的前提——"我们不用 Figma"。→ 详细

• 他的起手 prompt 结构可以直接抄：先自报身份和诉求（我是电影/剧集/游戏爱好者，想要一个页面把三类都展示出来），再让 AI 做三件事——定义客户问题、说清目标用户是谁、去网上找证据证明这个问题真实存在，最后加一句篇幅限制"这部分写两小段就行"。注意他这条 prompt 已经挂着自己的 spec skill 在跑。→ 详细
• AI 调研出来的结论直接变成了产品定位：它发现电影、剧集、游戏这三类各有各的品味收藏网站、彼此不通——所以 Tastemaker 的存在理由就是"在一个页面上同时呈现你在三个领域的品味"。→ 详细
• 他很诚实地划了自用和生意的分岔："如果我是把这个应用当生意来做，我会花多得多的时间去调研、去吃透这个问题，去判断它到底能不能赚钱、能不能拉到用户。但现在我只是做给自己用，所以直接进下一步。"收尾时他又补了一刀：现在靠软件赚钱比以往任何时候都难，因为人人都能自己写代码做东西了。→ 详细

• 不给参考，AI 只会给你两种东西：一种是"一眼假的紫色垃圾风"（generic purple slop），一种是"一眼能认出来的 Claude 味"。想做出有辨识度的东西，就必须先找灵感。→ 详细
• 灵感来源他给了三个：Mobbin（各家 App 的 UI 截图库）、Dribbble（设计师作品集），以及这次他实际用的 Monogram——一个视觉优先跟 AI 协作的应用。他看中的不是功能，是它的美学：极其干净，而且用颜色把注意力引到内容上、而不是引到 UI 上。这句判断后来直接变成了 design.md 里的硬约束。→ 详细

• 动作只有两个：贴图 + 一条 prompt。他把 Monogram 的几张截图直接复制粘贴进 Claude Code，然后给了一条四要件的 prompt：这里是某某的几张截图 / 请按这个视觉方向给 Tastemaker 写一份 design.md / 产品一句话定位（帮人们在一个页面上分享最爱的电影剧集和游戏）/ 一条审美硬约束——"界面要保持安静，让封面海报去承担色彩"。最后这句是整份 design.md 的灵魂，没有它出来的就是通用模板。→ 详细
• design.md 里到底有什么：本质就是一个 markdown 文件，写着这个应用的基本设计原则，加上配色、字体、间距等等的"非常简单的建议"。他强调因果关系——正因为喂了几张你真心喜欢的截图，它才有机会产出真正贴合你想要的那种配色和样式规范，而不是凭空发挥。→ 详细
• 不想自己生成还有现成货：z.sh（链接在视频简介里）收录了 Nike、SpaceX、Apple、Vercel、Notion 等知名网站的 design.md，点进任何一个，里面就是这些网站用的全部配色和字体规范。→ 详细
• 他主动加了一条伦理免责：找灵感和直接照抄别人的应用是两回事；他给自己的理由是"我们做的产品和 Monogram 完全不是一个品类，所以从它的设计里借鉴一点，我心里是过得去的"。→ 详细

• AI-native 设计工具他都试过：Paper（长得像 Figma 但带 AI 能力）、pen.dev（能让一堆 agent 同时在你的设计稿上干活，他采访过创始人）、Figma 自己现在也有不少 AI 功能。这次选 Claude Design 的理由很朴素：本来就订了 Claude，而且它有几点他特别喜欢。→ 详细
• 模型选择的省钱提示：虽然他喜欢 Fable，但"这类任务 Opus 完全有能力做出很好的设计"，想省 token 就用 Opus。→ 详细

• 附上 design.md 本体，而不是复述它，并明确要求"把 design.md 当成视觉系统来用"。（顺带一个小技巧：这个文件可以让它导出，也可以右键选"在 Finder 中打开"找到。）→ 详细
• 点名要做哪两个页面：公开的品味主页（含最爱、最近影评、片单）+ 未登录状态的 landing page（最好拿一个真实的品味主页当范例展示）。→ 详细
• 每个页面要两个变体，理由是"AI 本来就能一次生成多个版本，我们可以从里面挑最喜欢的"；并且要求把它们摆在同一个页面上，方便对比和打磨。→ 详细
• 明确平台："先做 web 版本"——他专门解释这句话的作用是堵住它去做移动端设计。→ 详细

• 他明说这是他最喜欢、也想不通别家为什么不抄的一点——提交需求之后它不直接开工，而是先抛一串澄清问题，"这些问题真的能帮我把设计要求想透"。→ 详细
• 他是这么答的（问题清单本身就是一份需求 checklist）：范例主页展示谁的品味 → 选一个电影/剧/游戏都均衡涉猎的通吃型用户；两个变体各探索什么方向 → "我觉得布局是最关键的"，于是定为"横排为主 vs 网格编辑风"；主页放哪些板块 → 只留最爱、最近影评、自定义片单，其余砍掉；做几个页面 → 因为他不清楚"媒体详情页"是什么，就先定两个；配色 → 浅色和深色两版 mockup 都要；文案要多真实 → "完全写成真实文案"。→ 详细
• 最后那问值得单拎：选"真实文案"，后面才有得挑剔——他之后删掉的那些"自以为妙语连珠的句子"、改掉的 slogan，都是因为它真写了文案才暴露出来的。假文案（Lorem ipsum 那种占位符）会把这些问题全部推迟到构建阶段。→ 详细

• 先看它给了什么：品味主页两版——横排为主版（从上到下是最爱、最近影评、片单），和网格深色版（信息密度更高，片单被压成三个胶囊标签）；landing page 也两版——一个拿个人主页当 demo，一个是更偏编辑风的海报墙。→ 详细
• 方式一：直接改文件（点"编辑"手动删）。他当场删了三样东西：Claude 爱写的那种自以为妙语连珠的句子（比如"定义了这场争论"）、一堆没必要的小胶囊标签、以及一个"这个功能我们压根还没做"的关注按钮。最后这条是纪律——界面上不许出现还不存在的功能。→ 详细
• 方式二：打开侧边栏，给 AI 写一段结构化反馈（改动多、涉及布局重排时用这个，手改不动）。→ 详细
• 方式三：直接在界面上加评论让它改（第五步里他提到的第三种）。三种方式的分工大致是：小的删改直接手改，布局级的改动写反馈，逐张审图时用评论。→ 详细

• 先明确选版："我更喜欢 1A 和 2A，也就是浅色版。"深色那版他承认挺好看，但为了一致性还是选浅色；另一版"整体对不齐"，直接淘汰。→ 详细
• 四条具体改动：最爱改成一行六个、配左右箭头翻页"像 Netflix 那样"；最近影评改成通栏，带封面图、五星评分和影评正文（原来全挤在一个网格里，"我更想要每条影评单独占一整行，这样空间更宽裕"）；片单也一行五个、跟最爱对齐，六张卡片全显示而不是压缩；页面加一个左侧导航，快速跳到最爱/影评/片单。landing page 那边他要求把产品预览挪到 hero 区块下面，让人先看到一个完整的品味主页当范例。→ 详细
• 他没藏代价："说实话，做到现在这个状态又多迭代了好几轮。"这一步不是一轮反馈就到位的。→ 详细
• 连一句 slogan 都亲自动手：他把"用你的所爱定义你是谁"从主标位置挪走（觉得它有意思但不够直白），主标换成"一个品味主页，装下你爱的一切"。→ 详细
• 他对这一整段的定论："垃圾设计和真正好的设计之间的差距，无非就是有没有在细节上下功夫。Claude 不可能一次就给你生成完美的设计，你必须把自己的品味用上去。"→ 详细
• 收口动作：导出成 zip。虽然有直接推给 Claude Code 的通道，但他习惯导出成 zip 或 HTML，理由是这样能导进 Claude Code、Codex 或任何你想用的 harness——不把自己锁死在一家工具里。→ 详细

• 他的理由："与其先憋一份文档、把所有默认状态和边界情况都抠一遍，不如先看几张关键视觉稿——那样更容易搞清楚这个产品到底是什么。"→ 详细
• 他自己点破这是反着来的：传统做法是"我这种 PM 先写 spec，交给设计师去出 Figma，然后两份东西一起丢给工程师，让他再写一份技术方案"。这一整条流水线在他这里被折叠掉了。→ 详细
• 第二个反常识：他反对把文档拆开。"我不喜欢东西散在一堆文件里，所以我更愿意把产品需求、设计和技术方案全塞进同一个文件。"他的 spec skill 干的就是这件事。→ 详细
• 生成动作：把 Claude Design 导出的 zip（含两张关键界面）传进 Claude Code，一句 prompt——"把这些需求和设计整理成一份简洁的 spec，分成 product、design、tech 三个 tab"。→ 详细

• PRD tab：前面定下的用户问题 + 产品的几条高层目标 + 需求清单。两条格式要求值得抄——需求要写得非常精炼、扫一眼就能读完，而且按 app 的不同界面模块分开列（不是一大坨）。→ 详细
• design tab：本质是 design.md 的 HTML 版（"读起来更舒服"）+ 几条设计原则 + 颜色和字体的 style guide + 一份 component library（下一节单讲）。→ 详细
• tech tab：技术栈 + 一份数据表结构，理由很硬——"数据库一旦上了生产环境就特别难改"，所以要写清数据怎么组织、做了哪些取舍。→ 详细
• 一个笑话也是一次校准：AI 在 spec 里估这个 app 要做三周，"而实际上大概三十分钟就搞定了"。→ 详细

• 这是他讲得最重的一条踩坑经验："我以前不带 component library 直接做 app，结果通常是 AI 开始自由发挥、造出一堆奇奇怪怪的组件，整个 app 越看越乱。"→ 详细
• 所以规则有两条，第二条更容易被忘：一是必须让它生成一份组件库；二是随着界面越做越多，要一直把这份组件库更新到最新——它是活的，不是一次性产物。→ 详细

• 他把 spec 做成 HTML 的动机就是让人读得进去："我把整个 /spec skill 设计成这样，就是为了让人真的读得进去——因为你必须逐条读完、给它反馈、把它打磨好，这一步非常重要。"→ 详细
• 他在下一段又强调了一遍，并把代价说明白：一定要真读、给反馈去改、确认所有需求都说得通，然后再让它去出设计稿，"不然你就是在白烧 token"。→ 详细
• skill 的出处他自己讲清了利益相关：/spec skill 在 behindthecraft.com，给他付费 Substack 订阅者；但他也明说"你也完全可以让 AI 免费给你写一个，只要按我刚才演示的思路，让它输出这三个 tab 就行"。→ 详细

• 动作：把 spec.html 传回 Claude Design，一句 prompt——"把需求里的所有核心界面都做出来"，附上 spec 的 HTML。此时 spec.html 就是"我们要做的这个东西的唯一事实来源"，而它下面还列着一堆尚未设计的界面需求。→ 详细
• 出来的界面清单：之前的 landing page 和品味主页，加上创作者视角的"自己的品味主页"（带编辑功能、添加按钮、能改自己写过的评价）、完整游戏列表页、点开弹出的条目详情卡（可收藏、可打分、可标"想试试"）。→ 详细
• 他专门点名两类最容易漏的东西。第一类是默认状态、空状态和边界情况：新建好的品味主页里什么都没有，"那就需要一个明确的行动引导让用户去添加内容"。第二类是 onboarding 流程：认领用户名 → 挑六个你喜欢的东西 → 分享你的主页；他的理由是"如果你做的产品是真想拉到用户的，就必须给他们一个足够好的新手引导体验"。→ 详细

• 手上这时候有两份东西，而代码一行没写：spec.html（产品、设计、技术需求）+ design.html（从 Claude Design 导出的所有核心界面设计稿）。他管这叫"两份互相对齐的产物"。→ 详细
• 本期最想让人记住的一句："用 AI 做东西，你至少要把一半的时间花在前期规划上。写代码这件事已经变简单了，但你得有一份足够扎实的计划，AI 才能按你想要的方式做出你想要的东西。"→ 详细
• 成本论证是这套流程的地基：一句"帮我做个 app 整理电影剧集游戏"丢过去，做出来的肯定不是你想要的；而一旦数据库和技术栈都建起来，再改"比现在麻烦得多、贵得多"——现在只要改这两个原型 HTML 文件。→ 详细
• 他给自己这套流程的定性很坦白："某种意义上，这其实有点像瀑布式开发，只不过被 AI 加速了。"→ 详细

• 起手 prompt 又是一招反问：附上 spec.html 和 design.html，然后说"先看一遍 spec 和设计，动手之前告诉我你有什么疑问、有哪些含糊的地方需要我澄清"。他的原则是——默认一定存在你自己还没想清楚的模糊地带，让 AI 在写代码之前先向你提问，尽可能先解决掉。→ 详细
• 然后是让它跑起 localhost，自己看，把不满意的地方截图贴回去。真实反馈样本：收藏和爱心图标只该在鼠标悬停时出现；profile 页面跟设计稿对不上；评价那一块去哪儿了；还有他自己之前忘了的 Netflix 式左右箭头要补上。→ 详细
• 他反复破幻觉："并不是说你把 design 的 HTML 和 spec 的 HTML 一传，它就能一把梭把你想要的全做出来。你还是得给它大量反馈"，真要做出来"对话还是很长的"。→ 详细
• 最容易被忽略的一条纪律，也是全片唯一提到的"反向同步"：当它开始直接在代码里改产品的时候，一定要让它同步更新 plan 和 design 文件，保证所有东西是对齐的。→ 详细

• 成品已上线（链接在视频简介）：landing page 能看示例品味主页、能登录搭自己的、能加电影、能排序、有评价。"做到这个程度大概花了几个小时吧，我相信里面肯定还有 bug。"→ 详细
• 技术侧和归因：过程包括搭一个 Supabase 数据库、让 AI 加登录鉴权；他补的那句归因才是重点——"如果我没在 spec 和设计里把那些关键需求先定下来，来回折腾会多得多。"→ 详细

• 回顾时补了两点新料：第一步如果想做的是真能拉用户甚至赚钱的产品，还得想清楚有没有商业机会——"现在靠软件赚钱比以往任何时候都难"；第三步要变体的深层理由是"好的设计师都喜欢先发散、多探索，最后再收敛到一个方向"，他还自嘲"我不是设计师"。→ 详细
• 最大收获他只留一句：把功夫下在前期规划上——"你前期规划做得越多，做出来的东西品味越好、完成度越高，也越有可能是一个真正有用、你自己也真心喜欢的产品。"→ 详细
• 他向观众要方向：欢迎在评论区说想不想看更多"展示我真实 AI 工作流程"的视频，"而不是那种追着最新模型吹的视频"。→ 详细

本期是纯教程，没有 lightning round。把六步法压成一张可以照着做的速查卡：

一句总纪律：至少 50% 的时间花在第 1–5 步，因为这几步改的只是 HTML 文件，第 6 步之后改的是数据库。→ 详细

• Peter Yang · YouTube 频道 Peter Yang；付费 Substack 与 skill 合集在 behindthecraft.com（/spec skill 就在那里，附带 AI 工具优惠券和课程）。
• 本期提到的外部资源：Monogram（视觉参考来源）· Mobbin（App UI 截图库）· Dribbble（设计师作品集）· z.sh（Nike / SpaceX / Apple / Vercel / Notion 等知名网站的现成 design.md）· Paper、pen.dev（其他 AI-native 设计工具，pen.dev 创始人访谈链接在视频简介）· Supabase（成品用的数据库）。
• 成品站点与上述链接均在视频简介中。