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

优质文章学习记录

— 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爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

🌈个人主页：易辰君-ZEEKLOG博客 🔥 系列专栏：https://blog.ZEEKLOG.net/2401_86688088/category_12797772.html 目录 前言 一、SessionPage （一）SessionPage 模块的基本功能 （二）基本使用 （三）常用方法 （四）页面元素定位和数据提取 （五）Cookie 和会话管理 （六）SessionPage 的优点和局限性 （七）SessionPage 和 DriverPage 的搭配使用 （八）SessionPage总结 二、WebPage （一）WebPage 的核心功能 （二）WebPage 的基本使用 （三）常用方法 （四）WebPage
深入剖析：按下 F5 后，浏览器前端究竟发生了什么？

深入剖析：按下 F5 后，浏览器前端究竟发生了什么？

文章目录 * 概述 * 一、关键前提：三种导航方式的本质区别 * 二、核心概念：强缓存 vs 协商缓存 * 1. 强缓存（Strong Caching） * 2. 协商缓存（Revalidation Caching） * 三、F5 刷新全景流程图 * 四、F5 刷新的完整生命周期详解 * 阶段一：主文档（HTML）的缓存验证与获取 * 阶段二：HTML 解析与渲染流水线（Critical Rendering Path） * 阶段三：子资源（CSS/JS/IMG）的缓存处理 * 五、对比总结：F5 与其他操作的本质差异 * 六、给前端开发者的实践建议 * 七、结语 概述 在前端开发中，
Flutter 组件 spry 适配鸿蒙 HarmonyOS 实战：轻量化 Web 框架，构建高性能端侧微服务与 Middleware 治理架构

Flutter 组件 spry 适配鸿蒙 HarmonyOS 实战：轻量化 Web 框架，构建高性能端侧微服务与 Middleware 治理架构

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 spry 适配鸿蒙 HarmonyOS 实战：轻量化 Web 框架，构建高性能端侧微服务与 Middleware 治理架构 前言 在鸿蒙（OpenHarmony）生态迈向全场景分布式协同、涉及设备端侧 API 暴露、轻量化资源服务镜像及严苛的跨端 RPC 通信背景下，如何实现一套既能保持极低内存足迹（Footprint）、又能提供类似后端（Node.js/Koa）般丝滑开发体验且具备全异步处理能力的“端侧 Web 基座”，已成为决定应用分布式自治能力与全栈同构效率的关键。在鸿蒙设备这类强调 AOT 极致效能与背景任务严格限制的环境下，如果应用依然采用重量级的 HTTP 服务端，由于由于进程级的上下文切换开销，极易由于由于“算力溢出”导致鸿蒙应用在作为服务端响应时发生明显的电量损耗。 我们需要一种能够解耦路由逻辑、支持

VibeThinker-1.5B-WEBUI使用秘籍：提升推理效率的7个技巧

VibeThinker-1.5B-WEBUI使用秘籍：提升推理效率的7个技巧 1. 背景与核心价值 随着大模型在数学推理和代码生成任务中的广泛应用，如何在控制成本的前提下实现高效推理成为工程实践中的关键挑战。微博开源的 VibeThinker-1.5B 模型以仅15亿参数规模，在数学与编程类任务中展现出超越更大模型的性能表现，为低成本、高效率的AI推理提供了新的可能性。 该模型总训练成本仅为7,800美元，却在AIME24、AIME25等权威数学基准测试中超过DeepSeek R1（参数量超其400倍），同时在LiveCodeBench v6上得分达51.1，优于Magistral Medium。这表明其在竞争性编程与复杂逻辑推理场景中具备显著优势。 本文将围绕 VibeThinker-1.5B-WEBUI 的实际应用，系统介绍7个提升推理效率的关键技巧，帮助开发者最大化利用这一轻量级高性能模型。 2. 理解模型定位与适用边界 2.1 小参数但强推理的设计哲学 VibeThinker-1.5B 属于典型的“小模型、大能力”范式。它并非通用对话模型，而是专注于结构化推理