如何快速做出好看的 UI 原型？
先用 Gemini 批量找方向，再用 `frontend-design` 和 `impeccable` 这类 skills 把原型收口到能开发。
先说结论：想又快又好看，最稳的流程不是“一次生成成品”，而是 批量找方向 → 选 1 个 → 扩关键页面 → 用 skills 收口。
为什么很多人用 AI 做原型，总感觉“不对劲”
常见原因不是模型不够强，而是你一开始就把目标下得太大了：
- 一上来就要它做完整 App
- 没先选视觉方向
- 没给用户、场景和气质
- 没有一轮“诊断和打磨”
最后就很容易变成：能看，但不想发。
最省心的 4 步
1. 先只做“方向”，不要先做“全套页面”
先给 AI 这几个信息：
- 产品一句话定位
- 目标用户是谁
- 1-2 个核心功能
- 你想要的感觉：极简、温暖、效率感、专业、年轻、克制……
然后让它一次给你 10 个方向，而不是 10 个完整页面。
如果你偏 Gemini，这一步通常会很好用，因为它很适合做批量风格探索。
可以直接这样说：
你现在是产品设计师和前端设计师。
请不要直接生成完整应用，
先为这个产品给我 10 套不同的视觉方向。
每套都要包含：
1. 适合的用户气质
2. 首页布局思路
3. 配色与字体关键词
4. 为什么这样设计
我的产品是：
[一句话介绍你的产品]2. 选 1 个方向，再扩成 3 个关键页面
不要贪多。大多数项目先做这 3 个页面就够了：
- 首页 / 核心入口页
- 主要功能页
- 结果页 / 个人页 / 设置页
这一步的目标不是“把所有页面都生成完”，而是先确认这个产品长什么样、气质对不对。
3. 用 skills 把“能看”收口到“能开发”
如果你已经有一个大致方向，接下来就别继续纯靠聊天硬拉了，可以直接上 skills。
路线 A：先用 frontend-design 起稿
npx skills add https://github.com/anthropics/skills --skill frontend-design它更适合：
- 从一句话需求快速拉出比较像样的高保真原型
- 把界面从“普通 AI 图”拉到“更像真实产品”
- 帮你起一个有结构的前端原型
路线 B：再用 impeccable 打磨
npx skills add pbakaus/impeccable -y这套我更推荐放在第二步用，因为它擅长的是：
- 找出哪里不协调
- 统一风格
- 优化间距、配色、动效和移动端体验
最常用的几个命令一般就够了：
/critique
/colorize
/adapt
/polish更详细可以看：
4. 最后才进入真实开发
顺序建议是：
- 先出 10 个方向
- 选 1 个继续
- 补齐 3 个关键页面
- 用 skills 做一轮打磨
- 再开始进真实项目
这样你会少掉很多“边开发边换风格”的返工。
最容易踩的 4 个坑
1. 一上来就让 AI 做 12 个页面
结果通常是每个页面都像同一套模板的变体，看起来很多，但没有一个真的精致。
2. 只说“给我做个高级 UI”
这种需求太空了。AI 不知道你的“高级”到底是金融感、苹果感、Notion 感，还是小红书感。
3. 完全不做诊断和收口
很多原型不是第一稿不行，而是你少了最后那一轮统一风格和细节打磨。
4. 只追求炫，不考虑后续开发
如果组件层级太乱、页面风格过多、动画过重，后面开发和维护都会很痛。
我更推荐的实际工作流
- 找方向：Gemini 批量出 10 个风格
- 起原型：
frontend-design - 做打磨：
impeccable - 进项目：再交给你主力的 AI 编程工具继续实现
这套方式最大的好处是：既快，也不容易一开始就把界面做得很“AI 味”。