Back to Details

stitch-skills

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

stitch-skills — Agent Skills for Stitch MCP

stitch-skills — 适用于Stitch MCP的Agent Skills

AI-powered UI design generation, prompt refinement, and screen-to-code workflows.
stitch-skills
is a library of Agent Skills for the Stitch MCP server, following the Agent Skills open standard for compatibility with Claude Code, Cursor, and Gemini CLI.
Note: This is not an officially supported Google product.
基于AI的UI设计生成、提示优化与屏幕转代码工作流。
stitch-skills
是一套为Stitch MCP服务器打造的Agent Skills库，遵循Agent Skills开放标准，可兼容Claude Code、Cursor和Gemini CLI。
注意： 这并非谷歌官方支持的产品。

Installation

安装

Plugin (Claude Code)

插件（Claude Code）

bash
claude plugin marketplace add google-labs-code/stitch-skills
bash
claude plugin marketplace add google-labs-code/stitch-skills

Skill (any platform)

技能（任意平台）

bash
undefined
bash
undefined

List available skills

列出可用技能

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

Install a specific skill globally

全局安装特定技能

npx skills add google-labs-code/stitch-skills --skill stitch-design --global npx skills add google-labs-code/stitch-skills --skill stitch-loop --global npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global npx skills add google-labs-code/stitch-skills --skill react-components --global npx skills add google-labs-code/stitch-skills --skill remotion --global npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global npx skills add google-labs-code/stitch-skills --skill design-md --global
npx skills add google-labs-code/stitch-skills --skill stitch-design --global npx skills add google-labs-code/stitch-skills --skill stitch-loop --global npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global npx skills add google-labs-code/stitch-skills --skill react-components --global npx skills add google-labs-code/stitch-skills --skill remotion --global npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global npx skills add google-labs-code/stitch-skills --skill design-md --global

Install from oh-my-skills

从oh-my-skills安装

npx skills add https://github.com/akillness/oh-my-skills --skill stitch-skills
undefined
npx skills add https://github.com/akillness/oh-my-skills --skill stitch-skills
undefined

When to use

使用场景

  • Generate high-fidelity UI screens from natural-language prompts via Stitch
  • Create multi-page websites from a single prompt with automated file organization
  • Produce DESIGN.md documentation that translates design systems for AI agents
  • Refine vague UI ideas into polished, Stitch-optimized prompts with specificity
  • Convert Stitch designs into React component architectures with consistency checks
  • Generate walkthrough videos from Stitch projects using Remotion
  • Integrate shadcn/ui components into React applications
  • 通过Stitch从自然语言提示生成高保真UI界面
  • 通过单个提示创建多页网站并自动整理文件结构
  • 生成DESIGN.md文档，将设计系统转换为AI Agent可理解的内容
  • 将模糊的UI想法优化为精准、适配Stitch的提示
  • 将Stitch设计转换为React组件架构并进行一致性检查
  • 使用Remotion从Stitch项目生成演示视频
  • 在React应用中集成shadcn/ui组件

Do not use when

不适用于以下场景

  • You need token-level design system lint/diff/export → route to 
    google-design
  • You need WCAG contrast audit only → route to 
    web-accessibility
  • You need full backend API design → route to 
    backend-api
  • You need generic React state management → route to 
    react-patterns
  • 需要针对设计系统进行令牌级别的lint/对比/导出 → 请使用
    google-design
  • 仅需要WCAG对比度审计 → 请使用
    web-accessibility
  • 需要完整的后端API设计 → 请使用
    backend-api
  • 需要通用的React状态管理 → 请使用
    react-patterns

Available skills

可用技能

stitch-design

stitch-design

Primary skill for prompt refinement and screen generation through the Stitch MCP system.
Workflow:
1. Enhance the user's prompt for Stitch
2. Call stitch_generate_screen MCP tool
3. Validate and iterate on the output
通过Stitch MCP系统进行提示优化和界面生成的核心技能。
工作流程：
1. 优化用户提供的Stitch提示
2. 调用stitch_generate_screen MCP工具
3. 验证并迭代输出结果

stitch-loop

stitch-loop

Automates multi-page website creation from a single prompt.
Workflow:
1. Parse top-level pages from the prompt
2. Generate each screen via stitch_generate_screen
3. Organize files and validate output
4. Produce a complete, linked website
通过单个提示自动完成多页网站创建。
工作流程：
1. 解析提示中的顶级页面
2. 通过stitch_generate_screen生成每个界面
3. 整理文件并验证输出
4. 生成完整的关联网站

enhance-prompt

enhance-prompt

Transforms vague UI ideas into polished, Stitch-optimized prompts.
bash
undefined
将模糊的UI想法转换为精准、适配Stitch的提示。
bash
undefined

Example: add design keywords, specificity, and system context

示例：添加设计关键词、细节和系统上下文

