🔧 AI 知识库
⚡ 编程工程方法论2026-06-30

Trae + Stitch MCP + Skills：我的 AI 编程新范式——3 小时从 0 到 1 一个小程序

原文链接

Trae + Stitch MCP + Skills：我的 AI 编程新范式——3 小时从 0 到 1 一个小程序

原文链接：https://mp.weixin.qq.com/s/Jfyi7deVorxjiwoEUm3KIQ 作者：卷卷在AI时代 | 2026-02-09

摘要

作者用 Trae（字节 AI IDE）+ Stitch MCP + Skills，从一嘴到一个能跑的小程序，3 小时不切窗口。四步流程：①Stitch Skill 优化提示词（enhance-prompt 从"便签"变"施工地图"）→ ②Trae 调用 Stitch MCP 在 Stitch 里生成 UI → ③下载 HTML 到本地 → ④Trae 参照高保真原型生成小程序页面。核心：MCP 和 Skills 把 Stitch 嵌进 Trae，上下文不掉线，设计+开发不割裂。

核心痛点

以前用 AI 写代码最痛苦的不是写代码，是解释——每次换工具都得重新描述需求。

转机：Stitch 更新支持了 MCP 和 Skills。Stitch 生成的不仅是图，更是可以被 AI IDE 调用的"上下文"。

四步流程

第一步：Stitch Skill 优化提示词

使用 Stitch 的 enhance-prompt 技能。

优化前——像一张简单便签：

做一个配料表翻译官小程序，通过图像识别和成分分析...要求全中文界面。页面：首页、识别结果、分析结果、分享

优化后——变成一本详细施工地图：

  • 设计系统完整：色彩方案（健康蓝 #165DFF / 活力绿 / 警告橙）、排版（思源黑体 20/16/14px）、组件风格（圆角 8px/12px，柔和阴影）
  • 4 个页面逐一拆解：首页（拍摄/上传导航）、识别结果（原始文本+初步分析）、分析结果（健康评分圆形进度条+成分翻译+营养成分表+健康建议）、分享（文案编辑+多渠道）

第二步：Trae 调用 Stitch MCP 生成 UI

AI IDE 用字节 Trae（国内版，接 Kimi K2.5）。提示词前加 使用 GEMINI_3_PRO 模型帮我创建页面，约 3 分钟生成完毕。

第三步：下载 HTML 到本地

Export → .zip，放到小程序项目同级目录。

第四步：Trae 参照高保真原型生成小程序

Trae SOLO 模式 + Kimi K2.5，指令告诉它 HTML 路径和小程序目录路径即可。Trae 自动调用 stitch react:components 技能，将 Stitch 设计转化为模块化的 Vite + React 组件。

核心判断

上下文不掉线的恐怖效率。 通过 MCP 和 Skills 把 Stitch 直接嵌进 Trae 里，感觉打通了任督二脉。设计、提示词优化、代码生成一气呵成。

AI Native 不是换个工具，而是让工具像人一样更懂你。

未来的程序员不再是写代码的人，而是设计工作流的人。

附：安装文档