google-stitch-skills

google-stitch-skills

目录占位条目 — 完整软件包：google-labs-code/stitch-skills

决策树

对任何 Google Stitch 设计工作流运行以下流程：

1. 是否已安装 Stitch 技能？ 检查：~/.design-agent-skills/skills/stitch-loop/SKILL.md 是否存在（代表性技能）。

   • 是 → 按名称调用相应技能并继续
   • 否 → 转到第 2 步

2. 是否可以访问 shell？

   • 是 → 安装下面的相应技能，然后调用它
   • 否 → 显示安装命令；在 Claude Code 中，将其作为以 ! 开头的聊天消息发送 — 添加 -g 可进行全局安装，省略则仅安装到项目中

安装命令

# Create and manage DESIGN.md files
npx skills add google-labs-code/design-md

# Improve prompts with UI/UX vocabulary
npx skills add google-labs-code/enhance-prompt

# Extract Stitch design specs into DESIGN.md format
npx skills add google-labs-code/extract-design-md

# Convert Stitch to React components
npx skills add google-labs-code/react-components

# Build components with shadcn/ui
npx skills add google-labs-code/shadcn-ui

# Iterative design-to-code feedback loop
npx skills add google-labs-code/stitch-loop

安装后调用

• design-md — “DESIGN.md”、“创建设计规范”
• enhance-prompt — “增强我的提示词”、“改进 UI 提示词”
• extract-design-md — “提取设计 md”、“将 Stitch 转换为 DESIGN.md”
• react-components — “将 Stitch 转换为 React”、“转换为 React”
• shadcn-ui — “将 Stitch 转换为 shadcn”、“使用 shadcn 构建”
• stitch-loop — “stitch 循环”、“迭代设计”

功能

Google Labs 官方 Stitch 技能集合，支持完整的设计到代码流水线。管理 DESIGN.md 规范文件，使用 UI/UX 词汇增强提示词，将 Stitch 输出转换为 React 组件或 shadcn/ui，提取设计规范，并运行迭代改进循环。