使い方ガイドへスキップ
create-design-md作者 Julien Thibeaut

Create Design MD スキル。

Claude Code と Codex 向けのブランド・デザインシステム作業用スキル:既存のプロダクトリポジトリや公開ウェブサイトから DESIGN.md を作成または更新します。

  • ブランドとデザインシステム
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
アップストリームファイルから 2026-09-14 に読み込まれた Front matter とセクション見出し · 全文 16,176 文字

01 できること

create-design-md Skillが Claude Code と Codex で行うこと

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

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

スキル自身の言葉で

既存のプロダクトを文書化された設計コントラクトに変換します。リポジトリモードでは、ローカルプロダクトのトークン、テーマ、共有プリミティブ、レンダリング済みルートを調査し、そのプロダクトのルートに DESIGN.md を書き出します。URL モードでは、DOM、算出スタイル、読み込まれたスタイルシートからデスクトップ幅とモバイル幅でドラフトを再構築します。

両モードは、role、value、source、scope、recurrence、confidence という1つのエビデンスパイプラインと、css-tailwind、json-tailwind、dtcg のいずれかのエクスポート対象を持つ1つのフラットなトークンスキーマを共有しています。値は、根拠となるソースが名指ししているか、三段階の証明ゲートを通過した場合のみ残り、lint とエクスポートが成功するまで文書はリリースされません。変更されるのは DESIGN.md のみです。

生成されるもの

  • URL モードで、現在のワークスペースに書き出される、ドラフトとして明示された再構築版 DESIGN.md ドラフトです。
  • モードと調査対象のプロダクトまたは URL、使用した根拠ソース、文書から除外された競合や根拠不十分な領域を列挙したレポートです。
  • 文書が返される前に両方成功する必要がある、最終的な lint とエクスポートの結果です。
プロンプト例を見る ↗

仕組み

  1. 01
    モードを選択する

    ローカルのプロダクトリポジトリが利用可能な場合はリポジトリモードを使用し、そのプロダクトのルートに DESIGN.md を書き出します。公開 URL のみが与えられている場合は URL モードを使用し、現在のワークスペースに再構築されたドラフトを生成します。

  2. 02
    エビデンスを収集し、出典を記録する

    各候補は、正規化される前にソース、スコープ、再現性とともに記録されるため、両モードは同じ記録パイプラインに流れ込みます。

  3. 03
    DESIGN.md スキーマへ正規化する

    不確実な候補、コントラクトのないローカルな候補、実装に関係のない候補は除外され、残りは正規のフラットなトークンスキーマへマッピングされます。

  4. 04
    検証を通過するまでドラフトをゲートする

    Markdown は、解析済みの frontmatter が形式チェックに合格した後にのみ書き出されるため、本文が先に書かれてから YAML に後付けされることはありません。

  5. 05
    Lint とエクスポート

    まず構造的な lint が実行され、次に選択したターゲットで1回の互換性エクスポートが行われます。データが入っているカテゴリはすべて出力に含まれる必要があります。

  6. 06
    モード、ソース、ギャップを報告する

    レポートには、モードと調査対象のプロダクトまたは URL、使用した根拠ソース、根拠不十分として省略した項目、そして lint とエクスポートの結果が記載されます。

02 適合性を確認

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

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

適している場合

  • インターフェースのデザイン言語を文書化し、コードベース内の現在のエビデンスからビジュアルシステムを再構築します。
  • タスクごとにデザインの決定を繰り返す代わりに、コーディングエージェントに永続的な UI コンテキストを提供します。
  • ソースが入手できない公開サイトで、DOM、算出スタイル、読み込まれた CSS から再構築したドラフトで問題ない場合。

境界を知る

  • 文書化された設計に合わせてプロダクトのソース、依存関係、設定を編集すること — 対象範囲は DESIGN.md ファイルのみです。
  • 稼働中のウェブサイトから内部のトークン名、コンポーネントの所有権、文書化されていない意図を読み取ること — URL のエビデンスではそれらを確定できません。
  • レンダリングされたブラウザでの検査を行わずに作業すること。コピーや HTML から推測する代わりに、スクリーンショットやソースファイルを要求する必要があります。
  • 発見したすべてのトークンやコンポーネントを書き出すこと — 網羅的な一覧作成は明確に対象外です。

提供すべきもの

  • 複数の製品がリポジトリに含まれる場合はどの製品かユーザーはドキュメント化するデプロイ対象の製品を指定する必要があります。所有権が不明確な場合、スキルは記述前に確認します。
  • 公開URLとレンダリングされたブラウザアクセスURLモードでは、デスクトップとモバイルの幅でDOM、計算済みスタイル、公開読み込みされたスタイルシートを検査します。スクリーンショットだけでは正確な値を特定できません。
  • デフォルト以外のエクスポート先(存在する場合)ユーザーが別のターゲットを指定しない限り、URL出力はデフォルトでcss-tailwindになります。トークン名はそのターゲットに対して有効である必要があります。

