使い方ガイドへスキップ
design-system作者 Anthropic

Design System スキル。

Claude Code と Codex 用のブランド・デザインシステムスキル:既存のデザインシステムの監査、文書化、拡張を行います。

  • ブランドとデザインシステム
  • デザインシステム
anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document
2026年9月14日にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全5,552文字

01 できること

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

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

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

スキル自身の言葉で

既存のデザインシステムに対して、監査・文書化・拡張の3つのモードで作業するスラッシュコマンドのスキルです。監査パスでは命名の一貫性、トークンのカバレッジ、コンポーネントの完成度を報告し、システムを100点満点で評価します。文書化モードでは、説明、バリアント、プロパティ、状態、アクセシビリティ、推奨事項と非推奨事項を含むコンポーネント仕様を作成します。

拡張モードでは、システムの既存コンポーネントに対して新しいコンポーネントまたはパターンを提案し、使用予定のトークンと生じる未解決の課題を列挙します。デザイントークン、コンポーネント、パターンを対象とし、デザインツールやナレッジベースが接続されている場合はそこにアクセスすることもできます。想定読者は、システムの一貫性を保つデザイナーと開発者です。

生成されるもの

  • 優先度付きのアクションで終わるデザインシステムの監査レポート
  • プロパティ、型、デフォルト値、説明のプロパティ表を含むコンポーネントドキュメント
  • 解決する課題から始まる新しいコンポーネントの提案
プロンプト例を見る ↗

仕組み

  1. 01
    引数からモードを選択する

    このコマンドは、モードとターゲットを指定して実行します。システム全体を監査するか、単一のコンポーネントまたはパターンを文書化モードや拡張モードで処理します。

  2. 02
    3つの軸で監査を実行する

    監査では、命名の一貫性、ハードコードされた値に対するトークンのカバレッジ、各コンポーネントの完成度を確認し、優先すべきアクションを示します。

  3. 03
    コンポーネント仕様を作成する

    文書化モードでは、説明、型とデフォルト値を含むバリアントとプロパティ、状態、アクセシビリティ、推奨事項と非推奨事項の表というテンプレートを埋めます。

  4. 04
    既存のものに対して拡張を提案する

    拡張モードでは、新しいアイデアを関連コンポーネントと比較し、APIとバリアント、状態、そのコンポーネントが使用する正確なトークンを提案します。

  5. 05
    接続されたツールがある場合はそこから取得する

    デザインツールが接続されている場合、このスキルはドキュメント作成のためにコンポーネントのプロパティとレイヤー構造を取得し、Figma内で命名、バリアント、トークンの使用状況を確認できます。

02 適合性を確認

design-system Skill を使用するタイミング

この種のブランドおよびデザインシステムの作業では、Claude Code または Codex で design-system スキルを使用してください。以下の適合性と制限は、スキル自身のファイルから引用しています。

適している場合

  • コンポーネント全体で命名の不整合やハードコードされた値が混入していないか気になっています。
  • 1つのコンポーネントについて、バリアント、状態、アクセシビリティに関する注記を含むドキュメントが必要です。
  • 新しいコンポーネントやパターンを設計しており、既存のシステムに適合させたいと考えています。
  • 既に文書化されている内容を確認してから追加を書くよう、接続されたナレッジベースを使ってスキルに確認させたい場合。

境界を知る

  • システムが既に提供しているものを複製する単発のコンポーネントは、システムを持つ意味を損ないます。
  • 拡張提案は難しい判断を決着させません。デザインレビューがまだ必要な状態で終わることもあります。
  • Figma から直接コンポーネントを読み取れるのは、デザインツールコネクタが利用可能な場合のみです。

提供すべきもの

  • モードとその対象コマンドにモードと、それが適用されるコンポーネント、パターンまたはシステムを指定してください。これによりスキルはどのテンプレートを埋めるべきかを把握します。
  • 比較対象となる既存のコンポーネント拡張提案は関連するコンポーネント同士を、共通点とそれが十分でない理由の観点で比較するため、それらの近縁コンポーネントを把握しておく必要があります。

