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