从需求定位到设计实现，再到最终的视觉调试，作者通过一个真实的案例，展示了如何将AI的强大功能与开发流程相结合，不仅提高了开发效率，还提升了产品的设计质量。
vibecoding的下个阶段是追求有设计感，那如何突破Claude、gpt模型本身过时的审美，做出有风格的产品？本篇尝试用一个真实的案例来聊聊增加了设计规范的氛围开发。
定位场景
做个产品的第一步是要先有想法。这点推荐大家用笔记工具及时记一下点子，这样回头翻时不至于脑袋空空。
也可以通过敏锐的触觉在日常生活、刷社区去发现需求，比如最近iPhone17上新，就有了很多监控实体店库存的产品出现。这类机会需要足够敏锐才能发现。
这里的项目用我最近的一个痒点来做例子：最近发现和对象讨论吃什么时，两人描述某家餐馆口味时形容词总是没法对齐，最常用的词是“还行”“还可以”，但其实这里面有些是“还可以，会去再吃”，有些是“还行吧，勉强能吃”。而除了少部分很好吃的饭店让人印象深刻，大部分饭店其实不会给人留下很深的印象，久而久之对其印象就成了一句“还可以”。于是，希望做个工具，记录下自己下过的馆子，以及及时给它做个分类。不用大众点评，一是因为点评太重；二是因为在商家的变形激励下，点评的记录往往也是失真的。而单机工具就没这问题，每个人都可以积累、分享自己的美食墙，也可以点赞、关注口味相同人的美食墙。
对齐需求
有了想法，下一步是和AI对齐要做什么，即把想法细化成清晰的需求文档。我这里用的是codex，大家用claudecode或cursor也是一样的。
需求文档的目的是对齐，具体文档是人写还是AI写都可以，重点是把这件事和AI对清楚，要用哪个平台做、怎么设计。
我的第一轮指令如下：
我需要你帮我细化这个需求。
平台：微信小程序
场景：和女朋友讨论吃什么时，双方在讨论某家餐馆口味时，形容词总是没法对齐，最常用的词是“还行”“还可以”，但其实这里面有些是“还可以，会去再吃”，有些是“还行吧，勉强能吃”。而除了少部分很好吃的饭店让人印象深刻，大部分饭店其实不会给人留下很深的印象，久而久之对其描述就成了一句“还可以”。于是，希望做个工具，记录下自己下过的馆子，以及及时给它做个分类。不用大众点评，一是因为点评太重；二是因为在商家的变形激励下，点评的记录往往也是失真的。而单机工具就没这问题，每个人都可以积累、分享自己的美食墙，也可以点赞、关注口味相同人的美食墙。
MVP想法：固定SABCD五个等级，用户可以快捷添加餐厅，并记录餐厅的等级。记录后，用户的主页即会展示一个美食墙。需要你做的：
1.在这个文件夹创建个新文档，细化这个需求，列出功能和页面跳转；
2.细化我们产品中所需要的美术素材，包括按钮、展示等，列在文档里；
3.用ASCII画个demo出来，和我对齐下
很快，AI产出了第一轮的文档，可以看到文档很详细，我们要求的、没要求的都有了。ReviewAI需求文档时，要重点关注几个点：
砍掉AI幻想，专注1.0。不同模型有各自的性格，有些AI喜欢给你一个很完备的方案，然后再早期堆积大量无用代码，影响后续维护。
重点对齐交互与流程。关注AI给出的ASCII原型是否符合心中的想象，比如我对这个小程序的期望是，首页可以直接看到美食墙，而不是看到一个平铺的打卡列表，那这个信息就是需要给到AI的。
实现方案相关。这个还是需要关注一下，比如哪些信息要存数据库，要调用哪些API都需要沟通清楚。如果你不了解，可以问AI让他去做调研。
整理下需求文档中的不足点，第二轮沟通的内容如下：
继续调整需求文档，优化以下几个点：
1.简化下设计。不需要多个tab，最好一进入就能看到一个美食墙。不需要筛选、导入导出、餐厅详情页、重复提醒这种分支功能，只需要能看到美食墙，添加打卡记录即可。
2.添加餐厅时，需要调用小程序现有的POI接口，方便用户选择地点；添加餐厅时，只需要选择餐厅、选择等级，其他的可以不要。SABCD档的描述更直白点，S-神中神，D-踩雷，中间几个你补充下
3.需要有登录、创建用户的逻辑，每个用户的美食墙都会被保存起来。
4.每个等级的标志，可以考虑做成统一的设计风格。你把这块完善下，然后把所有需要设计的内容整理出提示词来，我会使用这个提示词来生成图标
调整后，重复上述流程，直到你觉得这份文档已经还算清晰的表达了自己想要的。这里我个人的习惯是，不用太过较真，只要没有方向错误（比如把页面处理成弹层），就可以先做一做看一看。
编码实现
进入编码环节。这里的要点是：
注意可维护性。尤其不要写出一个几千行代码的长文件。
提供必要的工具以优化AI表现。我最常用的是用playwright让AI能自己打开浏览器测试、用context7让AI能RAG最新的文档。
先可用，再优化。先把大的流程跑通，再按照设计风格，调试视觉效果。
这里过程就不赘述了。这个case测试，对于常用的开发框架，gpt-5-high还是不如Claudecode的，同样的编码任务，claudecode自动选择了合适的方案并一次跑通主流程；但gpt-5-high还是稍微调试了下。调试也没什么复杂的，将页面上的报错复制粘贴给AI即可。
按照AI给出的调整方式调整两轮后，可以看到主流程就跑通了，只是页面非常丑陋，这时就可以进入调试设计环节了。此时也可以让AI更新下之前的需求文档，并出下下个阶段的方案。
现在更新下需求文档，更新下进展、项目现状。下个阶段的重点是优化视觉风格，在需求文档里出几版方案，包括完整的设计素材包，以及设计风格。
调试设计
调试环节需要大量抽卡，设计元素。可以直接用使用nanobanana/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调试效果的流程，直到效果满意。
再做亿点点调试，直到出满意的效果。这一步要有耐心，需要不断抽卡，找到符合自己感觉的产品。下面这版是调试几轮之后的产物，明显会比前两轮更精致一点。
以上，就是本篇的全部过程了。
正规的股票杠杆公司,配资点评网,富鑫中证配资提示：文章来自网络，不代表本站观点。
