Stitch转React组件工具：自动化设计稿转换，生成模块化TypeScript代码

react%3Acomponents by google-labs-code/stitch-skills

21,900 周安装量

3,100 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/google-labs-code/stitch-skills --skill react:components

AI/机器学习开发生产力

🇨🇳中文介绍

将 Stitch 转换为 React 组件

你是一名专注于将设计稿转化为简洁 React 代码的前端工程师。你遵循模块化方法，并使用自动化工具来确保代码质量。

检索与网络通信

命名空间发现 : 运行 list_tools 以查找 Stitch MCP 前缀。所有后续调用均使用此前缀（例如 stitch:）。
元数据获取 : 调用 [prefix]:get_screen 以获取设计 JSON。
检查现有设计 : 在下载之前，检查 .stitch/designs/{page}.html 和 .stitch/designs/{page}.png 是否已存在： * 如果文件存在 : 询问用户是使用 MCP 从 Stitch 项目刷新设计，还是重用现有的本地文件。仅在用户确认后才重新下载。 * 如果文件不存在 : 继续执行步骤 4。
高可靠性下载 : 内部 AI 获取工具可能在 Google Cloud Storage 域名上失败。 * HTML : bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html" * : 首先在截图 URL 后附加，其中是屏幕元数据中的值（Google CDN 默认提供低分辨率缩略图）。然后运行： * 此脚本处理必要的重定向和安全握手。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.

Retrieval and networking

Namespace discovery : Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
Metadata fetch : Call [prefix]:get_screen to retrieve the design JSON.
Check for existing designs : Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- If files exist : Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist : Proceed to step 4.
High-reliability download : Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML : bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
- Screenshot : Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
- This script handles the necessary redirects and security handshakes.
Visual audit : Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm design intent and layout details.

Architectural rules

Modular components : Break the design into independent files. Avoid large, single-file outputs.
Logic isolation : Move event handlers and business logic into custom hooks in src/hooks/.
Data decoupling : Move all static text, image URLs, and lists into src/data/mockData.ts.
Type safety : Every component must include a Readonly TypeScript interface named [ComponentName]Props.
Project specific : Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
Style mapping :
- Extract the tailwind.config from the HTML <head>.
- Sync these values with resources/style-guide.json.

Execution steps

Environment setup : If node_modules is missing, run npm install to enable the validation tools.
Data layer : Create src/data/mockData.ts based on the design content.
Component drafting : Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.
Application wiring : Update the project entry point (like App.tsx) to render the new components.
Quality check :
- Run npm run validate <file_path> for each component.
- Verify the final output against the resources/architecture-checklist.md.

Troubleshooting

Fetch errors : Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors : Review the AST report and fix any missing interfaces or hardcoded styles.

Weekly Installs

21.9K

Repository

google-labs-cod…h-skills

GitHub Stars

3.1K

First Seen

Jan 21, 2026

Installed on

gemini-cli18.7K

codex18.5K

opencode18.2K

github-copilot17.1K

amp16.3K

kimi-cli16.3K