Communitygithub.com

KaimingWan/oh-my-kiro

Google Stitch デザインからコードへのワークフローを実現し、デザインシステムを管理します。Stitch、デザインからコードへの変換、UIデザイン、ビジュアル比較、design.md、デザインシステム、ShadCN変換、スクリーンショットからのリデザイン、またはStitchからローカルコードへのデザイン取り込みに関するユーザーのトリガーに反応します。

oh-my-kiro とは？

このスキルは、Google Stitch を介したデザインからコードへのワークフローを統合し、AIエージェント（Claude Code、Cursor など）向けに最適化された `design.md` ファイルを中心にデザインシステムを管理します。 Stitch はデザインシステム（色、フォント、テーマ）を `design.md` に自動生成し、このファイルをエージェントに渡すだけでスタイルを完全に再現できます。 スキルは4つの主要なワークフローを提供します：スクラッチからのデザイン、既存サイトのスクリーンショットやURLからのリデザイン、Claude Code を用いた自律的なエージェント統合ビルド、そして Stitch デザインを ShadCN UI コンポーネントに変換するパスです。 さらに、実装後の検証フェーズとして、マルチビューポートスクリーンショット、デザインシステムの一貫性チェック、ピクセル単位の差分比較、AIによるスロップ（画一的なパターン）検出、LLMによる視覚差分分析の5層からなる検証プロセスを含みます。 これにより、人間が見落としがちな問題を発見し、最大10ラウンドまでの反復的なリファインメントループで品質を高めます。

対応✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KaimingWan/oh-my-kiro/tree/HEAD/skills/omk-stitch
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

トリガー例

  • 「Stitchのデザインをコードに引き出して」
  • 「用 Stitch 做个落地页」
  • 「把这个截图的风格用到我的网站上」
  • 「Stitchプロジェクトからdesign.mdをエクスポートして」
  • 「StitchデザインをShadCNコンポーネントに変換して」

Google Stitch 統合スキル

コアコンセプト: design.md

Stitch のデザインシステムは design.md ファイルに記録されます。色、フォント、テーマ、コンポーネントスタイルが含まれます。このファイルは以下の特徴を持ちます:

  • エージェント最適化 — 生のCSSよりもエージェントが理解しやすいように調整された言語を使用
  • 転送可能 — Claude Code、Cursor、または任意のエージェントに渡せば、スタイルを完全に再現
  • 自動生成 — プロジェクトごとに Stitch が自動生成（依頼しなくても作成される）

デフォルトワークフロー: 常に design.md を確立してから、その上にページを構築します。

MCP サーバー

コミュニティパッケージ: davideast/stitch-mcp npm: @_davideast/stitch-mcp

セットアップ

前提条件

  • Google Cloud CLI (gcloud) がインストールされていること
  • Stitch API が有効な GCP プロジェクト

認証（OAuth — APIキーは非対応）

gcloud auth login
gcloud auth application-default login
gcloud config set project <YOUR_PROJECT_ID>
gcloud auth application-default set-quota-project <YOUR_PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<YOUR_PROJECT_ID>

MCP 設定

MCP クライアント設定に追加（例: .kiro/settings/mcp.json）:

{
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_USE_SYSTEM_GCLOUD": "1",
      "GOOGLE_CLOUD_PROJECT": "<YOUR_PROJECT_ID>"
    }
  }
}

重要: proxy モードと STITCH_USE_SYSTEM_GCLOUD=1 を必ず使用してください。直接の serverUrl モードは不安定です。

セットアップ確認

npx @_davideast/stitch-mcp doctor

doctor が API テストでタイムアウトした場合、直接確認:

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <YOUR_PROJECT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

MCP ツール

ツール目的
list_projectsすべての Stitch プロジェクトを一覧表示
get_screen_codeスクリーンの HTML/CSS を取得
get_screen_imageスクリーンショット（base64）を取得
build_siteスクリーンをルートにマッピングし、Astro プロジェクトを生成

CLI ツール（MCP 以外）

npx @_davideast/stitch-mcp view --projects          # プロジェクトをブラウズ
npx @_davideast/stitch-mcp serve -p <project-id>    # ローカルプレビュー
npx @_davideast/stitch-mcp site -p <project-id>     # Astro サイトを生成

ワークフロー

パス A: スクラッチからのデザイン（デフォルト）

  1. デザインシステムを確立 — Stitch で design.md を作成または提供（指定しない場合は自動生成）
  2. スクリーンを生成 — 要件を Stitch にプロンプト送信。デザインシステムに基づいて構築
  3. ローカルに取り込み — get_screen_code → HTML/CSS、get_screen_image → スクリーンショット
  4. 実装 — 対象フレームワーク（Next.js/Astro/React）に変換
  5. 検証 — ビジュアル比較（下記「検証フェーズ」を参照）

パス B: 参照からのリデザイン

