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

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

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

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

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

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

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

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

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

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

操作规则

Run
```
enhance-prompt
```
before any
```
stitch-design
```
generation for better results
Use
```
design-md
```
to produce a DESIGN.md before starting
```
stitch-loop
```
multi-page work
Validate React components for naming consistency after
```
react-components
```
output
Keep Stitch screen outputs in a dedicated
```
screens/
```
directory for
```
remotion
```
to consume
Use
```
shadcn-ui
```
integration only after
```
react-components
```
has established the component tree
Iterate: enhance → generate → review → refine is the recommended cycle

在执行
```
stitch-design
```
生成前先运行
```
enhance-prompt
```
以获得更好的结果
在启动
```
stitch-loop
```
多页工作前，使用
```
design-md
```
生成DESIGN.md文档
在
```
react-components
```
输出后验证React组件的命名一致性
将Stitch界面输出存放在专用的
```
screens/
```
目录中，供
```
remotion
```
调用
仅在
```
react-components
```
建立组件树后再进行
```
shadcn-ui
```
集成
迭代流程：优化→生成→评审→细化是推荐的循环方式

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

3. Convert to React

3. 转换为React组件

stitch react-components ./screens/

4. Add shadcn/ui

4. 添加shadcn/ui组件

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 许可证