AI 时代的超级设计师指南

如何开始
Vibe Coding

从想法到落地,实现从 0 到 1 的跨越。

想法 原型 反馈 资产

01 / What

Vibe Coding 是一种新的创作姿势。

它的核心不是“写代码”,而是把设计意图、使用场景、交互流程和验收标准,用足够清楚的语言交给 AI。

Vibe Coding 从想法、提示词、AI 协作到可运行原型的流程图示

02 / Why

为什么要学

Vibe Coding 让设计团队在进入研发排期之前,就能先看到体验是否成立。

01

更快验证想法

把静态设计变成可点击、可输入、可演示的原型,让讨论基于真实体验。

02

更准确表达需求

用户、场景、目标、输入、输出、边界都会被迫讲清楚,减少模糊沟通。

03

更低成本试错

小工具、小流程、小页面可以先快速验证,不必一开始占用正式研发资源。

03 / Cases

从“小”玩到“大”

第一批项目要足够小、边界清晰、能独立展示。目的不是炫技,而是完整跑过“想法到原型”的闭环。

04 / Tools

选择称手的工具

对话式

适合想清楚需求、拆解问题、生成文案和推演方案。

ChatGPT
Claude
Gemini

云端部署平台

适合快速做页面、活动页、交互原型和小型应用。

AI Studio
Lovable
v0
Bolt

AI IDE

适合在项目中边写边改,理解代码、局部修改、重构和调试。

Cursor
Windsurf
Trae
Qoder

CLI Agent

适合在终端中执行工程任务,读写文件、运行命令、修 bug 和跑测试。

Claude Code
Codex CLI
Gemini CLI
OpenCode

Agent 工作台

适合委派完整任务,进行规划、执行、验证、审查和交付。

Codex
WorkBuddy
Antigravity

Codex Focus

把 Codex 当成一位能动手的设计工程搭档。

学会给它上下文、验收标准和反馈。让它帮你读项目、改页面、跑预览、修问题,再把结果交给你判断。

计划模式:先拆解再动手 分支管理:避免上下文污染及多线程并行 网页标注:精确标出问题

05 / Tips

四个小技巧,一力降十会

Tip 01 / 提问模板

第一份提示词,产品说明书

产品说明书简易模板

1. 我想做什么

我想开发一个:

【填写:小工具 / 网页应用 / 插件 / 脚本 / 小产品】

它的核心功能是:

【用一句话说明这个工具要解决什么问题】

2. 给谁用

目标用户是:

【填写:我自己 / 设计师 / 产品经理 / 运营 / 普通用户等】

他们使用这个工具的场景是:

【填写:什么时候会用、为了解决什么问题】

3. 核心流程

用户使用流程如下:

  1. 用户进入页面后看到:【填写】
  2. 用户输入 / 上传:【填写】
  3. 用户点击:【填写按钮或操作】
  4. 系统输出:【填写结果形式】
  5. 用户可以继续:【填写复制、下载、编辑、重新生成等】

4. 功能要求

这个工具需要包含以下功能:

  1. 【功能一:说明做什么】
  2. 【功能二:说明做什么】
  3. 【功能三:说明做什么】

暂时不需要做:

  1. 【可选功能一】
  2. 【可选功能二】

5. 界面要求

页面结构希望是:

【填写:例如左侧输入,右侧输出 / 单页表单 / 卡片列表 / 多步骤流程】

视觉风格希望是:

【填写:简洁、现代、深色模式、Notion 风、Linear 风、科技感等】

交互要求:

  • 操作尽量简单
  • 有 loading 状态
  • 有空状态
  • 有错误提示
  • 结果要方便复制 / 下载 / 编辑

6. 数据示例

用户输入示例:

【粘贴一段示例输入】

期望输出示例:

【粘贴一段期望输出】

7. 技术要求

希望使用:

【填写:React / Next.js / Vue / Python / Electron / 不确定,请 AI 推荐】

运行方式:

【填写:本地运行 / 网页部署 / Vercel / 桌面端】

是否需要后端:

【填写:不需要 / 需要 / 不确定】

是否需要数据库:

【填写:不需要 / 需要 / 不确定】

8. 验收标准

完成后需要满足:

  • 可以正常运行
  • 用户能完成核心流程
  • 输入异常时有提示
  • 输出结果符合预期
  • 代码结构清晰,方便我继续修改
  • 提供安装和运行说明

9. 请 AI 按这个方式执行

请先理解我的需求,并基于以上信息完成一个可运行的 MVP。

如果信息不完整,请做合理假设继续推进,不要停住。

请先实现核心功能,再考虑优化界面和扩展功能。

Tip 02 / MVP 原则

MVP 思维:从滑板到汽车

优先级驱动的渐进式实现

🛹

滑板

最小可行

🛴

滑板车

增加功能

🚲

自行车

更多能力

🏍️

摩托车

提速加力

🚗

汽车

完整产品

Tip 03 / Prompt 技巧

用结构化反馈,驱动稳定迭代

Tip 04

迭代技巧

一次只改一类问题

每轮只聚焦一个目标,比如布局、视觉层级、交互状态或移动端适配。

先功能,后视觉

先确认流程能跑通,再打磨样式、动效和细节,避免还没可用就开始装修。

善用开发者工具及 IDE

用浏览器开发者工具定位元素、查看尺寸和样式;用 IDE 让 AI 精准修改对应文件。

保留可回退版本

每次大改前保存当前版本,方向跑偏时及时回到上一版,而不是继续补救。

现在,就开启你的创作之旅