83.3K+ダウンロード
使い方ガイドへスキップ
design-md作者 Google Labs

Design MD スキル。

ブランドおよびデザインシステム作業のための Claude Code と Codex スキル：Stitch プロジェクトを分析し、セマンティックな DESIGN.md を作成します。

  • ブランドとデザインシステム
  • DESIGN.md
OpenDesign をダウンロード使い方ガイドを見る
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全7,644文字

01 できること

Claude CodeおよびCodexにおけるdesign-md Skillの動作内容

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、既存のStitchプロジェクトを、同じデザイン言語で新しい画面を生成するようStitchにプロンプトを与える際の正となるDESIGN.mdに変換します。Stitch MCPアクセスを持ち、少なくとも1つの設計済み画面を持つデザイナーおよび開発者向けです。このスキルはMCP名前空間を発見し、プロジェクトIDと画面IDを解決し、画面オブジェクトとそのHTMLおよびスクリーンショットを取得し、プロジェクトのdesignThemeを読み取ります。

その後、視覚的なテーマと雰囲気、機能的な役割を持つ16進コード付きの説明的な名称としての色、タイポグラフィ、コンポーネントのスタイリングとレイアウトの原則を、生の技術的な値ではなく、感覚的なデザイン言語で文書化します。

生成されるもの

  • 視覚的なテーマと雰囲気、役割を伴うカラーパレット、タイポグラフィのルール、ボタン・カード・入力欄のコンポーネントスタイリング、そしてレイアウトの原則をカバーする5部構成のデザインシステムです。
プロンプト例を見る ↗

仕組み

  1. 01
    MCP名前空間を発見する

    list_toolsを実行してStitch MCPのプレフィックスを見つけ、以降のすべてのサーバー呼び出しでそのプレフィックスを再利用します。

  2. 02
    プロジェクトと画面を解決する

    プロジェクトIDが指定されていない場合は所有プロジェクトを一覧表示し、その後数値のプロジェクトIDに対する画面を一覧表示し、HomeやLanding Pageのような画面タイトルと照合します。

  3. 03
    画面オブジェクトとアセットを取得する

    get_screenはスクリーンショットとHTMLのダウンロードURL、画面寸法、デバイスタイプ、designThemeを返します。その後HTMLがダウンロードされ、Tailwindクラスとコンポーネントパターンが解析されます。

  4. 04
    プロジェクトレベルのDesign Themeを読み取る

    projects/{id}の完全パスを指定したget_project呼び出しは、カラーモード、フォント、角丸、カスタムカラーを含むdesignThemeオブジェクトを返します。

  5. 05
    セマンティックシステムを合成する

    画面からデザイントークンを抽出し、印象的な形容詞で全体の雰囲気を捉え、技術的な値を説明的な言葉に翻訳します。

  6. 06
    DESIGN.mdを書く

    プロジェクトディレクトリに、規定された5セクション形式に厳密に従ってDESIGN.mdを作成します。

02 適合性を確認

design-md スキルを使用するタイミング

この種のブランドおよびデザインシステム作業には、Claude Code または Codex で design-md スキルを使用します。適合性と制限事項は、スキル自体のファイルから取得されています。

適している場合

  • 少なくとも1つの設計済み画面を含むStitchプロジェクトを既に持っていて、そこから書き起こされたデザインシステムを抽出したい場合。
  • 既存のデザイン言語に一致する新しい画面をStitchに生成させるためのプロンプトに使える、信頼できる情報源が欲しい場合。
  • プロジェクトをタイトルまたはURLでしか把握しておらず、所有プロジェクトからProject IDを見つけてほしい場合。
  • CSSの単なる言い換えではなく、印象的な形容詞でムードに名前を付けてほしい場合。

境界を知る

  • Stitch MCP Serverと、既に設計済み画面を持つStitchプロジェクトがなければ実行できません。
  • これはMarkdownのデザインシステムを生成するものであり、新しい画面を生成するものではありません。DESIGN.mdは後のStitchプロンプティングの入力になります。
  • rounded-xlのような未翻訳の技術用語は、避けるべき失敗例として明示的に挙げられています。
  • 16進コードを省略し、説明的な色名だけを残すことは失敗として指摘されています。

提供すべきもの

  • Project ID（任意）指定されない場合、スキルは所有プロジェクトを一覧化し、タイトルまたはURLパターンで対象を照合します。
  • Screen ID（任意）指定されない場合、スキルは画面タイトルを確認して対象画面を特定します。
  • Stitch Effective Prompting Guideデザイン記述に使うべき言葉遣いとパターンの参照資料です。

03 スキルの内部

