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. シェルにアクセスできますか？

   • はい → 以下から該当するスキルをインストールし、呼び出します
   • いいえ → インストールコマンドを表示します。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 — 「design md を抽出」、「Stitch から DESIGN.md へ」
• react-components — 「Stitch を React に」、「React に変換」
• shadcn-ui — 「Stitch を shadcn に」、「shadcn で構築」
• stitch-loop — 「stitch loop」、「デザインを反復」

機能

Google Labs 公式の Stitch スキルコレクションで、デザインからコード作成までの一連のパイプラインに対応します。DESIGN.md 仕様ファイルを管理し、UI/UX の用語を使ってプロンプトを強化し、Stitch の出力を React コンポーネントまたは shadcn/ui に変換し、デザイン仕様を抽出し、反復的な改善ループを実行します。