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

【Coze智能体开发】（三）解锁 Coze 智能体超能力：插件 + 知识库 + 数据库全解析，让 AI 从 “会聊天“ 到 “能办事“！

【Coze智能体开发】（三）解锁 Coze 智能体超能力：插件 + 知识库 + 数据库全解析，让 AI 从 “会聊天“ 到 “能办事“！

目录 编辑 前言 一、Coze 资源全景：不止于 "聊天" 的能力延伸 二、插件：给智能体装上 "手脚"，让 AI 能 "动手办事" 2.1 什么是插件？—— 智能体的 "工具扩展包" 2.2 插件的分类：按需选择，精准赋能 1. 按功能场景分类 2. 按收费方式分类 2.3 插件的使用：3 步快速集成，零代码也能上手 第一步：创建插件智能体 第二步：添加插件（核心步骤）

By Ne0inhk
OpenClaw接入企业微信全攻略：从0到1打通企业AI协作通道

OpenClaw接入企业微信全攻略：从0到1打通企业AI协作通道

摘要：本文详细介绍了将OpenClaw AI框架接入企业微信的完整方案。通过两种主流接入方式（API模式机器人和自建应用），企业可以快速实现智能问答、流程自动化等AI能力落地。文章重点讲解了从前期准备、核心接入流程到生产环境部署的全套实操步骤，包括权限配置、网络设置、参数对接等关键环节。同时提供了进阶优化建议，如后台守护、HTTPS加固、权限管控等企业级功能配置，以及常见问题排查方法。该方案能有效解决企业信息孤岛问题，将AI能力无缝嵌入员工日常办公场景，在保障数据安全的同时显著提升工作效率。 目录 一、前言：为什么要将OpenClaw接入企业微信？ 二、接入前置准备 OpenClaw介绍 接入准备工作 三、核心接入流程（两种方案任选） 方案一：API模式机器人接入（新手首选，快速上手） 步骤1：企业微信后台创建API模式机器人 步骤2：OpenClaw安装企微插件并配置参数 步骤3：完成机器人创建并测试联调 方案二：企业微信自建应用接入（企业级进阶方案） 步骤1：企业微信创建自建应用并获取核心凭证 步骤2：OpenClaw配置自建应用核心参数 步骤3：启用应

By Ne0inhk
一句话生成PCB？和AI聊聊天，就把板子画了！

一句话生成PCB？和AI聊聊天，就把板子画了！

在键盘上敲下一句“我要一个STM32的电机驱动板，带CAN总线”，几秒后，一张完整的原理图和PCB布局在你眼前展开——这不是科幻电影，而是AI给硬件工程师带来的真实震撼。 清晨的阳光洒进办公室，资深硬件工程师李工没有像往常一样直接打开Altium Designer。他对着电脑屏幕上的对话框，敲入了一行简单的需求描述：“设计一个基于ESP32的智能插座PCB，要求支持Wi-Fi控制、过载保护，尺寸尽量小巧。” 15分钟后，一份完整的原理图草案、经过初步优化的双层板布局，甚至是一份物料清单（BOM）初稿已经呈现在他面前。这不可思议的效率背后，正是AI驱动的PCB设计工具在重新定义电子设计的边界。 01 效率革命，从对话到电路板 如今的PCB设计领域正经历着一场静悄悄的革命。传统上，一块电路板从概念到图纸，需要工程师经历需求分析、器件选型、原理图绘制、布局布线等一系列复杂工序，耗时数天甚至数周。 AI工具的出现彻底改变了这一流程。这类工具的核心是经过海量电路数据和设计规则训练的大型语言模型，它们能理解自然语言描述的需求，自动完成从逻辑设计到物理实现的全流程或关键环节。 比如，当

By Ne0inhk
人工智能：循环神经网络（RNN）与序列数据处理实战

人工智能：循环神经网络（RNN）与序列数据处理实战

循环神经网络（RNN）与序列数据处理实战 1.1 本章学习目标与重点 💡 学习目标：掌握循环神经网络的核心原理、经典变体结构，以及在文本序列任务中的实战开发流程。 💡 学习重点：理解 RNN 的循环计算机制，学会使用 TensorFlow/Keras 搭建基础 RNN 与 LSTM 模型，完成文本分类任务。 1.2 循环神经网络核心原理 1.2.1 为什么需要 RNN 💡 传统的前馈神经网络（如 CNN、全连接网络）的输入和输出是相互独立的。它们无法处理序列数据的上下文关联特性。 序列数据在现实中十分常见，比如自然语言文本、语音信号、时间序列数据等。这些数据的核心特点是，当前时刻的信息和之前时刻的信息紧密相关。 循环神经网络通过引入隐藏状态，可以存储历史信息，从而有效捕捉序列数据的上下文依赖关系。 1.2.2 RNN

By Ne0inhk