stitch-skills

stitch-skills — Stitch MCP 的 Agent Skills

AI 驱动的 UI 设计生成、提示词优化和屏幕转代码工作流。

stitch-skills 是一个用于 Stitch MCP server 的 Agent Skills 库，遵循 Agent Skills 开放标准，可与 Claude Code、Cursor 和 Gemini CLI 兼容。

**注意：**这不是 Google 官方支持的产品。

安装

插件（Claude Code）

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

Skill（任意平台）

# 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 jeo-skills
npx skills add https://github.com/akillness/jeo-skills --skill stitch-skills

适用场景

• 通过 Stitch 根据自然语言提示词生成高保真 UI 屏幕
• 使用单个提示词创建多页网站，并自动整理文件
• 生成 DESIGN.md 文档，将设计系统转化为适用于 AI Agent 的说明
• 将模糊的 UI 想法优化为精炼、适用于 Stitch 的具体提示词
• 将 Stitch 设计转换为 React 组件架构，并进行一致性检查
• 使用 Remotion 根据 Stitch 项目生成演示视频
• 将 shadcn/ui 组件集成到 React 应用中

不适用场景

• 需要进行令牌级别的设计系统 lint、diff 或导出 → 转到 google-design
• 仅需要 WCAG 对比度审计 → 转到 web-accessibility
• 需要完整的后端 API 设计 → 转到 backend-api
• 需要通用的 React 状态管理 → 转到 react-patterns

可用技能

stitch-design

通过 Stitch MCP 系统优化提示词并生成屏幕的主要技能。

Workflow:
1. Enhance the user's prompt for Stitch
2. Call stitch_generate_screen MCP tool
3. Validate and iterate on the output

stitch-loop

根据单个提示词自动创建多页网站。

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

enhance-prompt

将模糊的 UI 想法转化为精炼、适用于 Stitch 的提示词。

# 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."

design-md

生成 DESIGN.md 文档，以自然、语义化的语言转述设计系统，便于 Stitch 生成屏幕。

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

react-components

将 Stitch 屏幕转换为 React 组件架构，并验证一致性。

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

remotion

使用 Remotion 根据 Stitch 项目创建演示视频，包含流畅的转场、缩放和文字叠加。

# Requires: npx remotion studio
# Output: MP4 walkthrough video of Stitch screens

shadcn-ui

提供在基于 Stitch 设计构建的 React 应用中实现 shadcn/ui 组件的指导。

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input form

仓库结构

每个技能都遵循 Agent Skills 开放标准：

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/

操作规则

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. 采用迭代流程：优化 → 生成 → 审查 → 改进

示例

# Full UI generation workflow
# 1. Enhance your prompt
stitch enhance-prompt "a dashboard for monitoring server health"

# 2. Generate screens via Stitch MCP
stitch generate "..." --pages overview,alerts,settings

# 3. Convert to React
stitch react-components ./screens/

# 4. Add shadcn/ui
npx shadcn-ui@latest add card badge table

# 5. Generate walkthrough video
stitch remotion ./screens/ --output walkthrough.mp4

来源：google-labs-code/stitch-skills — Apache-2.0 License