design-mdスキルがClaude CodeとCodexに与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. 数値IDのみ

    projectIdとscreenIdは数値IDとして渡し、完全なprojects/{id}パスは使用しません。ただしget_projectは完全な名前を受け取ります。

  2. 色を単独で示さない

    すべての色には、説明的な自然言語の名前、括弧内の正確な16進コード、そしてその機能的役割を付与します。例：主要アクションに使用されるDeep Muted Teal-Navy（#294056）。

  3. ジオメトリは翻訳し、そのまま引用しない

    border-radiusやレイアウトの値を物理的な説明に変換します：rounded-fullはPill-shaped、rounded-lgはSubtly rounded corners、rounded-noneはSharp, squared-off edgesになります。

  4. 汎用的な語彙を禁止する

    blueやroundedのような用語は避け、Ocean-deep Cerulean (#0077B6)やGently curved edgesのような表現を優先します。

  5. 定められた構造を保持する

    ファイルはプロジェクトのタイトルとProject IDで始まり、続いて番号付きの5つのセクション（Visual Theme & Atmosphere、Color Palette & Roles、Typography Rules、Component Stylings、Layout Principles）が続きます。

  6. 「何を」だけでなく「なぜ」を説明する

    説明的な表現の後に括弧で正確な値を記載し、各デザイン要素が何のために使われるかを必ず明記します。

  7. 用語の一貫性を保つ

    ドキュメント全体で同じ用語を使用し、デザインシステムが1つのシステムとして読めるようにします。

04 実際に使う

Claude Code または Codex に design-md をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはお使いのエージェントに design-md を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md

plugins/stitch-utilities/skills/design-md/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスを記載している場合があります。

最初のブランドおよびデザインシステムの作業タスクをスキルに与える

このプロンプトを独自のコンテンツと制約に合わせて調整し、Claude Code または Codex で実行してください。

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

出典：SKILL.mdの例（原文のまま）。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • フォーマットが即興のレイアウトではなく、定められたDESIGN.mdの構造と正確に一致しているか確認してください。
  • すべてのカラーコードが正確であり、各色が説明的な名前と16進数値の両方を保持しているか確認してください。
  • 各要素の見た目だけでなく、機能的な役割が明記されているか確認してください。
  • 雰囲気に関するセクションが曖昧でなく具体的であり、シャドウや余白が省略されていないか確認してください。

OpenDesignではdesign-mdがバンドルされています：上部バーのPlugins → Skillsから選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
スキルファイル
plugins/stitch-utilities/skills/design-md/SKILL.md 検証時にコンテンツチェックサムを記録、commit 0337446
License
Apache-2.0 LICENSE より。
リポジトリスター数
8,304 2026年9月14日に取得した google-labs-code/stitch-skills リポジトリ全体の GitHub スナップショット。このカタログには12のスキルが含まれています。design-md の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. 概要DESIGN.mdを、新しいStitchの画面をプロンプトする際の信頼できる情報源として定義します。
  2. 前提条件Stitch MCPへのアクセス、デザイン済みの画面、そしてプロンプトガイドが必要です。
  3. 目的Stitchは、具体的な色の値に支えられた視覚的な説明を読み取ることを再確認します。
  4. 取得とネットワーキング6つのステップ：namespace、project、screen、metadata、asset download、project designTheme。
  5. 分析と統合の指示アイデンティティ、雰囲気、カラーパレット、ジオメトリ、エレベーションを抽出します。
  6. 出力ガイドライン説明的な言葉のみを使用し、整ったMarkdown、正確な16進コード、そして理由を説明します。
  7. 出力フォーマット（DESIGN.mdの構造）そのまま記入するための、テンプレート化された5セクションのMarkdown骨格です。
  8. 使用例Furniture Collectionプロジェクトとそのホームページを使った実例解説です。
  9. ベストプラクティス説明的で、機能的、一貫性があり、視覚的かつ正確であること。
  10. 成功のためのヒントまず全体像を把握し、パターンを見つけ、意味に基づいて命名し、階層を文書化します。
  11. 避けるべき一般的な落とし穴未翻訳の専門用語、コードの欠落、曖昧または不完全な説明がないようにします。
スキル自身による説明
「Stitch プロジェクトを分析し、セマンティックなデザインシステムを DESIGN.md ファイルに統合します」

SKILL.md からの front-matter の説明です。完全なファイルは約7,644文字です。GitHub で完全なファイルを読む。

06 インストールする前に

design-mdスキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルはStitchに到達するためにどのツールを使用しますか？

stitchツール群に加えて、Read、Write、web_fetchを宣言しています。実際にはまずlist_toolsを実行してMCPプレフィックスを見つけ、そのプレフィックスを使ってlist_projects、list_screens、get_screen、get_projectを呼び出します。

最終的に何が得られますか？

プロジェクトディレクトリに作成されるDESIGN.mdファイルで、プロジェクトのタイトルとIDに続き、ビジュアルテーマと雰囲気、カラーパレットと役割、タイポグラフィのルール、コンポーネントのスタイリング、レイアウトの原則のセクションで構成されています。これは、新しい画面をStitchにプロンプトする際の信頼できる情報源として再利用することを目的としています。

これは手作業での作業を置き換えるものですか？

抽出とドラフト作成を代わりに行いますが、特定の語彙要件があります。色には印象的な名前と正確な16進コード、機能的な役割を付け、角丸の値はクラス名そのままではなく「Pill-shaped」や「Sharp, squared-off edges」のようなフレーズになります。また、各決定の背後にある理由の説明も求められます。

Design MD

実際のブランドおよびデザインシステム作業タスクで design-md を実行します。

design-md スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md