手搓了一个 AI 技能，产品经理看完沉默了

“这个需求很简单，你先出个 Demo 看看效果，下班前能给我吗？”

曾经，听到这句话我的血压就会飙升。但现在，我只会微微一笑，打开我的 IDE，敲下一行命令，然后起身去倒杯咖啡。

等我端着咖啡回来，一个完整的、可交互的 App 原型已经跑在浏览器里了。

这不是魔法，这是我给 Gemini-3-Pro 装上的“外挂”——一个我自己写的 AI Skill：prototype-demo。

为什么我要手搓这个 Skill？

作为前端，我们经常陷入一个怪圈：

1. 产品经理（PM）想要一个“简单的 Demo”来验证想法。
2. 我们觉得既然是 Demo，就随便写写吧。
3. 结果 PM 看了说：“这里能不能点？那里能不能动？样式能不能再好看点？”
4. 于是我们被迫引入框架、配置 Webpack/Vite、找组件库、调样式……
5. 最后，“简单的 Demo”变成了“两天的工作量”。

痛点在于：我们用“生产级的工具”去解决“原型级的问题”，这本身就是一种浪费。

我需要的不是一个完美的工程，而是一个**“能跑、能看、能改”**的 HTML 文件集合。

它的威力有多大？

这个 prototype-demo Skill 的核心逻辑非常简单粗暴：拒绝构建，拒绝复杂依赖，一把梭。

它能帮我通过一句话的 Prompt，自动完成以下所有工作：

1. 自动生成 PRD（产品需求文档）：你只说“我要个喝水 App”，它自动帮你补全“用户画像、功能模块、页面流程”。
2. 自动搭建项目结构：文件夹、HTML、JS 目录全部建好。
3. 自动生成手机外壳预览：它会生成一个主页，里面放满了手机样式的 iframe，让你像在看真机一样预览所有页面。
4. 自动写代码：
   • Vue 2 (CDN/Local)：无需编译，直接在 HTML 里写逻辑。
   • Tailwind CSS (CDN)：无需手写 CSS，样式类名一把梭。
   • FontAwesome：图标随便用。

以前我需要： npm create vite -> npm install -> 配置路由 -> 写组件 -> 调样式 -> 3 小时过去了。

现在我只需要： 告诉 AI “帮我做一个冥想 App 原型”，然后看着文件一个个蹦出来 -> 3 分钟搞定。

实战一：蹲个坑的时间，做个“拉屎”App

为了测试它的极限，我给 AI 抛出了一个略显“有味道”的需求：“做一个关注肠道健康的记录 App，名字叫‘一起拉屎’。”

PM 当时看我的眼神是复杂的，他可能觉得我疯了，或者觉得这个项目光 UI 设计就要扯皮半个月——毕竟，怎么把“屎”设计得优雅，是个世界级难题。

但我转头就唤醒了 prototype-demo。

AI 迅速生成了 PRD，甚至贴心地把用户画像定义为“不仅关心拉得顺不顺，还想通过便便分析健康的当代养生青年”。

3 分钟后，浏览器里跑起来了：

• UI 设计：它居然用了一套温暖的卡其色调（你懂的），不仅不恶心，甚至还有点……高级感？
• 功能完备：布里斯托大便分类法（Bristol Stool Scale）直接内置，点击选项就能记录形状、颜色、分量。
• 数据分析：首页甚至还有个周报图表，告诉你这周的肠道“业绩”如何。

当我把这个 Demo 甩给 PM 时，他正在去厕所的路上。回来后他告诉我：“我在厕所试用了，体验过于真实，以至于我忘记了这是个 Demo。”

微信公众号标题：拉屎的时间 AI 就完成设计了，UI 设计&前端工程师危？！

🔗 围观神作：一起拉屎 App

实战二：打工人的续命急救包——微运动

还没等 PM 从“一起拉屎”的震惊中缓过来，我又给他看了一个新活儿。

痛点很直接：“作为一个牛马，越优秀身体越脆弱。我不想要八块腹肌，我只想续命。”

于是，“微运动” 诞生了。

这一次，AI 的表现简直像个资深理疗师：

1. 场景化设计：它没有设计复杂的健身房场景，而是全是“办公室椅子上能做的动作”——转脖子、伸懒腰、抖腿（误）。
2. 碎片化执行：倒计时器、动作指引、打卡记录，全部在一个 HTML 页面里闭环。

PM 看着手机屏幕上那个正在教他“颈部侧拉伸”的火柴人，默默放下了手里的冰美式，跟着做了一组。

他说：“这个 Skill 最可怕的地方不在于快，而在于它仿佛读懂了打工人的灵魂。”

微信公众号标题：作为一个牛马，越优秀身体越脆弱，因此我让 Gemini3 帮我设计了一个微运动 App，不是想要八块腹肌，仅仅是给自己续命

🔗 体验续命：微运动 App

这种“降维打击”意味着什么？

这件事让我意识到，AI 时代的“生产力”不仅仅是写代码变快了，更是“交付标准”的改变。

以前，我们交付的是“代码”；现在，我们可以交付“能力”。

通过编写 Custom Skill，我把自己的 “方法论”（比如：原型就该用无构建的 Vue + Tailwind）封装成了 AI 的 “本能” 。

• 我不再需要重复教 AI “不要用 React，太重了”、“用 Tailwind，别写 CSS 文件”。
• 这些规则已经变成了它身体的一部分。

结语

不要被 AI 取代，而是成为那个 “定义 AI 行为” 的人。

如果你也厌倦了重复的配置和无休止的“微调”，不妨试着给你的 AI 捏一个专属 Skill。你会发现，当你把重复的劳动交给规则，剩下的才是编程真正的乐趣——创造。

毕竟，谁不想在 PM 还在整理需求文档的时候，就已经把 App 甩在他脸上呢？😎

彩蛋

如果你想要要这个技能的话，关注我，发送消息 "原型技能包" ，免费获取