AI时代，做原型这件事，已经不可能再回到古法手搓了。

从ChatGPT那会儿大家开始用对话生成界面，到现在各种v0、Bolt、Lovable满地跑，AI辅助原型的方法论，确实丰富得吓人。

但你有没有发现一个特别拧巴的事。

方法太多，反而更乱。

你用AI画个按钮，它连带着把文案改了。

你说换个颜色，它把布局推倒重来。

你让它生成一个后台列表页，它给你整了个SaaS落地页，奶油底色，紫蓝渐变，三个feature卡片排排坐。

好看吗。第一次看还行。第十次你就想砸键盘。

更崩溃的是，AI生成的HTML原型，你没法细调。

间距差4px，你改不了。按钮颜色不对，你只能让AI重新roll，然后它又把别的东西改飞了。

那种感觉，像在跟一个手抖的设计师合作，改一个像素，重画一整屏。

所以我决定，自己写一个。

下面的提示词我没有加任何描述，全是一句话：生成会员系统的前台页面原型

提示词：生成AI比价的前台原型，需要符合淘宝的视觉规范，功能丰富详细

作为原型来讲，真的足够了，不需要画出无比精美的UI，这些是设计师干的活，你别把他的饭碗抢没了。但如果需要自己的功能，一定要在提示词中明确。

花了一天。准确说，从早到晚，一把梭。

改了多少版已经记不清了，反正Codex对话窗口被我撑爆了好几轮。烧了差不多1亿Token，就靠大家的三连给我回点血了，感谢各位老板。

开源地址在这里。

https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill

整个项目是一个Codex Skill，核心思路很简单。

不是让AI凭空画图，而是给它套上一套产品经理做原型的正经流程。

先想信息架构，再定设计规划，再过反AI味检查，最后才落Figma。每一步都有检查，每一步不过关就不准往下走。

名字叫产品原型生成 Skill，B端C端都行，后台App都行，直出Figma可编辑稿。

1. 它怎么干的

你一句话丢给它，比如做个会员后台，它会先帮你理清这个后台到底要哪些页面，每个页面上放什么。

理清楚之后，自动在 Figma 里给你画出来，画完还会自己检查一遍，把那些一看就是 AI 画的、花里胡哨的东西删掉。

最关键的是，你想改哪里就改哪里。按钮颜色不对，一句话，它只动那个按钮，不会把你已经调好的其他东西弄飞。

2. 怎么装，一分钟搞定

怎么用，2步。

准备清单。

• 任意一个Coding Agent。Codex可以，Cursor可以，Claude Code也可以。只要支持Skill加载就行。
• 一个Figma账号。免费版就行，注册一个。
• Figma MCP或Figma插件已配好。Cursor有plugin-figma-figma，装好OAuth就行。
• GitHub链接，https://github.com/pmlaowangba-lab/laowangba-pmprototype-skill

安装方式。

把GitHub链接丢给你的Agent，让它帮你装。原汤化原食。

装好之后，在任务里指定Skill就行。

使用产品原型生成Skill，生成一个会员系统前台页面原型

然后它就跑起来了。从IA推导到Design Plan到Anti-Slop到page.ui.yaml到Figma，全程自动化。

你只需要在关键节点确认一下，剩下的它自己跑。

觉得有用的话，记得回GitHub给我标个星，谢啦。

3. 开发背后的故事

来聊聊这个东西是怎么做出来的。

一开始我把所有反AI味的规则写进SKILL.md里，用自然语言描述。

结果AI每次读到的理解都不一样。有时候它觉得这个不算slop，有时候它自作主张放宽了标准。

最后我发现，你没法用自然语言约束AI的审美。你得用硬规则。

于是我把规则从建议改成了硬要求。

每一步做完必须先过检查，过了才能往下走。一共七道检查，任何一道卡住，整条流水线停下来等你确认。

那些防AI味的规则也不再是嘴上说说，是硬性要求。没过就是没过，回去改，改完再往下。

大家看第一版，流程还比较松散，步骤之间没有强制检查。

再看现在的版本，每一步都被卡得死死的，那些不要画成AI味的大空话，全变成了具体到不能再具体的规则，一条一条对着打勾，有一条不过就打回去重来。

视觉、结构、严谨度，完全不一样了。

另外就是，想要AI产出稳定的设计，得先给它稳定的token。

颜色、间距、字号、圆角，全部写死在DESIGN.md里，生成时只能从token表取值，不接受它自己发明。

这不是限制创意，是防止抽卡。

4. 最后

欢迎各位来玩，这还是v0.1版，希望多提建议，报bug。这个Skill我会持续迭代。

现在的版本，Figma执行那块还有一些生成质量不稳定的情况。复杂页面偶尔会丢region结构，需要手动patch。后续想把这部分的鲁棒性再提一提。

也欢迎大家在评论区支个招，一起优化。

它后面可以无缝嵌进产品经理做需求的完整流程。

PRD写完了，Skill自动推导IA，生成原型，落到Figma。

设计师打开Figma直接接手改，不用从零画。产品经理对着Figma跟开发对需求，不用再拿截图拼PPT。

毕竟，AI时代做原型，不该回到用AI画Axure那条路上去。

它应该更稳，更快，更可控。

而今天，你有了一个能帮你把这套流程跑起来的东西。

觉得有用的话，GitHub上标个星，转发给也在做产品的朋友。感谢各位老板。

更多文章关注公众号：老王霸AI Lab