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

Ne0inhk

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

文章目录

概要

在 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. 提供完整的部署文档和使用说明，确保系统可独立部署和维护
在这里插入图片描述

Read more

Python 爬虫项目实战（一）：爬取某云热歌榜歌曲

Python 爬虫项目实战（一）：爬取某云热歌榜歌曲

前言 网络爬虫（Web Crawler），也称为网页蜘蛛（Web Spider）或网页机器人（Web Bot），是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓取等。 爬虫的基本原理 1. 种子 URL：爬虫从一个或多个种子 URL 开始，这些 URL 是起点。 2. 发送请求：爬虫向这些种子 URL 发送 HTTP 请求，通常是 GET 请求。 3. 获取响应：服务器返回网页的 HTML 内容作为响应。 4. 解析内容：爬虫解析 HTML 内容，提取所需的数据（如文本、链接、图片等）。 5. 提取链接：

By Ne0inhk
【Python】基础语法入门（二）

【Python】基础语法入门（二）

前言 在上一篇基础语法（一）中，我们搭建了变量、运算符、输入输出等“编程地基”，但程序还是只能按固定顺序“从头到尾”执行。在这一篇中，我们将聚焦Python的核心逻辑控制，条件语句和循环语句，以帮你解锁“根据情况做选择”和“重复执行某项任务”的关键能力，让程序真正具备“解决实际问题”的灵活度！ 一、程序的3种核心执行结构 所有编程场景的执行逻辑，都离不开3种基础结构： * 顺序结构：程序从上到下依次执行（基础语法一已掌握）。 * 选择结构（条件语句）：程序按条件判断，走不同的执行分支（比如“成绩≥60为及格，否则为不及格”。 * 循环结构（循环语句）：程序重复执行某段代码，直到满足结束条件（比如“打印1-100所有数字”）。 二、条件语句 条件语句的核心是“分支逻辑”，程序会根据条件的“真（True）

By Ne0inhk
2026最新Python+AI入门指南：从零基础到实战落地，避开90%新手坑

2026最新Python+AI入门指南：从零基础到实战落地，避开90%新手坑

🎁个人主页：User_芊芊君子 🎉欢迎大家点赞👍评论📝收藏⭐文章 🔍系列专栏：AI 【前言】 哈喽，各位想入门AI的小伙伴！随着生成式AI、大模型应用的爆发，Python+AI已成为最热门的技术组合，无论应届生求职、职场人转型还是兴趣探索，掌握这门技能都能打开新赛道。但很多新手都会陷入“先学Python还是先学AI”“数学不好能不能学”“学完不会实战”的困境。 本文结合2026年AI技术趋势，用「知识点+核心代码+流程图+表格」的形式，从零基础打通Python+AI入门全链路，聚焦热门易上手方向，全程干货，新手可直接跟着练，老司机可查漏补缺～ 一、为什么2026年入门AI，首选Python？ 很多新手会问：“学AI一定要用Python吗？Java、C++不行吗？” 答案是：不是不行，但Python是效率最高、门槛最低、生态最完善的选择，

By Ne0inhk
JAVA 泛型与通配符：从原理到实战应用

JAVA 泛型与通配符：从原理到实战应用

JAVA 泛型与通配符：从原理到实战应用 1.1 本章学习目标与重点 💡 掌握泛型的核心概念与设计初衷，理解泛型的编译期检查机制。 💡 熟练使用泛型类、泛型接口和泛型方法，解决数据类型安全问题。 💡 理解通配符（?）、上界通配符（? extends T）和下界通配符（? super T）的使用场景。 ⚠️ 本章重点是 泛型的擦除机制 和 通配符的灵活运用，这是提升代码通用性和安全性的关键。 1.2 泛型的核心概念与设计初衷 1.2.1 为什么需要泛型 在没有泛型的 JDK 5 之前，集合类只能存储 Object 类型的对象。获取元素时需要强制类型转换，这会带来两个严重问题： 1. 类型不安全：可以向集合中添加任意类型的对象，运行时可能抛出 ClassCastException。 2. 代码臃肿：频繁的强制类型转换会让代码可读性和维护性变差。 💡 泛型的出现就是为了解决这些问题，它的核心思想是

By Ne0inhk