从想法到应用：Peter Yang 的六步 AI 设计工作流

Peter Yang 演示设计和构建 Tastemaker 的六步流程。这个网站用于分享喜欢的电影、电视剧和游戏。教程展示约 25 分钟，但他表示实际项目花了数小时，仍可能存在错误。

第一步，定义用户问题。Yang 想要一张跨媒体的喜好主页，而不是分散的清单。他请 AI 明确受众并寻找相关证据，同时指出，商业产品还需要更多需求和收入研究。

第二步，收集视觉灵感并创建 design.md。Yang 提供自己喜欢的界面截图，要求生成颜色、字体和间距等原则：界面保持安静，让封面承担色彩。他区分了借鉴视觉方向与直接复制其他产品。

第三步，探索关键页面。Yang 将设计文件交给 Claude Design，分别要求生成公开主页和未登录落地页的两个方案。他回答有关布局、内容和视觉风格的问题，然后比较不同版本。

他直接编辑不喜欢的文案和控件，也进一步反馈收藏区、全宽评论和导航。满意的结果经过了几轮迭代。他强调，人的细节判断和具体反馈决定设计质量；这不是一条提示词就能完成的结果。

第四步，将问题、原型和要求转成 HTML 规格。Yang 喜欢先看关键页面，再写详细规格，因为视觉内容有助于理解产品。他的示例包含产品、设计和技术标签页，包括组件库与拟议数据结构。

他要求读者检查并完善规格，而不是假设生成的需求都正确。他披露，自己的规格技能包含在付费会员中，也表示不购买它，同样可以用 AI 创建类似工作流。

第五步，用审阅过的规格设计其余核心页面，包括创建者主页、编辑控件、空状态、条目详情和新手引导。Yang 建议检查默认状态与边界情况，再通过评论、编辑或迭代完善设计并导出。

第六步，把规格和设计文件一起交给编程智能体。Yang 要求它在实现前指出不明确之处。他强调，提前规划和修改原型，有助于避免之后更改数据库及其他系统部分所带来的困难。

构建仍需要较长的反馈循环。Yang 在本地运行应用、提供截图、要求补上缺失的评论区和导航，并请智能体让计划和设计与代码同步。演示中还包括 Supabase 数据库和身份验证。

Yang 展示了包含落地页和个人主页功能的在线应用。他估计达到这一状态花了数小时，承认仍有错误，并建议面向真实客户构建产品时更深入地验证问题和商业机会。