从需求定位到设计实现，再到最终的视觉调试，作者通过一个真实的案例，展示了如何将AI的强大功能与开发流程相结合，不仅提高了开发效率，还提升了产品的设计质量。

vibe coding的下个阶段是追求有设计感，那如何突破Claude、gpt模型本身过时的审美，做出有风格的产品？本篇尝试用一个真实的案例来聊聊增加了设计规范的氛围开发。

定位场景

做个产品的第一步是要先有想法。这点推荐大家用笔记工具及时记一下点子，这样回头翻时不至于脑袋空空。

也可以通过敏锐的触觉在日常生活、刷社区去发现需求，比如最近iPhone17上新，就有了很多监控实体店库存的产品出现。这类机会需要足够敏锐才能发现。

这里的项目用我最近的一个痒点来做例子：最近发现和对象讨论吃什么时，两人描述某家餐馆口味时形容词总是没法对齐，最常用的词是“还行”“还可以”，但其实这里面有些是“还可以，会去再吃”，有些是“还行吧，勉强能吃”。而除了少部分很好吃的饭店让人印象深刻，大部分饭店其实不会给人留下很深的印象，久而久之对其印象就成了一句“还可以”。于是，希望做个工具，记录下自己下过的馆子，以及及时给它做个分类。不用大众点评，一是因为点评太重；二是因为在商家的变形激励下，点评的记录往往也是失真的。而单机工具就没这问题，每个人都可以积累、分享自己的美食墙，也可以点赞、关注口味相同人的美食墙。

对齐需求

有了想法，下一步是和AI对齐要做什么，即把想法细化成清晰的需求文档。我这里用的是codex，大家用claudecode或cursor也是一样的。

需求文档的目的是对齐，具体文档是人写还是AI写都可以，重点是把这件事和AI对清楚，要用哪个平台做、怎么设计。

我的第一轮指令如下：

我需要你帮我细化这个需求。

平台：微信小程序

场景：和女朋友讨论吃什么时，双方在讨论某家餐馆口味时，形容词总是没法对齐，最常用的词是“还行”“还可以”，但其实这里面有些是“还可以，会去再吃”，有些是“还行吧，勉强能吃”。而除了少部分很好吃的饭店让人印象深刻，大部分饭店其实不会给人留下很深的印象，久而久之对其描述就成了一句“还可以”。于是，希望做个工具，记录下自己下过的馆子，以及及时给它做个分类。不用大众点评，一是因为点评太重；二是因为在商家的变形激励下，点评的记录往往也是失真的。而单机工具就没这问题，每个人都可以积累、分享自己的美食墙，也可以点赞、关注口味相同人的美食墙。

MVP想法：固定SABCD五个等级，用户可以快捷添加餐厅，并记录餐厅的等级。记录后，用户的主页即会展示一个美食墙。需要你做的：

1.在这个文件夹创建个新文档，细化这个需求，列出功能和页面跳转；

2.细化我们产品中所需要的美术素材，包括按钮、展示等，列在文档里；

3.用ASCII画个demo出来，和我对齐下

很快，AI产出了第一轮的文档，可以看到文档很详细，我们要求的、没要求的都有了。Review AI需求文档时，要重点关注几个点：

1. 砍掉AI幻想，专注1.0。不同模型有各自的性格，有些AI喜欢给你一个很完备的方案，然后再早期堆积大量无用代码，影响后续维护。
2. 重点对齐交互与流程。关注AI给出的ASCII原型是否符合心中的想象，比如我对这个小程序的期望是，首页可以直接看到美食墙，而不是看到一个平铺的打卡列表，那这个信息就是需要给到AI的。
3. 实现方案相关。这个还是需要关注一下，比如哪些信息要存数据库，要调用哪些API都需要沟通清楚。如果你不了解，可以问AI让他去做调研。

整理下需求文档中的不足点，第二轮沟通的内容如下：

继续调整需求文档，优化以下几个点：

1.简化下设计。不需要多个tab，最好一进入就能看到一个美食墙。不需要筛选、导入导出、餐厅详情页、重复提醒这种分支功能，只需要能看到美食墙，添加打卡记录即可。

2.添加餐厅时，需要调用小程序现有的POI接口，方便用户选择地点；添加餐厅时，只需要选择餐厅、选择等级，其他的可以不要。SABCD档的描述更直白点，S-神中神，D-踩雷，中间几个你补充下

3.需要有登录、创建用户的逻辑，每个用户的美食墙都会被保存起来。

4.每个等级的标志，可以考虑做成统一的设计风格。你把这块完善下，然后把所有需要设计的内容整理出提示词来，我会使用这个提示词来生成图标

