最初に決めるべきなのは、どのskillを入れるかではなく、どの層で解くかです。2026年4月20日時点では、Claude DesignはAnthropicの公式な視覚制作プロダクトです。Claude Codeのproject skillは、リポジトリ内のtokens、コンポーネント、例、チェックに従ってUIを直すための層です。コミュニティのUI/UX skillは初期品質を上げる助けになることがありますが、入れる前にファイルとスクリプトを読む必要があります。デザインシステム自体が弱いなら、新しいskillではなく、先に源泉を直します。
| やりたいこと | 最初に見る入口 |
|---|---|
| Claude内でプロトタイプ、one-pager、スライド、ビジュアル案を作る | Claude Designが使えるか確認する |
| Claude Codeに既存コンポーネントとtokensを守らせる | .claude/skills/ のproject skillを使う |
| UI/UXの初期案を少し良くしたい | コミュニティskillを検査してから試す |
| チームのUIが毎回ぶれる | tokens、コンポーネント例、スクリーンショット、チェックを整える |
停止ルールは明確です。信頼できるtokens、コンポーネント例、スクリーンショット、アクセシビリティルール、受け入れチェックがないなら、skillを増やしても問題は解けません。Claudeがより自信を持って曖昧な情報を使うだけです。
混ざっているのは四つの仕事
“事実の境界：製品と提供状況は、AnthropicのClaude Design発表、ClaudeのSkills overview、Claude Codeのskills documentation、Anthropicのcustom skills documentationを基準にしています。第三者のskill名は検査対象の例であり、Anthropicの推奨ではありません。
日本語圏の情報では、Claude Designの動画、Claude Codeのフロントデザインskill、Zennのデザインシステム記事、Redditのskill相談、UI/UX skillの一覧が混ざりがちです。需要はありますが、判断は混ざりやすいです。解くべきことは「名前がそれっぽいpackageを探す」ことではなく、「どの層が責任を持つべきか」を決めることです。
Claude Designはプロダクトの入口です。見た目の方向、プロトタイプ、スライド、one-pager、ブランド感のあるビジュアル案を作るときに向いています。
Claude Codeのproject skillはリポジトリ作業の入口です。Claude Codeがローカルのルール、コンポーネント、例、チェックを読んでからUIを変更する必要があるときに使います。
コミュニティUI/UX skillは補助です。プロセスやtaste defaultsを足せることはありますが、デザインシステムの正解にはなりません。
デザインシステム整備は源泉です。tokens、コンポーネント、Storybook、スクリーンショット、インタラクション仕様、アクセシビリティ基準、CI checksは、skillの外側に存在している必要があります。
視覚成果物ならClaude Designから見る
Anthropicは2026年4月17日にAnthropic LabsからClaude Designを発表しました。公式発表では、Claudeでdesigns、prototypes、slides、one-pagersなどの視覚成果物を作る製品として説明されています。また、Claude Opus 4.7で動き、research previewとしてClaude Pro、Max、Team、Enterpriseに段階的に展開されると説明されています。
つまりClaude Designは公式の製品ルートですが、全ユーザーがいつでも使える汎用機能ではありません。入口は claude.ai/design です。利用可否はplanとrolloutに依存します。Enterpriseでは管理者による有効化が必要になる場合があります。
Claude Designがチームのデザインシステムを適用できるという説明も、ローカルskillとは別物です。Claude Design側にアクセスが与えられている場合の製品機能であり、.claude/skills/design-system/SKILL.md のようなClaude Code用ファイルではありません。
ビジュアル方向を探索するならClaude Designから始めます。既存コードを編集し、コンポーネントを再利用し、testsやreview checksを通す必要があるなら、Claude Code側のproject skillに移ります。
リポジトリの一貫性にはproject skillを作る
デザインシステム用のproject skillは、Claude Codeに毎回同じ資料を読ませるためのものです。「おしゃれにして」ではなく、既存のtokens、コンポーネント、例、チェックに接続します。
基本の場所は次のようにできます。
text.claude/skills/design-system/SKILL.md
最小構成はこの程度で十分です。
md--- name: design-system description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks. --- Use when: - creating or editing UI in this repository - translating a mockup into production components - reviewing visual consistency before a frontend PR Read first: - `design/tokens.json` - `src/components/ui/` - `storybook/` - `docs/design-system.md` Rules: - use existing components before creating new primitives - preserve token names instead of hard-coding colors or spacing - check responsive, keyboard, and contrast behavior - explain any component divergence before editing
強いproject skillは、デザインシステム全体をMarkdownに詰め込みません。いつ使うか、最初に読むファイルは何か、破ってはいけないルールは何か、どのチェックが必要かを示します。本体はtokens、components、docs、testsです。
一般的なskill選びが目的なら、Claude Code skillsの選び方を先に読んだ方が合います。ここで扱うのは、UI作業とデザインシステムに絞ったproject skillです。
コミュニティUI/UX skillは検査してから使う
日本語圏のコンテンツには、Claude Design動画、フロントデザインskill記事、デザインシステムをskill化する記事、UI/UX skill一覧が並びます。参考にはなりますが、公式性とは別です。
最低でも四つを見ます。
出所。 誰が管理しているか、repositoryはどこか、最近更新されているか、想定workflowが説明されているか。
中身。 SKILL.md、references、examples、scriptsを開きます。抽象的な美学だけなら実務には弱いです。scriptsがある場合は実行前に読みます。
リスク。 install path、shell commands、file access、network access、人間が確認すべき操作をClaudeに任せていないかを確認します。
適合。 Reactやshadcn向けのskillがnative appに合うとは限りません。style packは初稿を良くできても、既存コンポーネント体系を守るとは限りません。
順番は、読む、入れる、branchで試す、残すか消すか決める、です。
skillを増やさない方がよい場面
常に効かせたいルールなら CLAUDE.md を使います。命名、基本コンポーネント、アクセシビリティの底線、一般的なrepo方針などです。
正しい情報がないなら、source-controlled design assetsを整えます。tokens、stories、screenshots、interaction notes、review criteriaが必要です。skillはそこへ案内するだけです。
強制したいならhooksやCIを使います。visual regression、typecheck、lint、accessibility checksは、文章のお願いより確実に失敗を止めます。
外部データが必要ならMCPや連携を使います。private Figma、token service、issue tracker、documentation systemにある情報は、skillの説明だけでは取得できません。この層の判断はClaude Code MCP server guideが近く、memory、skills、MCPの比較はClaude Code memory vs MCP vs skillsが向いています。
最小の進め方
- Claude Designが自分のaccountやteamで使えるか確認します。
- repoのdesign-system assetsを棚卸しします。tokens、components、examples、screenshots、accessibility rules、checksを探します。
- UI作業でClaude Codeにそれらを繰り返し読ませる必要があるときだけ、
.claude/skills/design-system/SKILL.mdを作ります。 - skillは手順に徹します。いつ使うか、何を読むか、何を守るか、何を実行するかを書きます。
- 小さなUI変更で試します。component reuse、token fidelity、responsive、keyboard、contrastを見ます。
- コミュニティUI/UX skillは最後にbranchで比較します。改善しなければ外します。
長期的なproject preferenceが問題なら、task-specific skillよりClaude Code memory guideを先に見ます。
よくある質問
Anthropic公式のデザインシステムskillはありますか？
その名前の単一公式製品はありません。Claude Designは視覚作業の公式製品です。Claude Code skillsは再利用可能なworkflowの公式メカニズムです。.claude/skills/ のデザインシステムskillはproject workflowとして自分で作れます。
デザイナーはClaude DesignとClaude Codeのどちらから始めるべきですか？
視覚成果物ならClaude Designです。repoを編集し、既存componentsを守り、checksを通す必要があるならClaude Codeとproject skillです。
デザインシステムproject skillには何を入れますか？
SKILL.mdには手順を置き、tokens、component directories、Storybook、docs、screenshots、accessibility rules、checksへ案内します。skillは方法であって、デザインシステム本体ではありません。
コミュニティUI/UX skillは安全ですか？
出所、files、scripts、permissions、stack fit次第です。入れる前に読み、branchで試し、実務負荷を下げないものは外します。
いつ新しいskillをやめるべきですか？
本当に足りないものがsource files、checks、external accessなら、先にそちらを直します。skillは信頼できる仕組みを増幅するためのもので、弱い源泉を隠すためのものではありません。