03 スキルの内部

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

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. ドキュメントのみを変更する

    リポジトリモードでは、製品ソース、依存関係、設定、生成ファイルを変更してはならず、偶発的な実装パターンをデザイン判断として扱ってはなりません。

  2. リポジトリの証拠を優先する

    ソースが利用可能な場合は常にリポジトリモードが選択されます。提供されたURLはレンダリングされた見た目を確認できますが、リポジトリの証拠を置き換えることはできません。

  3. 1つのスキーマ、マッピング形式のみ

    トークングループは常にマッピングであり、シーケンスにはなりません。両モードとも同じフラットなトークン名を使用し、第二のスキーマを導入してはなりません。

  4. 記述前にエクスポート先を選択する

    Tailwind v4ではcss-tailwind、Tailwind v3ではjson-tailwind、それ以外ではdtcgを使用します。トークン名は選択したターゲットに対して有効である必要があります。

  5. URLに関する主張のための3つの証拠

    URLモードでの主張には観察、根拠、結果が必要です。いずれかの証拠が欠けている場合、主張は推測せずに省略されます。

  6. regexで有効なトークン名のみを出力する

    出力されるすべてのトークン名は^[a-zA-Z0-9][a-zA-Z0-9-]*$に一致する必要があります。一致しないキーは拒否され、書き直されます。

  7. 単一のgroupレベルトークンを正規化する

    --radiusのような単一のソーストークンはrounded.baseになります。sm、md、lg、xlはユーティリティクラスや繰り返される値から導出されることはありません。

  8. 検証失敗時にはリリースしない

    lintまたはエクスポートが失敗している間、ドキュメントは返されません。また、値が入力されたカテゴリがエクスポートに存在しない場合はスキーマ失敗として扱われます。

04 実際に使う

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

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

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

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

skills/create-design-md/SKILL.md用の汎用skills CLI形式です。リポジトリが独自のパスをドキュメント化している場合があります。

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

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

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

  • 先に選択したターゲットで互換性エクスポートをちょうど1回実行し、出力を検査してください。
  • css-tailwindの場合、colorsが--color-に、familyが--font-に、sizeが--text-に、roundedが--radius-に、spacingが--spacing-にマッピングされていることを確認してください。値が入力されたtypographyブロックが--font-も--text-*も出力しない場合、ドキュメントは書き直す必要があります。
  • 保存前に、パース済みのフロントマターを読み返し、スカラーのtypography子要素や、基準となるソースに存在しないroundedキーを自己拒否してください。
  • 既存のドキュメントを更新する場合は、元の内容を一時的に保持し、新しいファイルとの差分を確認して、削除された承認済みの決定事項を復元してください。
  • テーマモードをエンコードする前にインストールされた仕様を確認し、モードがサポートされていない場合のみ Themes テーブルにフォールバックしてください。

OpenDesignではcreate-design-mdをSKILL.mdのリンクからインポートします:Plugins → Add → Skill → Import from link。その後、トップバーで選択してください。

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

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

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

Repository
github.com/ibelick/ui-skills ブランチ main
スキルファイル
skills/create-design-md/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 79081ab
License
MIT LICENSE より
リポジトリスター数
8,402 2026年9月14日に ibelick/ui-skills リポジトリ全体の GitHub スナップショットを取得。このリポジトリにはカタログに掲載された5つのスキルが含まれます。create-design-md の評価や利用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. 境界DESIGN.mdの変更のみを対象とし、競合するスキーマや発見したすべてのトークンのダンプは行いません。
  2. 1. モードを選ぶリポジトリモードとURLモードのどちらか、それぞれで何が証明できるか、先に確認すべきタイミング。
  3. 共有エビデンスパイプライン両モードが従うべき6段階の記録パイプラインと省略ゲート。
  4. 2. エビデンスを追跡するリポジトリの調査順序、URLのサンプリングリスト、証拠、エビデンス台帳。
  5. 3. 何を含めるか決めるスキーマの整形、エクスポート先の選択、テーマの扱い、記述で主張できる範囲。
  6. 4. ドキュメントを書く最小限のフロントマター、許可されたセクション順序、保存前に削除すべき内容。
  7. 5. 検証するLint、1回のエクスポート、カテゴリチェック、更新されたドキュメントの差分確認。
  8. 6. 報告する返すべき内容:モード、対象、ソース、省略事項、検証結果。
スキル自身による説明
「既存の製品リポジトリまたは公開ウェブサイトから DESIGN.md を作成または更新します。インターフェースのデザイン言語を文書化する、そのビジュアルシステムを再構築する、現在のエビデンスからデザイントークンとガイダンスを抽出する、またはコーディングエージェントに永続的な UI コンテキストを提供するよう求められた場合に使用します。製品ソースを変更したり、偶発的な実装パターンをデザイン決定として推進したりしないでください。」

SKILL.md からのフロントマター説明。完全なファイルは約16,176文字です。GitHub で完全なファイルを読む。

Create Design MD

実際のブランドと design-system 作業タスクで create-design-md を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから create-design-md をインポートして、上記のプロンプトを貼り付け、結果の前に計画を確認してください。

ターミナル
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応