调整后，重复上述流程，直到你觉得这份文档已经还算清晰的表达了自己想要的。这里我个人的习惯是，不用太过较真，只要没有方向错误（比如把页面处理成弹层），就可以先做一做看一看。

编码实现

进入编码环节。这里的要点是：

1. 注意可维护性。尤其不要写出一个几千行代码的长文件。
2. 提供必要的工具以优化AI表现。我最常用的是用playwright让AI能自己打开浏览器测试、用context7让AI能RAG最新的文档。
3. 先可用，再优化。先把大的流程跑通，再按照设计风格，调试视觉效果。

这里过程就不赘述了。这个case测试，对于常用的开发框架，gpt-5-high还是不如Claudecode的，同样的编码任务，claudecode自动选择了合适的方案并一次跑通主流程；但gpt-5-high还是稍微调试了下。调试也没什么复杂的，将页面上的报错复制粘贴给AI即可。

按照AI给出的调整方式调整两轮后，可以看到主流程就跑通了，只是页面非常丑陋，这时就可以进入调试设计环节了。此时也可以让AI更新下之前的需求文档，并出下下个阶段的方案。

现在更新下需求文档，更新下进展、项目现状。下个阶段的重点是优化视觉风格，在需求文档里出几版方案，包括完整的设计素材包，以及设计风格。

调试设计

调试环节需要大量抽卡，设计元素。可以直接用使用nano banana/gpt-image/即梦，也可以使用lovart这种集成了agent+生图API+画布的集成工具。

生成提示词时，可以直接把上一步更新后的需求文档发给chatgpt，让其辅助做提示词生成。这里注意，如果使用生图工具，则最好使用下图这种，一个指令一张图的提示词模式；如果使用lovart这种设计agent，则可以将所有需求整合到一个指令中，设计agent会自己拆分子任务并执行。

为美食APP设计一套像素风界面元素，包括等级图标、页面背景和按钮，要求整体风格统一，色彩饱和，带像素颗粒感，适合APP用户等级体系展示。

1. 等级图标（S / A / B / C / D 五个等级）

– 所有图标保持统一尺寸与构图比例，带像素颗粒感。

– 图标中要有清晰的像素字体字母（D、C、B、A、S）。

– 融合餐饮元素：

– D 级（青铜）：铜色饭碗，字母 D，棕橙色调。

– C 级（白银）：银色餐盘，字母 C，浅灰和白色调。

– B 级（铂金）：冷银蓝色刀叉组合，字母 B。

– A 级（钻石）：蓝紫色水晶酒杯，字母 A。

– S 级（黄金）：金色皇冠餐盘，字母 S，带闪光与粒子特效。

2. 页面背景

– 风格：像素风，整体简洁但有层次感。

– 主色：与等级图标呼应，采用美食相关的暖色系（米色、浅黄、木纹色）。

– 装饰元素：像素化的美食图标（披萨片、小蛋糕、汉堡、鸡腿），分布在背景上，密度适中。

– 不影响内容展示，留有充足留白区域。

3. 按钮元素

– 按钮为像素风方块或圆角矩形，带像素描边。

– 状态：

– 默认：纯色填充（如橙色、黄色、绿色），搭配像素边框。

– 悬停/按下：边框加深，增加像素阴影，显得立体。

– 文字：像素字体，颜色与背景对比明显。

– 关键按钮（如“升级”、“兑换”）：加入闪烁的像素光点或动态像素特效。

4. 整体要求

– 风格统一，全部采用像素风。

– 视觉上强调 S 级（金色）的尊贵感。

– 适合APP移动端界面使用，保证清晰可读。

这里需要反复尝试、了解各种设计风格。然后选择属于自己应用的设计风格。如果不知道，也可以直接让chatgpt来推荐。我这里的case使用最近比较流行的像素风来做例子。如果单看这些设计元素看不出美丑的话，可以将图片下载下载到项目文件夹中，然后让编程AI把这些图片素材替换到实际环境中，一步步调试。

比如我这里替换了背景后，虽然整体调性有所改善，但还是可以看到几个明显不和谐的地方：

• 每个等级的logo太小，看不出等级
• 餐厅卡片、添加按钮、标题文字和像素风调性不符

那就需要针对这些问题，继续循环上述写设计提示词->出图->放到代码中让AI调试效果的流程，直到效果满意。

再做亿点点调试，直到出满意的效果。这一步要有耐心，需要不断抽卡，找到符合自己感觉的产品。下面这版是调试几轮之后的产物，明显会比前两轮更精致一点。

以上，就是本篇的全部过程了。