mcpField
U
use-design-md

use-design-md

github.com/caesiumyデザイン・UI67236 回インストール今日更新
リポジトリ

use-design-md について

use-design-md は、カタログ掲載の韓国ブランドの DESIGN.md を UI 設計ブリーフとして使うスキルです。完全な内容を取得・確認してからプロジェクトの変更を導き、仕様の創作を避けます。

主な機能

  1. 01カタログからブランド項目を検索
  2. 02デザイン文書全体を取得
  3. 03設計ルールを UI 作業に適用
  4. 04既知の不足点と制約を確認
  5. 05完了前に変更を検証

活用シーン

  1. 01掲載ブランドのデザインを UI に適用
  2. 02実装前にブランドのデザインシステムを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/caesiumy/ko-design-md --skill use-design-md

インストール後、Claude Code で/use-design-mdを入力して読み込まれたか確認します。

同梱ファイルreferences/apply-guide.mdreferences/endpoints.md

詳細

use-design-md — ko/design.md カタログ用のコンシューマースキル

ko-design-md カタログ(https://www.getdesign.kr)では、韓国のブランドごとに DESIGN.md を公開しています。内容は OKLCH の色、タイポグラフィ、余白、角丸、コンポーネント、推奨事項と禁止事項です。このスキルは適切なエントリーを取得し、現在のプロジェクトで UI 作業を行う際のデザインブリーフとして使用します。名前で呼び出す場合は、/use-design-md(skills.sh)または /ko-design-md:use-design-md(Claude Code プラグインマーケットプレイス)です。

取得 — ファイル、失敗、ドキュメント全体

カタログのすべての取得(インデックス、エントリー、トークンサイドカー、GitHub raw フォールバック)には、次のルールが適用されます。レスポンス本文をバイト単位でそのままファイルに書き込む curl で取得してください。ページをモデルに渡すウェブ閲覧ツール(Claude Code の WebFetch など)は要約し、正確な値(OKLCH の 3 つ組、13px の刻みなど)を落としてしまうため、シェルがまったく使えない場合に限り使用してください。

  1. ターミナルに出力せず、ファイルに保存します。 エントリーは数十キロバイトに及び、シェルツールが返す出力には上限(Claude Code では約 30,000 文字)があり、後半(コンポーネント、推奨事項と禁止事項、既知の不足点)が黙って切り捨てられます。ユーザーごとのキャッシュ "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/" にダウンロードしてください(ユーザーのプロジェクト内でも、共有の /tmp 内でもありません)。--create-dirs がディレクトリを作成するため、各取得は単純な curl コマンド 1 つで済みます(mkdir …; curl … のような複合コマンドは、curl のみ実行が許可されている環境では拒否されます)。
  2. HTTP エラーを失敗として扱います。 curl -fsSL --create-dirs -o <file> <url> を使用してください。-f を付けると、404/5xx はゼロ以外の終了コードになります。これを付けない場合、見つからないスラッグに対する 1 行の Not found: <slug> という本文が、ドキュメントであるかのように返されます。ゼロ以外の終了コードが返った場合、ファイルは取得できていません。ディスク上にあるファイルは古いものか、途中までのものかもしれないため、読み取らないでください。
  3. ファイルの最後まで読み取ります。 サイズ(wc -lc <file>)を確認してから、ファイル読み取りツールで読み取ってください。そのツールも 1 回の読み取りに上限がある場合があるため、1 回で最後まで読めなければ、残りを分割して読み取ります(Claude Code では offset/limit を使用)。wc -l が報告した最後の行番号まで確認できれば完了です。ファイル読み取りツールがシェルの出力とは異なるパス形式を必要とする場合は、形式を変換してください(Windows の Git Bash では cygpath -w <file>)。

このスキルが参照する references/ ファイルは、スキルと同じ場所にあります。このファイルしかない場合(たとえば getdesign.kr の /.well-known/agent-skills/ から読み込まれた場合)は、同じ方法で https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/.claude/skills/use-design-md/references/<name>.md から取得してください。

Step 1 — 発見:ブランドをスラッグに解決する

curl -fsSL --create-dirs -o "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/index.txt" https://www.getdesign.kr/llms.txt

これに失敗した場合、インデックスを取得できていません。これは該当なしではありません。references/endpoints.md にあるインデックスのフォールバックを使用してください。それらも失敗した場合は、カタログにアクセスできなかったことをユーザーに伝えてください。ブランドが見つからないとは報告しないでください。

各エントリーの行は次のようになっています。

- [당근](https://www.getdesign.kr/services/seed-design/llms.txt): community · SEED Design — <tagline>

デザインシステム名を公開しているエントリーは、上記のようにカテゴリの後にその名前が記載されます。公開していないエントリーにはカテゴリのみが記載されます(: finance — <tagline>)。ユーザーの言及と、リンクテキスト(名前)、デザインシステム名、URL 内のスラッグを照合してください。ほとんどの名前は韓国語で、一部のスラッグはデザインシステム名です(당근 → seed-design、구름 → vapor-ui)。そのため、英語のブランド名はまず韓国語名に変換してください(Karrot → 당근)。

  • 明確に一致するものが 1 件 → Step 2。
  • 一致する可能性が複数ある → どれを指しているのかユーザーに尋ねてください(Claude Code では AskUserQuestion)。
  • 一致するものがない → そのブランドはカタログにないことを明確にユーザーに伝え、必要に応じて最も近いカテゴリのカタログ掲載ブランドをいくつか挙げてください。また、追加は design-md スキルの役割であることを伝えてください(「対象範囲のガードレール」を参照)。

Step 2 — DESIGN.md を取得する

curl -fsSL --create-dirs -o "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/<slug>.md" https://www.getdesign.kr/services/<slug>/llms.txt
  • 404 → カタログにスラッグがありません。別のスラッグを推測せず、一致なしの手順に進んでください。
  • その他のエラー(ネットワーク、5xx、403/429)は、カタログについて何も示しません。references/endpoints.md にある GitHub raw のフォールバックを試してください。それも失敗した場合は、エントリーを取得できなかったことをユーザーに伝えてください。ブランドが見つからないと報告してはいけません。

適用する前に、最終行まで読んでください。文章には、トークンだけではわからない意図(すべきこととすべきでないこと、既知の不足点)が記されています。プログラムでテーマを生成するなど、構造化データとしてトークンが必要な場合は、同じ方法で JSON サイドカーを取得してください。これは getdesign.kr ではなく GitHub raw にあります(references/endpoints.md §3)。

Step 3 — 現在のプロジェクトに適用する

編集を始める前に、references/apply-guide.md を読んで指示に従ってください。省略できない項目が3つあります。まずエントリーの既知の不足点を確認し(apply-guide §2)、すべきこととすべきでないことを厳守し、完了とする前に結果を検証してください(apply-guide §5)。

適用範囲に関するガードレール

  • 現在のリポジトリを条件にしてはいけません。このスキルはどこでも実行できます。
  • カタログエントリーの追加または編集は、ko-design-md リポジトリ内で design-md producer スキルが行います。そこで作業を止め、ユーザーに案内してください。
  • デザインをでっち上げてはいけません。 一覧にないブランドはここでは利用できません。ブランド向けの DESIGN.md を作成したり、記憶を頼りに近似したりせず、その旨を伝えてください。一覧にあるブランドでも、その DESIGN.md に記載されていない値をでっち上げてはいけません。拡張案を提示する場合は、ブランドの仕様ではなく、あなたの推測であることを明示してください。
  • ブランドのトーンだけを求めるページ(「토스 앱처럼 깔끔한 퀴즈」)向けに読み込まれた場合でも、記憶を頼りにブランドを近似せず、エントリーを取得してください。
  • ベンダー中立性を保ってください。 生成する UI にソースの名前(ブランドまたはデザインシステム)を含めないでください(references/apply-guide.md §6)。

コメント