Claudeの2種類のデザインシステムについて
ホッタAIエンジニアClaudeで「デザインシステム」と呼ばれるものには、リポジトリ内にファイルとして置くものと、Claude Design側に作るものの2種類があります。名前は同じですが置き場所も効く範囲も別物です。実装の基準はリポジトリ側に置き、Claude Designへはそこから一方通行で反映する、という使い分けがよさそうです。
自分は最初、デザインシステム（ClaudeはしばしばDSと略します）が2種類あると知りませんでした。リポジトリにデザインシステムを置いておけば、Claude Codeが作る画面の見た目を揃えられると知り、既存のコードから抽出してくれるスキルも試してみました。ところが、できあがったデザインシステムはリポジトリの中ではなく、Claude Design側にありました。ここで初めて、2種類あることに気づきました。
なお、この記事は2026年10月時点の仕様を調べたものです。あらかじめご承知おきください。
リポジトリ内のデザインシステム：Claude Codeが読むもの
1つ目は、リポジトリの中に置くデザインシステムです。Claude Codeの公式ドキュメントでは、色・タイポグラフィ・余白といったデザイントークンを、プロジェクトのCLAUDE.mdか、リポジトリ内のテーマファイルに書いておくことが勧められています。
## Design system
- Colors: primary #1F4E79 / accent #E8A33D / background #FAFAF7
- Typography: Noto Sans JP, 本文16px / 見出し24px
- Spacing: 4pxの倍数
実際にはデザインシステムを利用するのはフロントコーディングの時だけなので、CLAUDE.mdに置くより、テーマファイルにまとめ、必要な作業時に読まれるようにすることになるかと思います。優先順位は「プロンプトでの指示 > デザインシステム > Claude自身の判断」とされています。
置き場所がリポジトリなので、gitで履歴を残せて、レビューもできます。一方で、効くのはそのリポジトリでClaude Codeを動かしたときに限られるでしょう。ちなみに2026年9月末前後にはArtifactにDesign Systemという項目があり、専用のテンプレが配置されていたのですが、執筆時点では早くもなくなっています。本当に移り変わりが早いですね。 => 10/16追記 復活していました。
Claude Design側のデザインシステム：組織で共有するもの
2つ目は、Claude Designで作るデザインシステムです。claude.aiの「Settings > Design systems」で管理し、2026年12月以降は単独版のClaude Designが閉じて、artifactとして保存される形に移行するとアナウンスされています。
中身は色・タイポグラフィ・コンポーネント・レイアウトのパターンで、Claudeでデザインやスライドを作るときに自動で適用されるようです。Team/Enterpriseプランでは組織のデフォルトに設定でき、メンバー全員が同じデザインシステムを使えます。取り込み元にはコードベースのほか、スクリーンショットやPDF、ロゴなども使えるようです。
今回使った抽出スキルは/design-syncで、リポジトリのReact製デザインシステムを変換してClaude Designへアップロードするものでした。Claude Designで追加のデザイン制作を行う場合は、これによってスタイルを統一したものを生成できます。
2つの違い
| リポジトリ内 | Claude Design側 | |
|---|---|---|
| 置き場所 | CLAUDE.mdやテーマファイル |
claude.aiのSettings > Design systems |
| 主に効く場面 | Claude Codeでの実装 | デザイン・スライドの生成 |
| 共有のしかた | git | 組織内で共有（全員への共有はOwnerのみ） |
| 変更履歴 | gitで追える | claude.ai上で管理 |
| 作り方 | 手で書く／Claude Codeに書かせる | 取り込み、または/design-sync |
使い分け方
個人的には、次のように分けるのがよいかと思います。
- 実装の正解はリポジトリ側に置く。トークンの値はコードと同じ場所でレビューされるべきなので、基準はこちらにするのが自然でしょう
- Claude Design側は、デザイナーや非エンジニアがモックやスライドを作るために使う。組織のデフォルトにしておけば、誰が作っても最低限ブランドに沿った見た目になります
- 両方使うなら、リポジトリ側を元にして
/design-syncで反映する。向きを一方通行にしておけば、どちらが正しいのか分からなくなる事態は避けられそうです
逆に、Claude Designにだけデザインシステムを作って、Claude Codeでの実装にも効くと期待するのは危ないかと思います。Claude Codeから組織のデザインシステムを参照する仕組みもあるようですが、実装の基準をリポジトリの外に置くと、コードとのずれに気づきにくくなります。
補足
対象プランや既定のオン/オフは、サポート記事ごとに表記が違っていました（2026年10月時点）。利用前に最新のヘルプを確認してください。
同じ「デザインシステム」という名前でも、置き場所を間違えると、効いてほしい場所で効きません。
まとめ
- Claudeのデザインシステムは「リポジトリ内」と「Claude Design側」の2種類
- リポジトリ内はClaude Codeでの実装向けで、gitで管理できる
- Claude Design側は組織で共有し、デザインやスライドの生成に効く
- 基準はリポジトリ側に置き、Claude Designへは一方通行で反映するのがおすすめ
参考
