如何快速产出高质量的，好看的 UI 原型？ Gemini 版本
一篇短教程：用 Gemini Prompt 批量出原型
结论：先用“20 选 1”的 Prompt 批量找方向，再用 frontend-design skill 让 AI 稳定输出可开发的高保真 HTML 原型。
方法 1：Gemini 批量出稿
- 把你的 App 一句话定位 + 目标用户 + 关键功能写清楚。
- 使用 Gemini 3 Pro 模型（其他模型效果真的没有 Gemini 3 Pro 好）
- 使用你准备好的“原型图 Prompt”，要求一次产出 20 套方案。（也可以先到这个网站上看一下不同的 UI Prompt https://designprompts.dev/）
- 让 AI 基于中选方案补齐全量页面，并输出可开发 HTML。
可直接复制的 prompt
现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
## 1、用户体验分析
先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
## 2、产品界面规划
作为产品经理，定义关键界面，确保信息架构合理。
## 3、高保真 UI 设计
作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
## 4、HTML 原型实现
使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
## 拆分代码文件，保持结构清晰：
- 每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
## 真实感增强：
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。方法 2：用 frontend-design Skills
- 安装 skill：
npx skills add https://github.com/anthropics/skills --skill frontend-design-
在 AI 对话里直接说：
- “使用
frontend-designskill，给我的 App 【xxx】 生成原型图， 至少 5 个风格，
- “使用
-
如果要更多 Skill 来源，可先看 skills.sh