既存サイトやスクリーンショットのスタイルを採用したい場合（コピーではなく）:

  1. 参照をキャプチャ — 気に入ったサイトの全画面スクリーンショット（GoFullPage などを使用）
  2. Stitch でリデザイン — スクリーンショットをアップロード。Stitch がデザイン言語、コンポーネントパターン、レイアウトを抽出し、あなたのコンテンツに適用
  3. 代替方法: URL からインポート — Stitch のデザインシステムパネルで、任意のウェブサイト URL からインポート。Stitch がクロールしてタイポグラフィと色を design.md として抽出
  4. 調整 — ワイヤーフレームをアップロードしたり、特定のセクションに注釈を付けて調整

パス C: エージェント統合ビルド（Claude Code + Stitch）

Google 公式の Stitch スキルを使用した自律的なエンドツーエンドビルド:

  1. 拡張プロンプト — 曖昧なユーザープロンプトを Stitch 最適化プロンプトに変換（Stitch は正確な説明よりも形容詞によるムードに依存）
  2. Stitch ループ — Chrome DevTools を使用した自律ビルドループ。ステージ間でプロンプトトラッキングを維持
  3. React コンポーネント — Stitch のモノリシックな HTML エクスポートを、検証付きのモジュラーな React コンポーネントに変換

claude.md のワークフロー順:

拡張プロンプト → Stitch ループ → React コンポーネント変換

Stitch MCP の接続が必要です。インストールについては Google の Stitch スキルリポジトリ を参照してください。

パス D: ShadCN UI 変換

Stitch の生の React/HTML にはインタラクションが不足しています。プロダクション品質のコンポーネントには ShadCN を使用:

  1. ShadCN MCP に接続
  2. Google の ShadCN UI スキルを使用して Stitch デザインを ShadCN コンポーネントに変換
  3. レジストリ（例: glassmorphism、motion-primitives）で拡張し、プレミアムな印象に
  4. claude.md でレジストリを指定すると、変換が自動化

検証フェーズ（gstack design-review に着想）

実装後、多層検証を実行します。目標: 人間の目が見逃すものを捕捉すること。

レイヤー 1: マルチビューポートスクリーンショット

3つのブレークポイントでスクリーンショットを撮り、レスポンシブの問題を検出:

npx playwright screenshot --viewport-size=375,812 http://localhost:3000 impl-mobile.png
npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 impl-tablet.png
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 impl-desktop.png

チェック項目: テキストのはみ出し、レイアウトの崩れ、要素の重なり、コンテンツの非適応。

レイヤー 2: デザインシステム一貫性チェック

実装から実際のレンダリング値を抽出し、design.md と比較:

# 実際に使用されているフォントを抽出（ブラウザコンソールまたは Playwright で実行）
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# 使用されているカラーパレットを抽出
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])"

抽出した値を design.md のトークンと比較。差異をフラグ付け。

レイヤー 3: デザインとのピクセル差分

npx pixelmatch design.png impl-desktop.png diff.png 0.1

レイヤー 4: AI スロップ検出

実装に以下の10のAI生成パターン（gstack のブラックリストから）がないかチェック:

  1. デフォルトの紫/バイオレットグラデーション背景
  2. アイコン in 円 + タイトル + 説明の3列フィーチャーグリッド
  3. セクション装飾としての色付き円内アイコン
  4. すべてに text-align: center
  5. すべての要素に均一なバブリーな border-radius
  6. 装飾的なブロブ、波状の SVG 区切り線
  7. デザイン要素としての絵文字
  8. カードのカラー左ボーダー
  9. 汎用的なヒーローコピー（「Welcome to X」、「Unlock the power of...」）
  10. 型通りのセクションリズム（ヒーロー → フィーチャー → testimonials → プライシング → CTA）

3つ以上のパターンが検出された場合、「AI スロップリスク」としてフラグし、具体的な修正を提案。

レイヤー 5: AI ビジュアル差分

design.png と impl-desktop.png の両方を LLM に渡して比較。具体的に確認:

  • 階層は一致しているか？
  • 間隔の比率は維持されているか？
  • 欠落しているセクションや要素はないか？

リファインメントループ

検証後、反復:

  1. ユーザーにスクリーンショットと差分結果を表示
  2. ユーザーがフィードバックを提供
  3. ピンポイント編集を適用（ファイル全体を再生成しない）
  4. 再検証
  5. 「完了」まで繰り返す（最大10ラウンド）

design.md のヒント

  • テンプレート: Google 公式スキルリポジトリからエージェント最適化テンプレートを取得
  • 転送: design.md を任意のエージェント（Claude Code、Cursor）に渡して一貫したスタイリングを実現
  • 抽出: Google の「design MD スキル」を使用して、既存の Stitch プロジェクトから design.md を抽出
  • カスタム: 独自の design.md を色/フォント/テーマで作成し、Stitch のデザインシステムパネルに貼り付け

既知の問題

  1. API キー認証が動作しない — Stitch API は API キーを拒否。OAuth を使用する必要があります（2026年2月にコミュニティ確認済）
  2. doctor のフェッチタイムアウト — ネットワーク依存。直接 curl テストの方が信頼性が高い
  3. 請求は不要 — Stitch API は請求が有効になっていないプロジェクトでも動作
  4. 実験モードでは Figma エクスポート不可 — Figma エクスポートは標準モードのみ対応

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community