一、为什么写这篇文章
对大多数产品经理、设计师、独立开发者来说，真正的痛点不是写代码，而是"怎样在几小时内把脑子里模糊的想法变成可点击、可演示、可给投资人看的 UI 原型"。
过去：
- 需求 → 设计系统（资深设计师 2 天）
- 线框图（UX 1 天） → 高保真（UI 2 天） → 前端 Demo（3 天）
现在：
- 需求 → AI 设计系统（10 分钟） → AI 线框图（30 分钟） → AI 高保真（60 分钟）
- 单人、三小时、零设计软件、零安装、浏览器里跑完。
本文把这套「Prompt 驱动工作流」完整开源，全部 Prompt 可直接复制即用，并给出踩坑与迭代技巧，确保你第一次就能跑出高颜值结果。
二、总览：3 步 6 角色 1 张画布
| 步骤 | 你扮演的角色 | AI 扮演的角色 | 输入 | 输出 | 耗时 |
|---|---|---|---|---|---|
| ① 设计系统 | 产品总监 | 顶级 UI 架构师 | 一句话需求+主色 | Markdown 设计规范 | 10 min |
| ② 低保真 | 技术监理 | 前端架构师 | ① | 单文件 HTML 线框图 | 30 min |
| ③ 高保真 | 艺术总监 | UI 视觉设计师 | ②+参考图 | 可点击高保真原型 | 60 min |
一张画布：375×812 px 手机画板，CSS Grid 横向排 3-4 个界面，浏览器一开就是「多页面原型墙」。
三、Step 1：10 分钟生成「专业级设计系统」
3.1 核心思路
把「高级设计师脑袋里的默认配置」变成「AI 可解析的 YAML」： 颜色系统、字体系统、间距、圆角、阴影、组件 Props、示例页面蓝图，一次给全。 关键：让 AI「自行推理」而不是「逐项提问」。
3.2 万能 Prompt（直接复制）
# 角色与目标
你是顶级设计系统架构师 AI。基于用户提供的「极简需求」和「核心色系」，生成一份对后续 AI 编程极度友好的设计系统文档，成为 Single Source of Truth。
## 用户输入
1. 产品需求：「播客星球（Podcast Planet）」中文播客发现与收听 APP，目标 18-35 岁知识爱好者，气质简洁+专业+有温度，核心功能个性订阅/智能推荐/离线下载/倍速播放。
2. 核心色系：
--primary-100:#1E88E5; --primary-200:#1565C0; --primary-300:#0D47A1;
--accent-100:#FF7043; --accent-200:#FF8A65;
--text-100:#212121; --text-200:#757575;
--bg-100:#FAFAFA; --bg-200:#F5F5F5; --bg-300:#E0E0E0;
## 任务流程
1. 分析需求：提炼关键词、用户情绪、视觉隐喻。
2. 生成 Design Tokens：
- 颜色：主色阶 100-900、中性灰 50-900、语义色（成功/错误/警告/信息）。
- 字体：选两套免费商用字体（标题/正文），建立 10 级 Type Scale。
- 间距：8 pt 网格，4-128 px 共 12 级。
- 效果：4 组圆角、4 组阴影、模糊值。
3. 主动识别组件：Button/Input/Card/Modal/TabBar/PlayerBar...
每个组件用 YAML 定义 Props 与样式映射。
4. 输出示例页面蓝图：登录页或主发现页，用组件树表达。
## 输出格式
严格按以下 Markdown 结构，所有技术规范用 YAML 代码块包裹。
# 设计系统：Podcast Planet Design System
## 1 Design Tokens
### 1.1 Colors
yaml
primary:
100: '#1E88E5'
200: '#1565C0'
...
3.3 运行技巧
- 模型：DeepSeek-Coder / GPT-4o / Claude-3.5 均可， temperature 0.2 保证稳定。
- 若公司已有品牌色，直接替换「核心色系」即可；AI 会自动补齐渐变色、悬停色。
- 生成后另存为
design-system.md，Step2 会让 AI 直接读这份文件。
四、Step 2：30 分钟出「可交互低保真原型」
4.1 技术选型
- HTML + Tailwind CDN（零安装）
- CSS 变量承接设计系统（保证 100% 一致性）
- FontAwesome + Unsplash 占位图（图标/图片不操心）
- 单文件交付，浏览器双击打开即可预览。
4.2 关键 Prompt（节选）
# 角色与目标
你是顶级前端架构师 AI，严格遵循上一步的 design-system.md，生成一份「低保真黑白线框」多页面 HTML 原型。
## 技术规格
1. 单文件 HTML，含 <style> 与 <body>。
2. 在 :root 里把 design-system.md 所有 Tokens 转为 CSS 变量，例如
--color-primary-100: #1E88E5;
所有样式必须 var() 引用，禁止硬编码。
3. 画布尺寸 375×812 px，1 px #ccc 边框，iOS 状态栏（9:41），底部 TabBar 固定。
4. 页面列表：① 启动页 ② 登录页 ③ 发现页 ④ 播放页 ⑤ 订阅页 ⑥ 下载管理。
5. 布局：CSS Grid 横向 3 列，纵向下排；内容区独立滚动。
6. 交互：按钮 hover/active 缩放 98%，过渡 150 ms；Input focus 边框高亮。
7. 图标：FontAwesome；图片：unsplash random 400x300?technology,mic。
## 输出
只返回完整 HTML，不解释。4.3 运行技巧
- 把 Step1 的
design-system.md全文粘进 Prompt 的「上下文」窗口，AI 会自行提取变量。 - 若页面多，可让 AI 分两次输出，再手动合并。
- 打开浏览器 → F12 → 手机模式 → 截图就是「黑白线框墙」。
五、Step 3：60 分钟升级「高保真视觉」
5.1 找参考
- Dribbble 搜关键词「podcast app」
- Mobbin 筛选 iOS 最新上线
- Aura.build 可直接复制代码
截一张最符合「简洁+专业+有温度」气质的图即可，不需要多张。
5.2 视觉重构 Prompt
# 角色与目标
你是资深 UI 视觉设计师 AI。基于上一步的低保真 HTML，严格参考用户提供的「视觉参考图」，升级成高保真 UI，同时保留原有设计系统的配色与组件结构。
## 任务
1. 替换背景渐变、卡片材质、按钮高光、图标风格。
2. 加入玻璃拟态（Glassmorphism）或 3D 轻拟态，符合参考图质感。
3. 关键页加入抽象 SVG 插画（如音波、麦克风），SVG 内联到 HTML。
4. 输出全新单文件 HTML，CSS 变量名保持不变。
## 迭代机制
若一次不满意，可继续指令：
- 「主按钮改为 primary-100 并加 10% 暗色渐变」
- 「卡片阴影 Y 轴偏移减 2 px，透明度减 10%」
通常 2-3 轮即可商用级。5.3 微交互加分
- 使用
tailwindcss-animate加@keyframes实现： - 播放页音波动画 1.5 s 循环
- 底部 TabBar 切换 0.2 s 滑动指示器
- 一行 CDN 引入即可，无需打包。
六、常见问题与踩坑
| 问题 | 解决方案 |
|---|---|
| AI 输出的色值跑偏 | 在 Prompt 加「禁止修改 design-system.md 任何色值」 |
| 中文字体不生效 | 在 <head> 加 Google Fonts 思源黑体 link，并写 --font-family-base: 'Noto Sans SC', sans-serif; |
| 页面太多 AI 忘记组件 | 先让 AI 输出「组件库部分」→ 复制保存 → 再输出「页面部分」 |
| 高保真一轮效果丑 | 把参考图拆成 2-3 个局部（背景质感/按钮样式/图标风格），分多次指令 |
七、延伸：如何继续到「可上线代码」
- 复制高保真 HTML 到 v0.dev 或 Lovable，自动生成 React+Tailwind 项目。
- 用 CodeBuddy（腾讯 CLI）
codebuddy generate一键生成 CRUD 接口。 - 接入 Supabase 或 CloudBase，前后端合并，一天内 MVP 上线。
八、结论：单人即团队的时代已来
本文给出的不是「炫酷 Demo」，而是一条可被任意角色复制的工业化流水线：
- 不会设计？直接跑 Step1 拿规范。
- 不会前端？Step2 给你单文件 HTML。
- 不会视觉？Step3 让 AI 抄参考图。
创意 → 原型 → 上线，中间不再有人类瓶颈。 下一步，就缺你的 idea 了。打开 AI，跑一遍，三小时后把原型甩到群里，让他们惊呼。 祝你在 AI 时代，一个人就是一家数字公司。
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
