Claude Skillsは「マークダウン1枚を置くだけ」で専門知識をAIに教えられる仕組みです。 ただ、いざ書こうとすると「何を、どの粒度で書けば実務に効くのか」で手が止まります。 その問いに237個の実例で答えるのが、今回のdesigner-skillsです。
30秒で理解する designer-skills
・Owl-Listener（MC Dean）氏が公開したClaude Code／Gemini CLI向けのデザインスキル集。MITライセンスで1500★超
・中核のdesign-practiceコレクションは9プラグイン・91スキル・28コマンド。5コレクション全体では237スキル・88コマンド・33プラグイン
・「スキル＝名詞（専門知識）」「コマンド＝動詞（ワークフロー）」という設計。color-systemやvisual-hierarchyなど、デザイン判断を1枚ずつSKILL.mdに明文化している
・/plugin marketplace add Owl-Listener/designer-skills の一行で導入。デザイナー以外にもフロントエンド実装者・SKILL.md自作の教材として効く
Claude Skills自体の仕組み（SKILL.mdのfrontmatter全フィールド・4スコープ・自動呼び出し）は Claude Skillsを徹底解説｜スキルはフォルダ——Anthropicエンジニアが明かした仕組みと使い方 で詳しく扱っています。本記事は、その仕組みの上に積まれた具体的なスキル集としてdesigner-skillsを読み解きます。
designer-skillsとは何か——デザイン知識をSKILL.mdに落とした実例集
designer-skillsは、MC Dean氏（GitHubでは Owl-Listener）が公開したデザイン向けのClaude Skillsコレクションです。リポジトリの説明文は「Design skills for the agent era, written so an AI agent can actually use them（エージェント時代のためのデザインスキル。AIエージェントが実際に使えるように書かれている）」。2026年3月の公開後、わずか3か月で1500を超えるスターを集めています。
このプロジェクトが面白いのは、デザインの「暗黙知」を明示的なテキストに変換している点です。READMEはプロジェクトの哲学を次のように説明します。
「what a thing is for, when to use it, and what to never do. Taste, made legible.（それが何のためにあり、いつ使い、何を絶対にしてはいけないか。センスを、読める形に）」
つまりdesigner-skillsは、デザイナーの頭の中にある判断基準——「この余白は8の倍数で」「コントラスト比は4.5:1以上」「色だけで意味を伝えない」——を、AIエージェントが読んで実行できる粒度のSKILL.mdに分解したものです。Claude Skillsの本質が「フォルダにマークダウンを置くこと」であるなら、designer-skillsは「では実際に何を書くか」の巨大なサンプル集にあたります。
ライセンスはMITで、商用利用・改変・フォークが自由です。作者はSubstack「MC Percolates」でデザインとAIに関する発信を続けており、designer-skillsはその実践成果として公開されています。なお名前が似ていますが、Anthropic公式のスキル集は別リポジトリの anthropics/skills であり、designer-skillsはサードパーティ製である点に注意してください。フォーマットは公式のClaude Skills仕様（SKILL.md + YAML frontmatter）に完全準拠しています。
スキルは「名詞」、コマンドは「動詞」
designer-skillsを理解する鍵は、リポジトリが明示する2つの概念です。
・スキル（Skills）は名詞 — デザイントークン、認知負荷、近接の法則といった「個別の専門知識ユニット」。1つのトピックをClaudeに教える
・コマンド（Commands）は動詞 — 複数のスキルを連鎖させ、デザインシステム監査やユーザビリティテストのような「一連の作業」を完了させるワークフロー
この区別はClaude Skillsの設計思想そのものです。Anthropic社内でも数百のスキルが動いているという話は ClaudeチームThariqが明かしたSkills設計9カテゴリ｜Anthropic社内で数百個動かす実践則 で詳しく紹介しましたが、designer-skillsはその「数百スキル運用」をデザイン領域で具体化した格好の事例になっています。
designer-skillsで何ができるか——9プラグイン91スキルの中身
中核となるdesign-practiceコレクションは9つのプラグインに分かれ、合計91スキル・28コマンドを収録します。各プラグインがデザインワークフローの一段階に対応しており、上流の調査から下流の実装ハンドオフまでを一気通貫でカバーします。
| プラグイン | スキル数 | コマンド数 | カバー領域 |
|---|---|---|---|
| design-research | 12 | 4 | ペルソナ・共感マップ・ジャーニーマップ・インタビュー・カードソーティング |
| design-systems | 11 | 3 | デザイントークン・コンポーネント・アクセシビリティ・テーマ・モーション |
| ux-strategy | 11 | 3 | 競合分析・デザイン原則・情報設計・サービスブループリント |
| ui-design | 14 | 4 | レイアウトグリッド・カラー・タイポグラフィ・レスポンシブ・データ可視化 |
| interaction-design | 15 | 3 | マイクロアニメーション・状態機械・ジェスチャー・フォーム・オンボーディング |
| prototyping-testing | 8 | 4 | プロトタイピング・ユーザビリティテスト・ヒューリスティック評価・A/B実験 |
| design-ops | 9 | 3 | クリティーク・ハンドオフ仕様・スプリント計画・インパクト報告 |
| designer-toolkit | 7 | 3 | デザイン根拠・プレゼン・ケーススタディ・UXライティング |
| visual-critique | 4 | 1 | 階層・ブランド一貫性・構図・タイポグラフィ監査 |
リポジトリのディレクトリ構成は素直で、各プラグインが skills/ と commands/ のサブフォルダを持ちます。たとえば ui-design/skills/ の中身を見ると、次のようなスキルが1フォルダずつ並んでいます。
・color-system（体系的なカラーパレット構築）
・typography-scale（タイポグラフィスケール）
・layout-grid（レイアウトグリッド）
・responsive-design（レスポンシブ設計）
・dark-mode-design（ダークモード仕様）
・data-visualization（データ可視化）
・visual-hierarchy（視覚的階層）
・aesthetic-usability（美的ユーザビリティ効果）
・law-of-proximity / law-of-common-region / von-restorff-effect（近接・共通領域・フォン・レストルフといった知覚法則）
注目したいのは、ゲシュタルト原理や認知バイアスといった「デザイン心理学の法則」まで1スキルとして独立させている点です。AIに「なんとなく良いUIを作って」と頼むのではなく、「近接の法則を適用して」と名指しで指示できる粒度に切り出されています。
各プラグインには、スキルを束ねる動詞コマンドも用意されています。代表的なものを挙げると、全体像がつかみやすくなります。
・design-research：/design-research:discover（調査の発見サイクル一式）・/design-research:synthesize（調査データをインサイトへ統合）
・ux-strategy：/ux-strategy:strategize（UX戦略の策定）・/ux-strategy:frame-problem（課題構造の明確化）
・interaction-design：/interaction-design:map-states（コンポーネントの状態と遷移のモデル化）・/interaction-design:error-flow（エラー処理の設計）
・prototyping-testing：/prototyping-testing:evaluate（ヒューリスティック評価の実行）・/prototyping-testing:experiment（A/B実験の設計）
・design-ops：/design-ops:plan-sprint（デザインスプリント計画）・/design-ops:setup-workflow（チームのワークフロー構築）
・designer-toolkit：/designer-toolkit:write-case-study（ポートフォリオ用ケーススタディ作成）・/designer-toolkit:write-rationale（デザイン根拠の文書化）
こうして並べると、designer-skillsが単なる「UIパーツ生成器」ではなく、デザイン組織の業務プロセスそのものをコマンド化していることが分かります。ケーススタディ執筆やスプリント計画まで含むのは、作者がデザインの実務全体を「エージェントに任せられる単位」へ分解した結果です。
SKILL.mdの中身は驚くほど実務的
実際のSKILL.mdがどう書かれているかを見ると、このコレクションの価値がよく分かります。ui-design/skills/color-system/SKILL.md の冒頭は次のような構造です。
---
name: color-system
description: Build a comprehensive color system with palette
generation, semantic mapping, and accessibility compliance.
---
# Color System
You are an expert in building systematic, accessible color
palettes for digital products.
## Accessibility Requirements
- Text on backgrounds: minimum 4.5:1 contrast (AA) or 7:1 (AAA)
- Large text: minimum 3:1
- UI components: minimum 3:1 against adjacent colors
- Don't rely on color alone to convey meaning
frontmatterの description は、Claudeが「いつこのスキルを呼び出すか」を判断する材料です。本文には専門家としての役割定義（You are an expert in…）と、具体的な数値基準（コントラスト比4.5:1、UIコンポーネントは3:1）、そして「色だけで意味を伝えない」といった禁則が並びます。これはまさに、前述の「what to never do（何を絶対にしてはいけないか）」を明文化した部分です。
SKILL.md自作のヒントとして読む
designer-skillsの各SKILL.mdは、優れたスキルの「型」を示しています。
・description は呼び出し条件が分かるよう動詞＋成果物で書く
・本文冒頭で役割（ペルソナ）を固定する
・判断基準は数値・閾値まで落とす
・「やってはいけないこと」を明示する
この型は、CLAUDE.mdやAGENTS.mdの書き方とも共通します。詳しくは CLAUDE.mdの書き方ガイド｜AIに伝わる指示の設計原則 を参照してください。
designer-skillsのインストールと使い方
導入はClaude Codeのプラグインマーケットプレイス機能を使います。手順は3ステップです。
ステップ1：Claude Codeを起動してサインインする。
ステップ2：マーケットプレイスにdesigner-skillsを登録する。
/plugin marketplace add Owl-Listener/designer-skills
ステップ3：/plugin を開き、Discoverタブで使いたいプラグインを選んでインストールする（矢印キーで移動、スペースキーで選択、Enterで確定）。
導入後は、スキルが自動で呼び出されるか、コマンドを明示的に叩いて使います。たとえば次のように動詞コマンドを実行すると、関連スキルが連鎖して一連の成果物が生成されます。
# 画面レイアウトを一式設計する
/ui-design:design-screen
# カラーパレットをアクセシビリティ検証つきで生成
/ui-design:color-palette
# 視覚的批評を優先度つき修正リストとして出力
/visual-critique:critique-screen
# デザインシステムの一貫性とアクセシビリティを監査
/design-systems:audit-system
コマンドはコロン区切りで プラグイン名:コマンド名 という名前空間を持ちます。これにより、複数プラグインを入れても名前衝突が起きません。導入から実行までの流れを図にすると次のようになります。
Owl-Listener/designer-skills"] --> B["/plugin で
Discoverタブを開く"] B --> C["使うプラグインを選択
（ui-design 等）"] C --> D["インストール完了"] D --> E["コマンド実行
/ui-design:design-screen"] D --> F["スキル自動呼び出し
descriptionで判断"] E --> G["複数スキルが連鎖
→ 成果物を生成"] F --> G
Gemini CLIで使う場合は、リポジトリをcloneして拡張機能フォルダにコピーします。
git clone https://github.com/Owl-Listener/designer-skills /tmp/designer-skills
mkdir -p .gemini/extensions
cp -r /tmp/designer-skills/.gemini/extensions/. .gemini/extensions/
このようにClaude CodeとGemini CLIの両方に対応している点は、ツールロックインを避けたいチームにとって安心材料になります。
スキルは「呼ばれたときだけ」読み込まれる
導入後にまず押さえておきたいのが、スキルの読み込みタイミングです。CLAUDE.mdがセッション開始時に常にロードされる「常時コンテキスト」であるのに対し、スキルは呼び出されたときだけ本文が読み込まれる「オンデマンドコンテキスト」です。designer-skillsを9プラグインまるごと入れても、91スキル全部の本文が常時トークンを食うわけではありません。
仕組みはこうです。Claudeは各SKILL.mdの description（フロントマターの1行）だけを軽く把握しておき、ユーザーの依頼内容と照らして「このタスクにはcolor-systemが要る」と判断したときに初めて本文を読み込みます。color-systemの description が「Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance」と書かれているのは、この判断材料を的確にするためです。
・自動呼び出し — 「アクセシブルな配色を作って」と頼むと、descriptionが合致するcolor-systemが裏で呼ばれる
・手動呼び出し — /ui-design:color-palette のようにコマンドを直接叩く
・トークン効率 — 大量のスキルを入れても、使われないスキルの本文はロードされない
この「段階的開示（Progressive Disclosure）」こそが、Anthropic社内で数百のスキルを共存させられる理由です。designer-skillsはその設計を素直に踏襲しているため、大量導入しても破綻しません。逆にいえば、自動で呼ばれてほしいスキルほど description を具体的に書く必要がある——という教訓も、各SKILL.mdから読み取れます。
Claude Skillsエコシステムでのdesigner-skillsの位置づけ
designer-skillsは単独のリポジトリではなく、5つのコレクションから成る「Designer Skills Suite」の中核です。marketplace.json のバージョンは2.0.0で、suite全体では237スキル・88コマンド・33プラグインに達します。中核のdesign-practice以外に、次の4コレクションが別リポジトリとして用意されています。
・AI product design（6プラグイン）— エージェント体験設計・モデル相互作用・整合性推論・エージェントオーケストレーション
・UX program management（6プラグイン）— プログラム計画・ステークホルダー連携・デリバリー・測定
・Design leadership（6プラグイン）— ピープルマネジメント・戦略・組織的影響力・リーダー育成
・Inclusive design（6プラグイン）— 認知アクセシビリティ・インクルーシブな相互作用・アクセシブルなコンテンツ・適応的インターフェース
Claude Skillsという仕組みの上に、designer-skillsのようなドメイン特化コレクションが積み上がる構造を俯瞰すると次のようになります。
SKILL.md + frontmatter"] --> Q["Anthropic公式
anthropics/skills"] P --> R["Designer Skills Suite
33プラグイン / 237スキル"] R --> R1["design-practice
9プラグイン・中核"] R --> R2["AI product design"] R --> R3["UX program management"] R --> R4["Design leadership"] R --> R5["Inclusive design"] R1 --> S1["design-research"] R1 --> S2["ui-design"] R1 --> S3["interaction-design"] R1 --> S4["visual-critique"]
この構造が示すのは、Claude Skillsが「個人の生産性ツール」から「ドメイン知識を配布するパッケージ管理エコシステム」へ進化しつつあるという事実です。npmやpipがコードを配布するように、/plugin marketplace add が専門知識を配布する。designer-skillsはそのエコシステムにおける、デザイン領域の代表的なディストリビューションだといえます。
スキルが社内で数百個動く運用がなぜ成立するのか、その設計原則は ClaudeチームThariqが明かしたSkills設計9カテゴリ｜Anthropic社内で数百個動かす実践則 と重ねて読むと立体的に理解できます。
デザイナー以外にも活きるユースケース
「デザインスキル集」と聞くと専業デザイナー向けに思えますが、designer-skillsはエンジニアや非デザイナーにこそ効く場面が多くあります。
最大の用途は、フロントエンド実装者が「デザイン判断の代理人」をAIに持たせることです。 自分でCSSを書くとき、color-systemスキルがあればコントラスト比やトーナルスケールを自動で考慮してくれます。typography-scaleやspacing-systemは、8の倍数グリッドのような実装上の規則をAI側に持たせられます。
具体的なユースケースを挙げます。
・自作UIの客観レビュー — /visual-critique:critique-screen で、自分が組んだ画面を視覚的階層・ブランド一貫性・構図の観点から優先度つきで批評させる
・デザインシステムの立ち上げ — /design-systems:tokenize でデザイントークンを抽出・整理し、命名規則とドキュメントまで一気に生成
・アクセシビリティの底上げ — color-systemやアクセシビリティ系スキルにより、WCAGのコントラスト基準を満たす配色をデフォルトで担保
・開発ハンドオフの整備 — /design-ops:handoff で、エンジニア向けの仕様パッケージを自動生成し、デザインと実装の認識ズレを減らす
・SKILL.md自作の教材 — 各スキルの構造を読み、自分の業務領域（マーケ・データ・運用）向けのスキルを書く際の型として流用する
特に最後の「教材としての価値」は見逃せません。Claude Skillsを自作しようとすると、最初は「役割定義をどこまで書くか」「禁則をどう表現するか」で迷います。designer-skillsの91個のSKILL.mdは、それぞれが「良いスキルの型」のサンプルとして機能します。デザインに関わらないチームでも、この型を借りて自社ドメインのスキルを量産できます。
非デザイナーが最初に試すべき3つ
・/visual-critique:critique-screen — 自作画面のダメ出しをAIにさせる
・/ui-design:color-palette — アクセシブルな配色を一発生成
・color-systemのSKILL.md精読 — 「良いスキルの書き方」を盗む
関連リポジトリと代替——どれを選ぶか
Claude Skills向けのデザイン系リポジトリは、designer-skillsの登場前後でいくつか存在します。性格が異なるため、目的に応じて選びます。
| リポジトリ | 性格 | 向いている用途 |
|---|---|---|
| Owl-Listener/designer-skills | デザイン実務の体系的スキル集（237スキル） | 調査〜実装まで一気通貫でデザイン知識をAIに持たせたい |
| anthropics/skills | Anthropic公式のスキルリポジトリ | 公式フォーマットの一次情報・基準を確認したい |
| jiji262/claude-design-skill | HTMLアーティファクト特化（デッキ・LP・ポスター） | Claude.ai内製デザインシステムを移植したい |
| travisvn/awesome-claude-skills | スキルの厳選リンク集（キュレーション） | 何が存在するかを俯瞰したい |
designer-skillsの強みは「網羅性」と「ワークフロー指向」です。単発のデザイン生成ではなく、ユーザー調査からデザインシステム運用、開発ハンドオフまでをカバーします。一方、HTMLのランディングページやスライドを手早く作りたいだけなら jiji262/claude-design-skill のほうが軽量です。まず全体像を眺めたい場合は travisvn/awesome-claude-skills のようなキュレーションから入り、本格運用に移る段でdesigner-skillsを入れる、という順序が実用的です。
なお作者は、designer-skillsと同系統のコレクション（inclusive-design-skills など）を別リポジトリで展開しています。/plugin marketplace add Owl-Listener/inclusive-design-skills のように、必要なコレクションだけを個別に追加することもできます。中核のdesigner-skills一本に絞れば9プラグインで十分カバーできますが、アクセシビリティ要件が厳しいプロダクトや、AIプロダクトのUX設計といった専門領域では、対応する追加コレクションを足していく拡張パスが用意されている、と捉えるとよいでしょう。
導入を検討する際は、自分のチームのワークフローのどこが弱いかから逆算するのが実用的です。調査フェーズが弱いならdesign-research、実装とデザインの受け渡しで揉めるならdesign-opsとdesign-systems、UIの質を底上げしたいならui-designとvisual-critique——といった具合に、9プラグインを全部入れずに必要な段階だけ選ぶ運用が向いています。プラグインは後からいつでも追加・削除できるため、まずは1〜2プラグインで試し、効果を確かめてから広げるのが安全です。
まとめ——designer-skillsは「デザイン判断の辞書」
designer-skillsは、デザイナーの暗黙知を237個のSKILL.mdに分解し、Claude CodeとGemini CLIから呼び出せるようにしたOSSです。中核のdesign-practiceコレクションだけで9プラグイン・91スキル・28コマンドを備え、ユーザー調査からUI実装、開発ハンドオフまでを一気通貫でカバーします。
本記事の要点を振り返ります。
・designer-skillsはMITライセンスのサードパーティ製スキル集。公開3か月で1500★超
・「スキル＝名詞（知識）」「コマンド＝動詞（ワークフロー）」という明快な設計
・導入は /plugin marketplace add Owl-Listener/designer-skills の一行
・各SKILL.mdは数値基準と禁則まで書き込まれた、優れたスキルの「型」のサンプル
・デザイナー以外にも、フロントエンド実装・自作UIレビュー・SKILL.md自作の教材として効く
Claude Skillsが「ただのフォルダ」であることを理解したうえでdesigner-skillsを読むと、各SKILL.mdが「何を、どの粒度で、どんな禁則とともに書いているか」が見えてきます。それは自分のドメインでスキルを書くときの、最良の参考書になります。仕組みそのものをまだ押さえていない方は、先に Claude Skillsを徹底解説｜スキルはフォルダ——Anthropicエンジニアが明かした仕組みと使い方 を読んでから本記事のコレクションに戻ると、理解が一段深まります。
参照ソース
・Owl-Listener/designer-skills（GitHubリポジトリ・README） — プラグイン構成・スキル数・インストール手順・ライセンスの一次ソース
・I Built 63 Design Skills For Claude（MC Dean氏・Substack） — 作者による設計思想の解説
・anthropics/skills（Anthropic公式スキルリポジトリ） — Claude Skills公式フォーマットの基準
