# Claude DesignかデザインシステムSkillか：どの入口を選ぶべきか

> Claude Designを使うべきか、Claude Codeにproject skillを作るべきか、コミュニティUI/UX skillを試すべきか、先にデザインシステムを直すべきかを切り分けます。

- URL: https://blog.laozhang.ai/ja/posts/claude-design-system-skill
- Published: 2026-04-20
- Updated: 2026-10-10
- Author: LaoZhang AI Team (https://blog.laozhang.ai/ja/about)
- Topic: Claude Code
- Tags: Claude Design, Claude Code, Skills, Design Systems, Anthropic

---
最初に決めるべきなのは、どのskillを入れるかではなく、どの層で解くかです。2026年10月10日時点では、Claude DesignはAnthropicの公式な視覚制作プロダクトで、無料版を含むすべてのプランで使えます。Claude Codeのproject skillは、リポジトリ内のtokens、コンポーネント、例、チェックに従ってUIを直すための層です。コミュニティのUI/UX skillは初期品質を上げる助けになることがありますが、入れる前にファイルとスクリプトを読む必要があります。デザインシステム自体が弱いなら、新しいskillではなく、先に源泉を直します。

| やりたいこと | 最初に見る入口 |
|---|---|
| Claude内でプロトタイプ、one-pager、スライド、ビジュアル案を作る | Claude Designを使う（2026年10月8日から全プラン） |
| Claude Codeに既存コンポーネントとtokensを守らせる | `.claude/skills/` のproject skillを使う |
| UI/UXの初期案を少し良くしたい | コミュニティskillを検査してから試す |
| チームのUIが毎回ぶれる | tokens、コンポーネント例、スクリーンショット、チェックを整える |

停止ルールは明確です。信頼できるtokens、コンポーネント例、スクリーンショット、アクセシビリティルール、受け入れチェックがないなら、skillを増やしても問題は解けません。Claudeがより自信を持って曖昧な情報を使うだけです。

## 混ざっているのは四つの仕事

> 事実の境界：製品と提供状況は、Anthropicの[Claude Design発表](https://www.anthropic.com/news/claude-design-anthropic-labs)、Claudeの[Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)、Claude Codeの[skills documentation](https://code.claude.com/docs/en/skills)、Anthropicの[custom skills documentation](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills)を基準にしています。第三者のskill名は検査対象の例であり、Anthropicの推奨ではありません。

![Claude Design、project skill、community UI UX skill、デザインシステム整備の選択表](https://blog.laozhang.ai/posts/ja/claude-design-system-skill/img/route-board.png)

日本語圏の情報では、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に段階的に展開されていました。

この利用制限はすでにありません。2026年9月16日からClaude DesignはすべてのClaudeの会話で使えるようになり（メッセージ欄の「Output」>「Design」、またはArtifactsタブのDesignテンプレート）、Claude Codeでは `/design` で使えます。10月8日にベータ版を終え、無料、Pro、Max、Team、Enterpriseのすべてで既定でオンになりました。Enterpriseは10月15日から既定でオンで、オーナーはOrganization settings > Artifactsで先に有効にできます。単体版の `claude.ai/design` は2026年12月14日に終了します（[Claude Designの公式ヘルプ](https://support.claude.com/ja/articles/14604416)）。それでも見当たらない場合は、Settings > Capabilitiesの「Cloud code execution and file creation」がオンかを確認し、Enterpriseならオーナーに相談します。メニューにないのは設定の問題で、skillの入れ忘れではありません。

Claude Designがチームのデザインシステムを適用できるという説明も、ローカルskillとは別物です。Claude Design側にアクセスが与えられている場合の製品機能であり、`.claude/skills/design-system/SKILL.md` のようなClaude Code用ファイルではありません。

この二つは今では一か所でつながっています。Anthropicの[デザインシステム設定ヘルプ](https://support.claude.com/ja/articles/14604397)によると、デザインシステムはClaude内のアーティファクトで、Pro、Max、Team、Enterpriseでベータ提供されています（無料版は対象外）。チャットでブランド素材、スライド、ロゴ、フォント、Figmaファイルから作れるほか、デザインシステムがすでにReactコンポーネントとしてあるなら、Claude Codeで `/design-sync` を実行するとtokensとコンポーネントを直接読み取ります。単体版から移るチームは「Migrate team design systems」で移行します。作ったデザインシステムはClaude Codeを含むどの会話でも使えます。私たちの読み方では、ヘルプが説明しているのは新しいデザインやスライドに適用する色、文字、コンポーネント、レイアウトまでで、tests、CI、リポジトリ固有のルールの実行には触れていません。コード変更は引き続きproject skillと決定的なチェックが担います。

ビジュアル方向を探索するならClaude Designから始めます。既存コードを編集し、コンポーネントを再利用し、testsやreview checksを通す必要があるなら、Claude Code側のproject skillに移ります。

## リポジトリの一貫性にはproject skillを作る

デザインシステム用のproject skillは、Claude Codeに毎回同じ資料を読ませるためのものです。「おしゃれにして」ではなく、既存のtokens、コンポーネント、例、チェックに接続します。

![Claude Codeのデザインシステムproject skillの構成](https://blog.laozhang.ai/posts/ja/claude-design-system-skill/img/skill-anatomy.jpg)

基本の場所は次のようにできます。

```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.
---

# Design System Skill

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の選び方](https://blog.laozhang.ai/ja/posts/claude-code-best-skills)を先に読んだ方が合います。ここで扱うのは、UI作業とデザインシステムに絞ったproject skillです。

## コミュニティUI/UX skillは検査してから使う

日本語圏のコンテンツには、Claude Design動画、フロントデザインskill記事、デザインシステムをskill化する記事、UI/UX skill一覧が並びます。参考にはなりますが、公式性とは別です。

![コミュニティClaude UI UX skillの検査チェックリスト](https://blog.laozhang.ai/posts/ja/claude-design-system-skill/img/trust-checklist.jpg)

最低でも四つを見ます。

**出所。** 誰が管理しているか、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](https://blog.laozhang.ai/ja/posts/claude-code-best-mcp-servers)が近く、memory、skills、MCPの比較はClaude Code memory vs MCP vs skillsが向いています。

## 最小の進め方

1. 「Output」>「Design」またはArtifactsタブからClaude Designを開きます（2026年10月8日から全プラン）。Reactのコンポーネントがあり、Pro以上なら、Claude Codeの `/design-sync` でClaude Designが使うデザインシステムに変換できます。
2. repoのdesign-system assetsを棚卸しします。tokens、components、examples、screenshots、accessibility rules、checksを探します。
3. UI作業でClaude Codeにそれらを繰り返し読ませる必要があるときだけ、`.claude/skills/design-system/SKILL.md` を作ります。
4. skillは手順に徹します。いつ使うか、何を読むか、何を守るか、何を実行するかを書きます。
5. 小さなUI変更で試します。component reuse、token fidelity、responsive、keyboard、contrastを見ます。
6. コミュニティUI/UX skillは最後にbranchで比較します。改善しなければ外します。

長期的なproject preferenceが問題なら、task-specific skillより[Claude Code memory guide](https://blog.laozhang.ai/ja/posts/claude-code-memory)を先に見ます。

## よくある質問

### Anthropic公式のデザインシステムskillはありますか？

その名前の単一公式製品はありません。いちばん近い公式機能は、Claude Codeの `/design-sync` でReactコンポーネントから作れるClaude Designのデザインシステム（Pro以上、ベータ版）です。Claude Designは視覚作業の公式製品です。Claude Code skillsは再利用可能なworkflowの公式メカニズムです。`.claude/skills/` のデザインシステムskillはproject workflowとして自分で作れます。

### デザイナーはClaude DesignとClaude Codeのどちらから始めるべきですか？

視覚成果物ならClaude Designです。repoを編集し、既存componentsを守り、checksを通す必要があるならClaude Codeとproject skillです。2026年秋からは両者が直接つながり、Claude Codeの `/design` でデザインを作成・編集し、`/design-sync` でコンポーネントライブラリをデザインシステムにできます。

### デザインシステム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は信頼できる仕組みを増幅するためのもので、弱い源泉を隠すためのものではありません。

## 参考資料

本文で参照している外部ページを、登場順に並べています。最終更新日：2026-10-10。

- [Claude Design発表](https://www.anthropic.com/news/claude-design-anthropic-labs) (anthropic.com)
- [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) (docs.claude.com)
- [skills documentation](https://code.claude.com/docs/en/skills) (code.claude.com)
- [custom skills documentation](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills) (docs.claude.com)
- [Claude Designの公式ヘルプ](https://support.claude.com/ja/articles/14604416) (support.claude.com)
- [デザインシステム設定ヘルプ](https://support.claude.com/ja/articles/14604397) (support.claude.com)