Full Tutorial: From Idea to App with Claude Design and Claude Code in 25 Minutes

作者用 Claude 和 AI 工具，6 步从零做出一款"个人品味主页"网站，关键环节全靠 AI 生成设计稿、组件库和代码，人工只做品味把关。

• 第 1 步：先把用户问题说清楚。作者想做一个能同时展示自己喜欢的电影、剧集和游戏的主页，因为 IMDb 这类工具只能列清单，没法一页看全。用 Claude 直接写出"用户痛点"和目标用户，还能让它帮忙查网上有没有类似需求。
• 第 2 步：找灵感+生成设计规范（design.md）。AI 默认出的设计很丑，容易变成"紫色泥巴"或一眼看出是 Claude 风格。作者先去 Mobbin、Dribbble 这类网站找喜欢的风格（比如 Monogram 这种"内容主色、界面极简"的设计），把截图丢给 Claude，让它生成一份 markdown 格式的设计规范，包括配色、字体、间距等细节。还推荐了 z.sh 这个网站，里面有各大知名网站的 design.md 可直接参考。
• 第 3 步：用 Claude Design 生成关键页面原型。把刚做好的 design.md 和需求描述一起丢给 Claude Design，让它生成两个核心页面：一个是公开的品味主页（展示收藏、影评、清单），一个是未登录的落地页。AI 会自动问一连串细节问题（比如页面布局、展示内容、深浅色模式等），用户边答边 refine，最后让 AI 给出多套方案，人工挑喜欢的那套。
• 第 4 步：生成一份带产品、设计、技术三合一的 HTML 规范（spec.html）。作者不喜欢传统流程（PM 写文档、设计师出 Figma、工程师再写技术文档），而是让 Claude 直接生成一份 HTML 文件，里面分三栏：PRD（用户问题、目标、需求清单）、Design（设计原则、样式、组件库）、Tech（技术栈、数据库结构）。特别强调让 AI 生成组件库，否则后面页面风格会乱。
• 第 5 步：让 Claude Design 按规范补齐所有核心页面。把 spec.html 丢回 Claude Design，让它生成所有需求里的页面，包括空状态、异常状态、编辑页、引导页等。每次都要人工认真 review，哪里不对直接在页面上批注或在对话里提意见，反复迭代。
• 第 6 步：用 Claude Code 直接生成前端代码和数据库。把最终的设计稿和规范一起上传，先让 AI 检查有没有不清楚的地方，主动提问题。再一步步让它写代码、跑本地服务，人工不断贴截图、写反馈，细到"收藏按钮只在鼠标悬停时显示"、"影评要有封面和评分"、"加 Netflix 式左右箭头"等都能实时调整。每次大改动都要提醒 AI 同步更新设计和规范文件，保证后续不乱。

• Claude Design：最大优点是会主动问细节问题，帮你把需求想全。支持直接编辑页面和对话反馈两种方式，适合反复打磨。
• 其他工具：Paper（像 Figma 但 AI 原生）、pen.dev（多 AI agent 协作设计）、Figma（现在也有 AI 功能），都可选。作者用 Claude 是因为订阅了，Opus 也够用，token 便宜。
• 设计规范（design.md）和组件库：AI 很容易做出风格混乱的页面，必须在一开始就让它生成并维护组件库，后续每加新页面都要同步更新。
• spec skill：作者自制的 Claude 指令，能一键生成三合一规范文件（产品+设计+技术），还会自动生成组件库和数据表结构。强调数据库结构一旦上线很难改，必须前期敲定。
• 人工介入点：AI 不能一把梭，关键在于每步都要人工挑方案、删多余元素、补细节、反复提意见。比如"影评不要排成网格，改成单行""清单要全展开""落地页产品预览放在主视觉下方"等，都是人工定的。

• AI 不是一键生成，反馈要给到细节。比如"收藏按钮只在鼠标悬停时出现""影评区没按设计来""缺少左右箭头"等，都要一条条提出来，Claude 每次都能改。
• 规范和设计稿要始终同步。AI 改代码时，记得让它同步更新规范和设计文件，否则后面容易乱套。
• 上线前 50% 时间都花在规划。作者强调，AI 让开发变快，但前期规划更重要。每多花 1 小时在设计和规范，后面能省 10 小时返工。
• 最终成品：作者用 Claude+Superbase（数据库）+AI 生成代码，几小时做出可用网站，支持登录、编辑、展示品味主页。实际开发比 AI 估算的"3 周"快几十倍。

"用 AI 做产品，最重要的是前期把规范和设计打磨到位——开发反而成了最省心的部分。"

• AI 能做的远不止"画图"：只要前期把需求、设计、技术规范梳理清楚，AI 已能全流程生成设计稿、组件库、前端代码和数据库，个人开发者能像带团队一样做产品。
• 组件库和三合一规范是降维打击：AI 容易风格混乱，强制让它维护组件库和三合一 HTML 规范，能极大提升产品一致性和后续扩展效率。做 AI 产品的团队可以直接照抄这套流程。
• AI 不是一把梭，人工 taste 决定成品上限：每一步都要人工挑方案、删丑元素、补细节，AI 负责出方案和落地，人的品味和判断才是关键差异化。