设计师的 Vibe Coding
面向设计师的 AI 编程方法、工具与实践参考。
1) 从一句描述开始
还没有设计稿时，用一段描述先把一条关键流程做成能点的原型。登录、真实数据、第三方服务先放一放，流程跑通了再决定接不接。
- 先想清楚要的是什么：只用来演示和讨论，还是之后要继续改、真的上线。后者要选代码能导出的工具。
- 拿同一个小任务在两三个工具里各做一遍，比一比好不好改、代码能不能拿走、要花多少钱。
- 演示的时候，哪些是假数据要先说清楚。
Lovable
一边看界面一边聊着改，代码能同步到 GitHub。真要上线，数据和权限还得自己配。
v0
已经在用 Next.js，或者打算部署到 Vercel，先试它。界面、数据、服务可以一步步接。
Bolt
在浏览器里写 JavaScript/Node.js 应用或 Expo 移动原型。后端要用 Python 或 PHP 的话，它不合适。
Replit
在浏览器里写应用、直接发布。每次改完要重新发布一次；数据想留住，得接数据库或存储服务。
页面生成 Prompt
贴进 Lovable、v0 或 Bolt，先拿到一个能点的原型。
给【目标用户】做一个【页面类型】。页面要有：【关键部分】。主要操作：【按钮或表单】。加载中、出错、空这三种状态必须处理。视觉风格跟着现有页面和组件走：【参考】。先把核心流程做到能试用，再告诉我哪些部分还是假数据。
2) 从 Figma 设计稿开始
已经有设计稿时，直接从稿子出发做成能点的原型。用来检查交互，也可以拿去找用户试。
- 组件和视觉规范照原来的。生成完和设计稿对一遍，看哪里跑偏了。
- 主要任务、空状态、出错之后怎么办，这三样都要有。
- 只验证页面跳转，用 Figma 自带的原型就够；要真实输入和逻辑，再用 Figma Make。
Figma Make
把 Figma 的 Frame 给它当参考，聊几句就生成能点的原型。
Figma Prototyping Guide
交给 Figma Make 或 Maze 之前，先在 Figma 里把页面连好、流程理顺、分享设好。
Figma Make 官方说明
先看「已知限制」一节，再看 Make 的预览怎么转回设计图层、怎么改代码、怎么发布。
Maze
把原型发给用户试，它帮你汇总谁完成了、卡在哪、说了什么。
Maze Prototype Testing
Maze 的原型测试指南：测试任务怎么写、反馈怎么收才好整理。
Figma 原型生成 Prompt
配合 Figma Make 用，生成的原型会把关键状态都带上，方便测试。
这是我的 Figma 设计稿：【功能】。请生成交互原型，包括：1）主流程；2）出错状态；3）空状态。所有按钮都要能点。实现不了的设计元素标出来。
3) 在代码里继续完善
原型要继续改、要接真实数据、要长期维护时，把项目放进代码编辑器，让 AI 一次做一个小功能。你负责说清要什么、看它改了什么、在页面上亲自点一遍。
- 先让它写计划，你看过再动手。一次只做一个说得清的小任务。
- 把相关设计、代码约定和期望的行为都给它；它改了什么你要看，关键操作在跑起来的页面上亲自点一遍。
- 工具选一个用熟就行。改乱了就回到上一个能用的版本，别让它在错的基础上一直修，怎么存版本见第 5 步。
- 要存数据或做登录时，先想清楚哪些数据只能本人看，把权限规则配好、用另一个账号试着读一下，确认读不到再上线。
Claude Code
在终端或桌面应用里读整个项目，跨文件改、调 bug、重构都行。适合先审计划再放手让它做。
Codex
读懂项目再写功能，还会自己跑检查、给你看改动。桌面、命令行、编辑器、云端都能用。
Cursor
基于 VS Code 的 AI 编辑器。边看代码和页面边改，选中一段问它在干什么，也能让它跨文件改。
GitHub Copilot
装在 VS Code 等编辑器里补全和对话，也能把任务交给云端 Agent，做完直接开一个 PR 等你看。
Supabase
开源的后端服务，数据库、用户登录、文件存储都有。Lovable、Bolt 等生成工具都能直接连它，原型要存真实数据时最常用。
Firebase
Google 的后端服务，数据库、登录、文件存储和托管都有，做移动端 App 顺手。上线前写好安全规则，别留着测试模式的「谁都能读写」。
Supabase 行级权限（RLS）
AI 生成的应用最常见的漏洞：表没开权限，别人能读到所有人的数据。照这篇把「谁能看、谁能改」配好再上线。
功能实现 Prompt
给 Claude Code、Codex 或 Cursor 用。先拿到计划，确认后再改代码。
我想在这个项目里做【功能】。这些现有逻辑不能动：【描述】。先读相关文件，写出你的实现计划和要改的文件，等我确认再动手。做完后说明关键改动，并验证：正常操作、出错处理、受影响的老功能。
更多编辑器
VS Code
免费的代码编辑器。本身不带 AI，装上 Copilot 或 Cline 扩展后就能让 AI 改代码。
Cline
VS Code 里的开源 Agent 扩展。每一步改动和要跑的命令都先给你看，你批准了才执行。
Antigravity
Google 的 Agent 编辑器，能同时操作编辑器、终端和浏览器，适合让 AI 自己打开页面检查结果。方案和额度以官网为准。
Devin Desktop
原 Windsurf。在编辑器里同时管理本地和云端的编码 Agent，也能让它帮你审代码。
4) 打磨界面，去掉 AI 味
AI 生成的界面常带着一套默认审美：同色系渐变、图标套圆角方块、层层嵌套的卡片。先确认任务和交互没问题，再把你的设计规范写给 AI，用成熟的组件替换临时拼出来的样式。
- 按顺序查：任务和信息结构 → 交互和出错状态 → 无障碍 → 最后才调视觉。
- 把颜色、字体、间距和组件用法写进项目里的一份规范文件（比如 DESIGN.md），每次让 AI 先读它。
- 动效组件一页放一两个就够，放之前先在手机上看加载速度。
shadcn/ui
可以直接复制进项目的 React 组件，样式用 Tailwind。很多 AI 编码工具默认就用它，先学会改它的主题变量，界面就能统一成你的风格。
界面审查 Prompt
让 AI 按你的规范检查页面，先列问题，确认后再改。
先读项目里的 DESIGN.md。按顺序检查这个页面：1）任务和信息层级是否清楚；2）加载、空、出错状态；3）对比度、键盘操作、图片替代文字；4）最后才是视觉：颜色、字号、间距是否符合规范，有没有渐变堆叠、装饰性图标、多层卡片这类默认样式。每条写出问题、位置和改法，等我确认再改。
5) 保存版本、发布上线
能跑之后，先把版本存好，再发一个预览地址给别人试，最后才绑定域名上线。每次确认可用就存一次，AI 改乱了随时能退回去。
- 每完成一个能验证的小改动就提交一次，提交说明写清改了什么。大改之前先开分支。
- 密钥和密码放在部署平台的环境变量里，别写进代码、别提交到仓库。
- 先用预览地址在手机和电脑上从头点一遍：链接、表单、图片、分享预览，都没问题再绑定域名。
Git
管版本的工具。每次确认可用的改动存成一次提交，出问题能回到任何一个验证过的版本。
GitHub
放代码仓库的地方，能看每次改了什么、和 AI 或同事对改动。Git 管版本，GitHub 放仓库，两者不是一回事。
GitHub Desktop
不想记命令的话用它：看改动、写提交说明、开分支、推送，都在图形界面里点。
Vercel
连上 GitHub 仓库后，每次推送自动部署，还会给每个分支一个预览地址。Next.js 项目最省事。
GitHub Pages
纯静态网站（比如作品集）直接从仓库发布，免费。需要服务端功能时换别的平台。
PageSpeed Insights
输入网址，看手机和电脑上加载快不快、哪些图片和脚本拖慢了页面。上线前测一次。
WAVE
输入网址，标出对比度不够、图片缺替代文字、表单没标签这类无障碍问题。
网站发布 Prompt
让 AI 帮你准备发布，但每一步改动都先给你看。
帮我把这个项目发布到【Vercel / Netlify / GitHub Pages】。先检查构建命令、输出目录和需要的环境变量，列出你要改的文件和原因，等我确认再改。不要把任何密钥写进代码。发布后给我一份检查清单：手机上打开、所有链接、表单、图片、分享预览。
6) 进阶：连接应用与自动化
同一件事每周都要手动做好几次，再考虑自动化。先用固定步骤把最简单的路径跑通，需要临场判断的地方再加 AI。
- 每一步要什么数据、会改什么东西，写清楚。
- 流程简单、步骤固定，用普通自动化就够；情况多变、要判断，再上 Agent。
- 别重复写入。失败了要能停、能重试、能转给人处理。
n8n
可视化连数据、连服务，能自己部署。要拿它给客户做托管服务，先看许可协议允不允许。
Zapier
连常用的 SaaS 应用，步骤固定的重复活最合适。
Make
用节点把跨应用的流程画出来，条件和分支也能画。
Dify
可视化搭 AI 应用、知识库问答和 Agent 流程。要做多租户服务或换掉它的品牌，先看许可协议。
LangChain
用代码写 Agent 逻辑和工具调用。需要控制得很细时才用它。
自动化规划 Prompt
给 Claude 或 n8n 的 AI 节点用。把每一步的范围、风险和要不要人批定下来。
我想把这个流程自动化：【触发条件和目标】。涉及的步骤：【列表】。每一步写清楚：输入什么、输出什么、什么情况算失败、要不要人批。输出成分步计划，每步标风险等级。
快速验证一个想法
想先看到能点的东西，拿去讨论或者找人试。
让 Figma 稿能点、找用户测
已经有设计稿，想验证交互或做可用性测试。
做成能长期维护的项目
比如作品集网站或团队小工具：之后还要继续改，还要真的上线。