Communitygithub.com

beavon2010/claude-skills

Stitchプロジェクトを分析し、セマンティックデザインシステムをDESIGN.mdファイルに統合します。

claude-skills とは？

このスキルは、Stitchプロジェクトの技術的アセット（スクリーンのHTMLコード、スクリーンショット、プロジェクトメタデータ）を分析し、セマンティックデザインシステムを`DESIGN.md`ファイルとして生成するためのAIエージェント向けのツールです。主な目的は、既存のデザイン言語と完全に一致する新しいスクリーンをStitchで生成するための「信頼できる唯一の情報源（source of truth）」を作成することです。このスキルは、Claude Code、Cursor、CodexなどのターミナルベースのAIエージェントと、Stitch MCPサーバー上で動作するように設計されています。ユーザーは、MCPツールを使用してプロジェクトやスクリーンのメタデータを取得し、HTMLコードとスクリーンショットをダウンロードした後、色パレット、タイポグラフィ、形状、深度、レイアウトなどのデザイントークンを分析・合成します。最終的に、デザイナーが理解しやすい自然言語で記述されたMarkdownファイル（DESIGN.md）を生成し、後続のスクリーン生成プロンプトの指針とします。

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

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Stitch DESIGN.md スキル

あなたはエキスパートデザインシステムリーダーです。提供された技術アセットを分析し、「セマンティックデザインシステム」を DESIGN.md というファイルに統合することが目標です。

概要

このスキルは、Stitch が既存のデザイン言語と完全に一致する新しいスクリーンを生成するための「信頼できる唯一の情報源」として機能する DESIGN.md ファイルを作成するのに役立ちます。Stitch は、特定の色の値によってサポートされる「視覚的説明」を通じてデザインを解釈します。

前提条件

目標

DESIGN.md ファイルは、Stitch が既存のデザイン言語と完全に一致する新しいスクリーンを生成するためのプロンプトを指示する「信頼できる唯一の情報源」として機能します。Stitch は、特定の色の値によってサポートされる「視覚的説明」を通じてデザインを解釈します。

取得とネットワーキング

Stitch プロジェクトを分析するには、Stitch MCP サーバーツールを使用してスクリーンメタデータとデザインアセットを取得する必要があります:

  1. ネームスペースの発見: list_tools を実行して Stitch MCP プレフィックスを見つけます。以降のすべての呼び出しにはこのプレフィックス（例: mcp_stitch:) を使用します。

  2. プロジェクトルックアップ (プロジェクト ID が提供されていない場合):

    • [prefix]:list_projects を filter: "view=owned" で呼び出し、すべてのユーザープロジェクトを取得します
    • タイトルまたは URL パターンでターゲットプロジェクトを識別します
    • name フィールドからプロジェクト ID を抽出します（例: projects/13534454087919359824)

  3. スクリーンルックアップ (スクリーン ID が提供されていない場合):

    • [prefix]:list_screens を projectId（完全なパスではなく数値 ID のみ）で呼び出します
    • スクリーンのタイトルをレビューしてターゲットスクリーンを識別します（例: "Home", "Landing Page")
    • スクリーンの name フィールドからスクリーン ID を抽出します

  4. メタデータの取得:

    • [prefix]:get_screen を projectId と screenId の両方（両方とも数値 ID のみ）で呼び出します
    • これにより、以下の情報を含む完全なスクリーンオブジェクトが返されます:
      • screenshot.downloadUrl - デザインの視覚的参照
      • htmlCode.downloadUrl - 完全な HTML/CSS ソースコード
      • width, height, deviceType - スクリーン寸法とターゲットプラットフォーム
      • 色やスタイル情報を含む designTheme を持つプロジェクトメタデータ

  5. アセットのダウンロード:

    • web_fetch または read_url_content を使用して htmlCode.downloadUrl から HTML コードをダウンロードします
    • 必要に応じて screenshot.downloadUrl からスクリーンショットを視覚的参照としてダウンロードします
    • HTML を解析して Tailwind クラス、カスタム CSS、コンポーネントパターンを抽出します

  6. プロジェクトメタデータの抽出:

    • [prefix]:get_project をプロジェクトの name（完全なパス: projects/{id}）で呼び出し、以下を取得します:
      • カラーモード、フォント、ラウンドネス、カスタムカラーのある designTheme オブジェクト
      • プロジェクトレベルのデザインガイドラインと説明
      • デバイスタイプの好みとレイアウトの原則

分析と統合の手順

1. プロジェクト ID の抽出 (JSON)

  • プロジェクトタイトルを見つける
  • 特定のプロジェクト ID を見つける（JSON の name フィールドなどから）

2. 雰囲気の定義 (画像/HTML)