03 スキルの内部

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

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

  1. 命名基準に対する命名のズレを報告する

    命名の不整合は単に指摘されるだけではありません。各行には関係するコンポーネントと採用すべき基準が明記されます。

  2. ハードコードされた値を目視ではなく数える

    トークンのカバレッジは、定義された数と実際に検出されたインスタンス数(ハードコードされた16進値、任意の間隔値、カスタムフォントやサイズなど)を対比させます。

  3. すべてを文書化する

    コンポーネント、バリアント、ルールが書き留められていない場合、スキルはそれが存在しないものとして扱います。

  4. 制約の中で柔軟性を保つ

    コンポーネントは硬直的ではなく組み合わせ可能であることを意図しているため、パターン集は放棄されることなくしなやかに変化します。

  5. 破壊的変更にバージョンを付ける

    破壊的変更には、単なる置き換えコンポーネントではなく、移行パスが伴わなければなりません。

  6. 監査から始める

    デフォルトの入口は、何かを文書化したり拡張したりする前に、システムの現状を把握する監査です。

  7. カバレッジは完璧さに勝る

    コンポーネントの80%が文書化されている状態は、10個のコンポーネントを完璧に仕上げるよりも良いとされます。

04 実際に使う

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

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

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

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

design/skills/design-system/SKILL.md用の汎用的なskills CLI形式です。リポジトリによっては独自のパスが文書化されている場合があります。

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

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

Starter prompt
Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

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

最初の結果を確認

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

  • 監査サマリーを確認してください。レビューされたコンポーネント、発見された問題、100点満点のスコアが含まれます。
  • コンポーネントごとの完全性テーブルを確認してください。状態、バリアント、ドキュメントは個別にマークされ、採点されます。
  • 文書化されたコンポーネントについて、アクセシビリティのブロックが記入されていることを確認してください。
  • 拡張機能では、レビューに出す前に、状態テーブルがデフォルト・ホバー・無効化の各挙動を網羅しているか確認します。

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

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

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

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

Author
Anthropic
スキルファイル
design/skills/design-system/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット 8f877b6
License
Apache-2.0 LICENSE より。
リポジトリスター数
24,012 このカタログに含まれる7つのスキルを含む anthropics/knowledge-work-plugins リポジトリ全体の GitHub スナップショットを2026年9月14日に取得しました。design-system の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. 使用方法3つの呼び出し形式:システムを監査する、コンポーネントを文書化する、パターンを拡張する。
  2. デザインシステムの構成要素デザイントークン、コンポーネント、パターンを、そのサブパーツ、状態、ARIAに関する考慮事項とともに定義します。
  3. 原則創造性よりも一貫性、制約内での柔軟性、すべてを文書化すること、バージョン管理と移行。
  4. 出力 — 監査監査テンプレート:サマリースコア、命名の一貫性、トークンのカバー範囲、完全性、優先対応事項。
  5. 出力 — 文書化コンポーネントテンプレート:説明、バリアント、プロパティ、状態、アクセシビリティ、推奨事項と非推奨事項、コード例。
  6. 出力 — 拡張新規コンポーネントテンプレート:課題、関連パターン、API、バリアント、状態、トークン、未解決の論点。
  7. コネクタが利用可能な場合監査、文書化、公開のためのオプションのデザインツールおよびナレッジベース手順。
  8. ヒントまず監査から始め、構築しながら文書化し、完璧さよりも網羅性を重視します。
スキル自身による説明
「デザインシステムを監査、文書化、または拡張します。コンポーネント全体で命名の不一致やハードコードされた値をチェックする場合、コンポーネントのバリエーション、状態、アクセシビリティノートを文書化する場合、または既存システムに適合する新しいパターンを設計する場合に使用してください。」

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

06 インストールする前に

design-system Skillについてのご質問

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

文書化された内容は実際どこに保存されるのですか?

作業内容は会話の中でMarkdownテンプレートとして返されます。ナレッジベースが接続されている場合は、更新後の文書をWikiに公開することもできます。

完全に新しいものをデザインするために使うことはできますか?

拡張モードは、すでにあるシステムに合う新しいコンポーネントやパターンのためのものです。課題と既存パターンのギャップから出発し、API、バリアント、状態、トークンを提案し、最後にデザインレビューが必要な決定事項や境界条件を示して締めます。

異なるモードはどのように呼び出しますか?

モードと対象を指定してスラッシュコマンドを入力します。監査はシステム全体に対して実行され、文書化と拡張は特定のコンポーネントやパターンを対象とします。たとえば追加したいパターンに対しては拡張フォームを使います。

Design System

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

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

ターミナル
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

OpenDesign デスクトップ版

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

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

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

macOS と Windows に対応