Agent Skills 入门

Stitch Design Skills 是一组智能体指令，能为你的编码智能体赋予设计超能力——生成屏幕、提取设计系统、构建多页站点，并把设计转换为 React 组件。凡是支持 Agent Skills 标准的智能体都能使用，包括 Gemini CLI、Claude Code、Cursor 和 Antigravity。

安装插件套件

在你的项目目录中运行：

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

这会安装全部三个插件（stitch-design、stitch-build、stitch-utilities），共计 13 个技能。

选择智能体目标

# Claude Code
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor
npx plugins add google-labs-code/stitch-skills --scope project --target cursor

# Gemini CLI
npx plugins add google-labs-code/stitch-skills --scope project --target gemini-cli

Antigravity 用户： plugins CLI 目前还不支持将 Antigravity 作为目标。请改用选择性安装章节中的 npx add-skill 命令。

选择性安装（可选）

如果你只需要特定技能，运行以下命令并选择你想要的技能：

npx skills add google-labs-code/stitch-skills

许多技能彼此依赖。例如，code-to-design 技能需要 extract-static-html、extract-design-md 和 upload-to-stitch。安装完整插件是更稳妥的选择。

连接 Stitch MCP 服务器

这些技能通过 Model Context Protocol 与 Stitch 通信。请按照 Stitch MCP 设置说明注册服务器并配置 API 凭据。

连接完成后，你的智能体就能使用 list_projects、generate_screen_from_text 和 get_screen 等工具。

验证连接

PROMPT

List my Stitch projects.

你应该会看到现有项目——如果这是你第一次使用 Stitch，则会看到一个空列表。如果出现错误，请仔细检查 MCP 服务器是否正在运行，以及 API 密钥是否有效。

生成第一个屏幕

从一个粗略的想法开始。enhance-prompt 技能会把模糊的概念转化为结构化、可直接用于生成的提示词。

PROMPT

Enhance this prompt for Stitch: “Create a landing page for an artisanal coffee shop”

留意输出结果——该技能会补充平台规格，把页面组织成带编号的章节，用具体的 UI/UX 关键词替换模糊表述，并生成一个包含色彩角色的设计系统区块。增强后的提示词效果远好于原始版本。

现在开始生成：

PROMPT

Generate a screen in my Stitch project using the enhanced prompt from the previous step.

这个过程需要 15–30 秒。完成后，你会看到包含屏幕 ID 和文件路径的确认信息。打开生成的截图即可查看你的设计——一个完整的落地页，包含主视觉区、功能卡片、导航和页脚，全部来自一条文本提示词。

下一步

你已经安装了技能、连接了 Stitch，并生成了第一个屏幕。接下来可以从这里继续：

从代码库导入 — 从现有源代码中提取 DESIGN.md
代码到设计往返 — 把 React 应用导入 Stitch，编辑设计，再导出为组件
循环构建 — 从一个概念生成整个网站
技能参考 — 全部 13 个技能的完整目录

故障排查

问题	解决方法
找不到 `npx plugins`	安装 Node.js 18+：`node --version`
MCP 服务器无响应	验证配置：MCP 设置指南
智能体中看不到技能	安装后重启智能体会话
权限错误	使用 `--scope project` 而不是 `--scope global`
API 密钥错误	确认智能体 MCP 配置中的密钥尚未过期