Vibe Coding范式实战：用AI工具链（Stitch+Figma+ai studio+Trae）快速开发全栈APP

AI驱动的Vibe Coding开发范式实践本文介绍了一种基于AI技术的"氛围编程"工作流：设计阶段：使用Google Stitch通过自然语言生成响应式UI原型，导入Figma进行精细化调整开发阶段：AI Studio将设计稿转为可交互的React/TypeScript应用，Trae生成Supabase后端代码部署阶段：通过GitHub管理代码，Vercel实现自动化

m0_59012280

331人浏览 · 2026-02-23 17:13:03

m0_59012280 · 2026-02-23 17:13:03 发布

文章目录

概要

在 AI 技术深度渗透软件开发领域的当下，一种名为 “Vibe Coding”（氛围编程）的全新范式正在重塑开发者的工作方式。它的核心在于，开发者不再是逐行编写代码的 “码农”，而是通过自然语言描述意图、引导 AI 生成代码的 “创意引导者” 和 “结果验证者”，从而将精力聚焦于更高价值的产品设计和逻辑思考上。

本文提供一种 Vibe Coding 的工作模式：设计阶段以 Google Stitch 为起点，开发者通过文本或草图快速生成响应式 UI 设计与前端代码，再无缝导入 Figma 进行精细化视觉调整和原型设计，实现了从 “想法” 到 “高保真设计” 的极速转化。

在这里插入图片描述

开发阶段，前端开发依托 AI Studio，将设计稿一键转化为可交互的 React/TypeScript 应用；后端则通过 Trae 用自然语言描述业务逻辑，自动生成 API、数据库模型和服务端代码。

最后代码通过 GitHub 进行版本管理和迭代优化，最终借助 Vercel 等平台一键部署到云端，实现了从代码提交到生产环境上线的全流程自动化。

效果展示如下：
在这里插入图片描述

stitch制作设计稿

stitch地址：stitch google

在这里插入图片描述

模型选择：

选项	核心优势	适合场景
3 Flash	⚡ 速度快、成本低	快速出原型、多方案对比、赶进度
3 Pro	🎨 质量高、推理强	正式设计、精细打磨、对接开发
Redesign	🔄 迭代优化	已有设计改版、视觉风格调整
Ideate	💡 创意发散	初期头脑风暴、探索设计方向

在隐私权限声明的setting部分，可以查看用量配额：每天可进行400次常规设计生成，15次Redesign重设计操作。setting

在这里插入图片描述

提示词：

设计一个本地小众活动约伴APP
- 发布 / 报名本地小众活动（如城市徒步、手作体验、桌游局）
- 即时聊天匹配同好（基于兴趣标签、时间、地点）
- 活动现场签到 / 简单打卡（体感反馈：签到成功有动画 + 音效）
- 活动后短评 / 评分（轻量化输入，实时展示评分结果）
输出全部页面

输出结果如下：

在这里插入图片描述

- 活动发现流：主页采用充满活力的卡片式设计，支持按城市徒步、手作、桌游等分类筛选，直观展示活动热度。
- 活动详情页：提供沉浸式的活动介绍、地理位置微地图及已报名成员头像，底部设有醒目的“立即加入”按钮。
- 兴趣匹配与聊天：基于兴趣标签（如“咖啡控”、“徒步爱好者”）的即时匹配界面，方便用户快速找到志同道合的同好。
- 发布新活动：简洁直观的发布表单，支持上传图片、选择分类及设置地点，让发起活动变得轻松。
- 活动现场签到：专为现场设计的签到页面，大按钮交互配合签到成功的动效反馈，增强参与感。
- 评价与评分：轻量化的震动反馈评分系统，支持快速标签评价，实时展示活动的综合评分结果。

提示词：

app中的文字，全部使用简体中文，字体使用无版权的思源黑体

在这里插入图片描述

命令	功能说明
New Tab	在新浏览器标签页中打开预览，方便全屏查看设计效果
Show QR Code	生成预览二维码，手机扫码即可在移动设备上实时查看设计
Mobile	切换到移动端预览模式，模拟手机尺寸和交互
Tablet	切换到平板预览模式，模拟平板尺寸和布局
Desktop	切换到桌面端预览模式，模拟网页 / 桌面应用尺寸

更多快捷功能请自行探索。

figma 原型展示

设计稿导入到figma中进行交付展示，审核或者二次微调。
figma地址：figma地址