Input: "a login page" Output: "A clean, minimal login page with email/password fields, a primary CTA button using brand colors, subtle card elevation, and a 'Forgot password?' link below the form."
undefined
输入： "一个登录页面" 输出： "一个简洁极简的登录页面，包含邮箱/密码输入框， 使用品牌色的主CTA按钮，轻微的卡片阴影效果， 表单下方带有'忘记密码？'链接。"
undefined

design-md

design-md

Generates 
DESIGN.md
documentation that translates design systems into natural, semantic language optimized for Stitch screen generation.
bash
undefined
生成
DESIGN.md
文档，将设计系统转换为适合Stitch界面生成的自然语义语言。
bash
undefined

Output: repo-root DESIGN.md with brand tokens in Stitch-friendly language

输出：仓库根目录下的DESIGN.md，包含适配Stitch的品牌令牌描述

undefined
undefined

react-components

react-components

Converts Stitch screens to React component architectures with consistency validation.
Workflow:
1. Parse Stitch screen JSON/HTML output
2. Map elements to React component tree
3. Validate component naming and prop consistency
4. Output component files with TypeScript types
将Stitch界面转换为React组件架构并进行一致性验证。
工作流程：
1. 解析Stitch界面的JSON/HTML输出
2. 将元素映射为React组件树
3. 验证组件命名和属性一致性
4. 输出带TypeScript类型的组件文件

remotion

remotion

Creates walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays.
bash
undefined
使用Remotion从Stitch项目创建演示视频，包含流畅过渡、缩放和文本叠加效果。
bash
undefined

Requires: npx remotion studio

前置要求：npx remotion studio

Output: MP4 walkthrough video of Stitch screens

输出：Stitch界面的MP4演示视频

undefined
undefined

shadcn-ui

shadcn-ui

Provides guidance on implementing shadcn/ui components within React applications built from Stitch designs.
bash
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input form
提供在基于Stitch设计构建的React应用中实现shadcn/ui组件的指导。
bash
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input form

Repository structure

仓库结构

Each skill follows the Agent Skills open standard:
stitch-skills/
├── stitch-design/
│   ├── SKILL.md        — agent mission documentation
│   ├── scripts/        — validation and networking executables
│   ├── resources/      — knowledge base (checklists, style guides)
│   └── examples/       — reference implementations
├── stitch-loop/
├── enhance-prompt/
├── react-components/
├── remotion/
├── shadcn-ui/
└── design-md/
每个技能都遵循Agent Skills开放标准：
stitch-skills/
├── stitch-design/
│   ├── SKILL.md        — Agent任务文档
│   ├── scripts/        — 验证和网络可执行文件
│   ├── resources/      — 知识库（检查清单、风格指南）
│   └── examples/       — 参考实现
├── stitch-loop/
├── enhance-prompt/
├── react-components/
├── remotion/
├── shadcn-ui/
└── design-md/

Operating rules

操作规则

  1. Run 
    enhance-prompt
    before any 
    stitch-design
    generation for better results
  2. Use 
    design-md
    to produce a DESIGN.md before starting 
    stitch-loop
    multi-page work
  3. Validate React components for naming consistency after 
    react-components
    output
  4. Keep Stitch screen outputs in a dedicated 
    screens/
    directory for 
    remotion
    to consume
  5. Use 
    shadcn-ui
    integration only after 
    react-components
    has established the component tree
  6. Iterate: enhance → generate → review → refine is the recommended cycle
  1. 在执行
    stitch-design
    生成前先运行
    enhance-prompt
    以获得更好的结果
  2. 在启动
    stitch-loop
    多页工作前，使用
    design-md
    生成DESIGN.md文档
  3. 在
    react-components
    输出后验证React组件的命名一致性
  4. 将Stitch界面输出存放在专用的
    screens/
    目录中，供
    remotion
    调用
  5. 仅在
    react-components
    建立组件树后再进行
    shadcn-ui
    集成
  6. 迭代流程：优化→生成→评审→细化是推荐的循环方式

Examples

示例

bash
undefined
bash
undefined

Full UI generation workflow

完整UI生成工作流

1. Enhance your prompt

1. 优化提示

stitch enhance-prompt "a dashboard for monitoring server health"
stitch enhance-prompt "一个用于监控服务器健康的仪表盘"

2. Generate screens via Stitch MCP

2. 通过Stitch MCP生成界面

stitch generate "..." --pages overview,alerts,settings
stitch generate "..." --pages overview,alerts,settings

3. Convert to React

3. 转换为React组件

stitch react-components ./screens/
stitch react-components ./screens/

4. Add shadcn/ui

4. 添加shadcn/ui组件

npx shadcn-ui@latest add card badge table
npx shadcn-ui@latest add card badge table

5. Generate walkthrough video

5. 生成演示视频

stitch remotion ./screens/ --output walkthrough.mp4

Source: [google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills) — Apache-2.0 License
stitch remotion ./screens/ --output walkthrough.mp4

来源：[google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills) — Apache-2.0 许可证