从灵感到 MVP：如何用AI半天做出有设计感的小程序

十大品牌 2025年09月24日 05:56 1 aa

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

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

定位场景

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

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

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

对齐需求

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

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

我的第一轮指令如下：

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

平台：微信小程序

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

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

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

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

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

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

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