在这里插入图片描述

两个专门用于将 Stitch 生成的设计无缝导入 Figma的插件。

“HTML to Figma”，它的作用是将任意网页转换为可编辑的 Figma 设计；
“Stitch Code to Figma”，这是专门适配 Stitch 的插件，能够直接将 Stitch 输出的代码 / 设计一键导入 Figma，保留完整的布局、样式和组件结构，无需手动重建，从而简化从 AI 设计到 Figma 精细编辑的工作流。

HTML to Figma的效果更好一些，Stitch Code to Figma存在图片不显示的问题。

在这里插入图片描述
“Paste HTML code” 按钮支持直接粘贴代码片段，将 Stitch 等工具生成的 HTML 代码一键转换成 Figma 可编辑的设计帧，无需手动重建。

在这里插入图片描述

展示页如下：

在这里插入图片描述

ai studio 生成前端代码

stitch生成的设计稿是一个个相互独立的页面，没有交互功能。使用 ai studio 基于设计稿生成一个能够交互响应的前端APP，将独立页面组合起来整合成一个整体。步骤如下：

首先将页面导出到ai studio

在这里插入图片描述

导出的内容包括 PNG 图片和 HTML 文本文件，这些素材作为设计参考，让 AI 理解目标应用的界面布局、视觉风格和交互逻辑。AI 基于这些参考素材，生成一个可直接运行的应用，并且在生成的 HTML 中保留图片的热链接，确保资源可正常加载。

在这里插入图片描述

效果展示如下：生成可交互前端app页面，会有一些bug，比如某些按钮点击不跳转，页面元素缺失等问题，通过ai交互进行修改。

在这里插入图片描述

基于trae + Supabase生成后端代码和数据库

提示词如下：

分析这个前端代码，完成以下工作：
1.为前端代码，生成对应的后端代码，确保前后端联通，实现一个前后端一体的app
2.数据存储，使用supabase数据库

在这里插入图片描述

配置数据库： Supabase地址

Supabase 是基于 PostgreSQL 的开源后端即服务（BaaS）平台，提供数据库、认证、实时数据、存储、API、边缘函数、向量存储等全栈能力。

免费版：1GB 数据库、500MB 存储、2GB 带宽、10 万次 API 调用 / 月、基础认证。

在.env文件中配置数据库参数

SUPABASE_URL= Project Settings - > Data API -> Project URL -> URL
SUPABASE_SERVICE_ROLE_KEY= Project Settings - > API keys ->Secret keys
SUPABASE_ANON_KEY= Project Settings - > API keys -> Publishable key

新建数据库表：复制db-init.sql文件中的内容

在这里插入图片描述

将复制的sql语句粘贴到SQL Editor中，点击执行

在这里插入图片描述

执行结束后再Table Editor中可以看到新建的各类数据表

在这里插入图片描述
运行服务 npm run dev ，打开网址测试APP的各项功能，遇到问题时，可以和trae交互继续修改。经过多次测试和修改后，效果如下：

在这里插入图片描述

Github + vercel

首先将项目上传到github上，方便版本管理和后续迭代开发。

Vercel: vercel地址

Add New Project -> Import Git Repository -> install（给github安装vercel插件） -> import你上传的github项目

在这里插入图片描述
environment Variables 的参数填入你自己的数据库信息，其他信息默认就行：

在这里插入图片描述

点击部署后的网址即可跳转网站。

在这里插入图片描述
效果展示如下：

在这里插入图片描述

pc端后台管理系统设计

提示词如下：

基于当前项目架构和设计规范，开发一个独立的PC端后台管理系统功能模块。该模块需保持与现有APP一致的UI设计风格、色彩方案、交互模式和视觉语言。实现过程中必须遵循以下要求：
1. 创建独立的代码目录结构，确保与现有项目代码完全隔离，不得与现有业务逻辑代码混杂
2. 严格禁止对项目中任何现有代码文件进行修改或添加
3. 实现完整的后台管理功能，包括但不限于数据展示、用户管理、权限控制、数据统计与分析等核心功能模块
4. 确保新开发的后台管理系统在功能完整性、性能表现和用户体验方面达到生产级应用标准
5. 遵循项目现有的技术栈、代码规范和架构设计原则进行开发
6. 提供完整的部署文档和使用说明，确保系统可独立部署和维护

在这里插入图片描述