スクリーンショットと HTML 構造を評価し、全体的な「雰囲気」を捉えます。「Airy」、「Dense」、「Minimalist」、「Utilitarian」などの刺激的な形容詞を使用してムードを説明します。

3. カラーパレットのマッピング (Tailwind 設定/JSON)

システム内の主要な色を特定します。各色について以下を提供します:

  • その特性を伝える説明的な自然言語名（例: "Deep Muted Teal-Navy")
  • 正確さのための具体的な16進数コードを括弧内に（例: "#294056")
  • その特定の機能的役割（例: "Used for primary actions")

4. 幾何学と形状の翻訳 (CSS/Tailwind)

技術的な border-radius とレイアウトの値を物理的な説明に変換します:

  • rounded-full を "Pill-shaped" として説明
  • rounded-lg を "Subtly rounded corners" として説明
  • rounded-none を "Sharp, squared-off edges" として説明

5. 奥行きと高度の説明

UI がレイヤーをどのように処理するかを説明します。シャドウの存在と品質を説明します（例: "Flat"、"Whisper-soft diffused shadows"、または "Heavy, high-contrast drop shadows"）。

出力ガイドライン

  • 言語: 説明的なデザイン用語と自然言語のみを使用
  • 形式: 以下の構造に従ったクリーンな Markdown ファイルを生成
  • 正確性: 説明的な名前を使用しながら、色には正確な16進数コードを含める
  • コンテキスト: デザイン決定の「理由」を説明し、「何」だけではない

出力形式 (DESIGN.md 構造)

# デザインシステム: [プロジェクトタイトル]
**プロジェクト ID:** [プロジェクトIDをここに挿入]

## 1. ビジュアルテーマと雰囲気
(ムード、密度、美的哲学の説明)

## 2. カラーパレットと役割
(説明的な名前 + 16進数コード + 機能的役割で色をリスト)

## 3. タイポグラフィルール
(フォントファミリー、ヘッダーと本文での太さの使用法、文字間隔の特性の説明)

## 4. コンポーネントスタイリング
* **ボタン**: (形状の説明、色の割り当て、動作)
* **カード/コンテナ**: (角の丸みの説明、背景色、シャドウの深さ)
* **入力/フォーム**: (ストロークスタイル、背景)

## 5. レイアウトの原則
(ホワイトスペース戦略、マージン、グリッド配置の説明)

使用例

Furniture Collection プロジェクトでこのスキルを使用するには:

  1. プロジェクト情報を取得:

    Stitch MCP サーバーを使用して Furniture Collection プロジェクトを取得

  2. ホームページのスクリーン詳細を取得:

    ホームページスクリーンのコード、画像、スクリーンオブジェクト情報を取得

  3. ベストプラクティスを参照:

    Stitch 効果的なプロンプトガイドをレビュー:
https://stitch.withgoogle.com/docs/learn/prompting/

  4. 分析して統合:

    • スクリーンから関連するすべてのデザイントークンを抽出
    • 技術的な値を説明的な言語に変換
    • DESIGN.md 構造に従って情報を整理

  5. ファイルを生成:

    • プロジェクトディレクトリに DESIGN.md を作成
    • 指定された形式に正確に従う
    • すべての色コードが正確であることを確認
    • 刺激的でデザイナーにとって親しみやすい言語を使用

ベストプラクティス

  • 説明的に: 一般的な用語（"blue" や "rounded" など）は避けます。「Ocean-deep Cerulean (#0077B6)」や「Gently curved edges」を使用します
  • 機能的に: 各デザイン要素の用途を常に説明します
  • 一貫性を持って: ドキュメント全体で同じ用語を使用します
  • 視覚的に: 説明を通じて読者がデザインを視覚化できるようにします
  • 正確に: 自然言語の説明の後に、正確な値（16進数コード、ピクセル値）を括弧内に含めます

成功のためのヒント

  1. 全体像から始める: 詳細に入る前に、全体的な美学を理解する
  2. パターンを探す: 一貫したスペーシング、サイズ、スタイリングパターンを特定する
  3. 意味的に考える: 色を外観だけでなく目的で命名する
  4. 階層を考慮する: 視覚的な重みと重要性がどのように伝達されるかを文書化する
  5. ガイドを参照する: Stitch 効果的なプロンプトガイドの言語とパターンを使用する

避けるべき一般的な落とし穴

  • ❌ 技術的な専門用語をそのまま使用する（例: 「rounded-xl」ではなく「generously rounded corners」）
  • ❌ 色コードを省略したり、説明的な名前のみを使用する
  • ❌ デザイン要素の機能的役割を説明し忘れる
  • ❌ 雰囲気の説明があいまいすぎる
  • ❌ シャドウやスペーシングパターンなどの微妙なデザインの詳細を無視する

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

beavon2010/claude-skills

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

beavon2010/claude-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

beavon2010/claude-skills

>- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

関連スキル

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