如何教 AI Agent 构建网站和编写 React 组件

我最近突然想到：我们已经习惯了神经网络写代码，但整个过程看起来仍然像在聊天中来回传递文本块。你复制一个提示词，得到一整面代码，粘贴到项目中，发现忘了导入或者样式崩了……熟悉的流程？

看起来 Google Labs 的人也厌倦了同样的事情，于是推出了 stitch-skills。这不是又一个"程序员杀手"，而是一套针对 AI Agent 的具体技能，通过 MCP（Model Context Protocol）工作。简而言之：这些是指令和工具，让你的 Claude、Cursor 或 Gemini 不仅能生成文本，还能有意识地操作项目结构、遵循设计系统，甚至从一句话就能组装完整的网站。

这到底是什么

这个项目是一个技能库，专为与 Stitch 配合使用而设计——一个用于视觉设计和界面生成的服务器。主要特点是标准化。仓库中的每个技能都遵循统一的模板打包：有一个面向 Agent 的清单文件（SKILL.md）、验证脚本和"黄金标准"示例。

这样 Agent 就不需要猜测该怎么做，而是遵循明确的算法。例如，如果你要求把草图转换成 React 组件，Agent 会使用技能 react-components，它知道规则：如何检查语法而不丢失设计令牌。

在实践中有什么用

仓库目前有大约十几个现成的技能。我重点介绍的是那些真正节省时间的，而不是在演示中看起来很花哨的。

通过 stitch-loop 生成完整网站

这个技能不是让你问"给我建一个落地页"然后得到一个文件 index.html，而是让 Agent 部署一个完整的结构。它自己创建必要的页面、组织文件，并检查是否真的能打开。这本质上是原型构建自动化。

用 enhance-prompt 打磨想法

很多时候神经网络给出糟糕的结果，是因为提示词像是"让它好看点"。技能 enhance-prompt 会把你的零散想法整理成一份包含 UI/UX 术语和设计系统背景的规范。这就像让一位资深 lead 在任务发给开发者之前先审阅一遍。

通过 design-md 生成文档

我工作中"最喜欢"的部分——解释为什么按钮恰好是那个颜色以及间距是如何工作的。技能 design-md 分析项目并自己生成 DESIGN.md 文件。它不仅仅是样式列表，而是用人类语言描述设计系统，这有助于同一个 AI Agent 更准确地生成新屏幕。

转换为 React 和 shadcn/ui

对于那些已经玩过原型并想推向生产的人来说，有技能 react-components 和 shadcn-ui。它们确保在将设计转换为代码时，组件逻辑不会丢失，并且使用正确的库。

内部工作原理

如果你查看任何技能文件夹的内部，你会看到一个严格的结构。Google Labs 的人显然是可预测性的倡导者：

• SKILL.md：本质上是解释 Agent 任务的系统提示词。
• scripts/：用于验证结果的可执行文件。如果 Agent 把代码搞砸了，脚本会告诉它。
• examples/：参考示例。模型从中学习（少样本学习）以理解预期的结果。

通过 CLI 安装技能尽可能简单：

npx skills add google-labs-code/stitch-skills --skill react:components --global

命令本身会找到你已安装的工具（如 Cursor 或 Claude Code），并为它们添加新的功能。

值得一试吗

这个项目是有针对性的。如果你还在用纯 Vim 以传统方式写代码，完全不用 AI 辅助，那这个可能对你没什么用。但如果你已经把部分日常工作迁移到 Cursor 或使用 MCP 服务器，那么 stitch-skills 是一个很好的例子，展示了如何结构化地与神经网络协作。

这尤其会吸引前端开发者和快速搭建 MVP 的人。将一个抽象的草图在几分钟内变成一个有文档和 React 组件的结构化项目，这是我们迟早会达到的目标。

缺点方面：文档在某些地方比较简略，而且这个项目不是 Google 官方支持的商业产品（它是 Google Labs 的实验项目）。但作为创建自己技能的基础，或者用于加速你当前的布局工作——这是一个非常值得考虑的选择。

你可以在项目仓库中查看所有可用的技能并阅读规范说明。