使用这些技能有什么前置要求？

需要在代理环境中配置并运行 Stitch MCP server，并按照官方文档完成服务器注册及环境变量和凭证的设置。

如何在 OpenCode 中使用这些技能？

OpenCode 不支持 npx plugins/skills 命令。需要手动将技能文件夹复制到 .opencode/skills 等可发现路径，并在 opencode.json 中添加远程 MCP 条目。技能名称需改为小写 kebab-case。

可以只安装部分技能吗？

可以，通过 npx skills add 命令选择性安装。但需要注意技能之间通常存在相互依赖，选择性安装时需确保包含所有必需的依赖项。

2026年9月26日

Stitch Design Skills

人工智能提示词工程与 Skill 管理0

获取资源

为 AI 编程代理提供与 Stitch MCP server 配合使用的设计、构建和工具类 Agent Skills。

Apache-2.0Claude CodeCursor文本图片代码

Skill广场技能封装

安装 / 调用方式bash

Codex:
codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities

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 workspace --target cursor

Selective install:
npx skills add google-labs-code/stitch-skills

产品信息

形态: AI技能 & 智能体
分类: 人工智能 › 提示词工程与 Skill 管理
定价: 开源
平台: Claude Code · Cursor
授权协议: Apache-2.0
首发日期: 2026年9月26日
收录时间: 2026年9月26日
官网: github.com

概览

GitHub GitHub

Stitch Design Skills 是一个遵循 Agent Skills 开放标准的技能库，专为配合 Stitch MCP server 使用而设计。它兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 以及 OpenCode（需手动安装）等 AI 编程代理。该仓库将技能分为三个插件包： - **stitch-design**：核心设计工作流，包括将前端代码转换为 Stitch 设计、从文本或图片生成新界面、管理设计系统、提取 DESIGN.md、提取静态 HTML 以及上传本地资源到 Stitch 项目。 - **stitch-build**：代码生成与框架集成，支持将 Stitch 界面转换为 React 组件、React Native 组件，使用 Remotion 生成演示视频，集成 shadcn/ui，以及构建基于 React + Vite 的仪表盘。 - **stitch-utilities**：辅助工具类技能。使用前需要在代理环境中配置并运行 Stitch MCP server。安装方式因宿主工具而异：Codex 可通过 CLI 或 UI 添加 marketplace；Claude Code 和 Cursor 使用 `npx plugins add` 命令分别安装到项目或工作区；OpenCode 则需要手动复制技能文件夹并配置 `opencode.json` 中的远程 MCP 条目。也可以通过 `npx skills add` 选择性地安装特定技能，但需注意技能之间可能存在依赖关系。

功能特性

code-to-design：通过 HTML 提取和设计系统将前端代码（React、Vue 等）转换为 Stitch 设计。
generate-design：从文本或图片生成新界面，编辑现有界面，并创建设计变体。
manage-design-system：在 Stitch 中管理设计系统，上传 DESIGN.md 并将主题应用到界面。
extract-design-md：直接从前端源代码中提取完整的 DESIGN.md 文件。
extract-static-html：从运行中的 Web 应用提取自包含的静态 HTML，内联 CSS 和图片。
upload-to-stitch：将本地资源（图片、原型图、HTML）上传到 Stitch 项目。
react-components：将 Stitch 界面转换为带有自动验证和设计令牌一致性的 React 组件系统。
react-native：将 Stitch HTML 设计转换为包含 StyleSheet 和平台特定代码的 React Native 组件。
remotion：使用 Remotion 从 Stitch 项目生成带有平滑过渡和缩放效果的演示视频。
shadcn-ui：提供集成和使用 shadcn/ui 组件构建应用的指导。
react-vite-dashboard：将 Stitch 界面转换为结合 TanStack Query 和 DESIGN.md 令牌的 React + Vite 仪表盘。

版本更新

新版本提醒我

首个版本 · Stitch Design Skills

2026年9月26日

Q&A

Stitch Design Skills 兼容哪些 AI 编程代理？由 AI 生成: 兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 以及 OpenCode（需要手动安装）。
使用这些技能有什么前置要求？由 AI 生成: 需要在代理环境中配置并运行 Stitch MCP server，并按照官方文档完成服务器注册及环境变量和凭证的设置。
如何在 OpenCode 中使用这些技能？由 AI 生成: OpenCode 不支持 npx plugins/skills 命令。需要手动将技能文件夹复制到 .opencode/skills 等可发现路径，并在 opencode.json 中添加远程 MCP 条目。技能名称需改为小写 kebab-case。
可以只安装部分技能吗？由 AI 生成: 可以，通过 npx skills add 命令选择性安装。但需要注意技能之间通常存在相互依赖，选择性安装时需确保包含所有必需的依赖项。