interface-design：Claude Codeが生成するUIのデザインを揃えるプラグイン

きっかけ#

Claude CodeでUIを作っていると、セッションをまたぐたびにデザインがブレます。前回は角丸8pxだったボタンが今回は6pxになったり、色のトーンが微妙に変わったり

interface-design は、この問題を解決するClaude Code用プラグインです。GitHub Stars 3.2K（2026年2月時点）で、Claude Codeプラグインの中ではかなり伸びています

READMEだけだと具体的に何をしてくれるのか分かりにくかったので、リポジトリの中身を読んで調べてみました

何をしてくれるのか#

ざっくり言うと2つのことをやってくれます

1. デザインの方向性を最初に決めさせる

UIを作り始める前に「誰が使うのか」「何をするためのUIか」「どんな雰囲気にしたいか」を整理するステップが挟まります。いきなりコードを生成しないので、テンプレ感のない出力が出やすくなります

2. デザインの決定をファイルに保存する

ボタンの高さ、色、角丸、スペーシングなど、UIで決めたことを .interface-design/system.md というファイルに記録します。次のセッションでClaude Codeがこのファイルを自動で読み込むので、デザインが引き継がれます

インストール#

Claude Codeで以下を実行します

1
/plugin marketplace add Dammyjay93/interface-design

/plugin menu でインストール状態を確認。Claude Codeを再起動すれば使えます

使い方の流れ#

新規プロジェクトの場合#

1. /interface-design:init でUI構築を開始

このコマンドを実行すると、Claude Codeがまず3つの質問をしてきます

誰が使うのか — 「ユーザー」ではなく具体的に。朝7時にコーヒー片手の教師？深夜にデバッグ中の開発者？
何をするのか — 動詞で。「ダッシュボードを見る」ではなく「提出物を採点する」「壊れたデプロイを見つける」
どんな雰囲気にしたいか — 「クリーンでモダン」はNG。「ターミナルのように冷たい」「ノートのように温かい」のように具体的に

2. デザインの方向性が提案される

回答をもとに、6つのプリセットから方向性が提案されます

方向性	向いている用途
Precision & Density	開発者ツール、管理ダッシュボード
Warmth & Approachability	コラボツール、コンシューマーアプリ
Sophistication & Trust	金融、エンタープライズB2B
Boldness & Clarity	データ重視のモダンダッシュボード
Utility & Function	GitHub風の実用ツール
Data & Analysis	アナリティクス、BIツール

3. 確認してからUIが生成される

方向性に合意すると、その方針に沿ったUIコードが生成されます

4. system.mdへの保存を提案される

ビルド後に「このパターンを .interface-design/system.md に保存しますか？」と聞かれます。保存しておくと、次回以降のセッションで同じデザインルールが自動適用されます

既存プロジェクトに導入する場合#

/interface-design:extract を使う

既存のコードを分析して、すでに使われているデザインパターンを自動抽出し、system.mdを生成してくれます。2回以上使われているパターンを拾う仕組みなので、既にある程度UIができているプロジェクトに後から導入できます

system.mdの中身#

保存されるファイルはこんな内容です

1
# Design System
2

3
## Direction
4
Personality: Precision & Density
5
Foundation: cool
6
Depth: borders-only
7

8
## Tokens
9
### Spacing
10
Base: 4px
11
Scale: 4, 8, 12, 16, 24, 32, 64
12

13
### Colors
14
--foreground: slate-900
15
--secondary: slate-600
16
--muted: slate-400
17
--accent: blue-600
18

19
### Radius
20
Scale: 4px, 6px, 8px
21

22
### Typography
23
Font: Inter
24
Scale: 12, 13, 14 (base), 16, 18, 24, 32
25
Weights: 400, 500, 600
26

27
## Patterns
28
### Button Primary
29
- Height: 36px
30
- Padding: 12px 16px
31
- Radius: 6px
32
- Font: 14px, 500 weight
33
- Background: accent color
34

35
### Card Default
36
- Border: 0.5px solid (faint)
37
- Padding: 16px
38
- Radius: 8px
39
- Background: white
40

41
## Decisions
42
| Decision           | Rationale                                | Date       |
43
| ------------------ | ---------------------------------------- | ---------- |
44
| Borders-only depth | 影は情報価値がなく視覚的重さを加えるだけ | 2026-01-15 |
45
| 4px spacing base   | テーブル表示に十分な密度を保てる         | 2026-01-15 |

最後の Decisions テーブルがポイントで、「何を決めたか」だけでなく「なぜそう決めたか」も記録します。次のセッションでClaude Codeがこのファイルを読むときに、判断の背景まで理解した上でUIを作ってくれます

他のコマンド#

`/interface-design:audit`#

既存のコードがsystem.mdのルールに沿っているか検証します。spacing、depth、color、patternの4項目で違反を検出します

使いどころ：UIを複数人やセッションで作っていて、デザインがブレていないか確認したいとき

`/interface-design:critique`#

ビルドしたUIに対してClaude Code自身がセルフレビューします。Composition（構成）・Craft（仕上げ）・Content（コンテンツ）・Structure（CSS構造）の4視点で評価して、改善点を指摘してくれます

使いどころ：「動くけど、なんかイマイチ」を言語化してほしいとき

`/interface-design:status`#

現在のデザインシステムの状態を表示します。system.mdが存在するか、どんなパターンが登録されているかの確認用です

対象と対象外#

明確にスコープが決まっています

対象: ダッシュボード、管理画面、SaaSアプリ、ツール系のUI
対象外: ランディングページ、マーケティングサイト

対象外のものには別のスキル（/frontend-design）へのリダイレクトを案内する設計になっています

リポジトリ構造#

1
.claude/
2
├── commands/              # スラッシュコマンド定義（5つ）
3
│   ├── init.md
4
│   ├── audit.md
5
│   ├── critique.md
6
│   ├── extract.md
7
│   └── status.md
8
└── skills/
9
    └── interface-design/
10
        ├── SKILL.md        # メインのスキル定義（約400行）
11
        └── references/
12
            ├── principles.md   # Surface・Token設計の具体例
13
            ├── validation.md   # system.mdへのパターン追加基準
14
            ├── critique.md     # セルフレビューの観点
15
            └── example.md      # Subtle Layeringの実例
16

17
reference/
18
├── system-template.md     # system.mdのテンプレート
19
└── examples/
20
    ├── system-precision.md  # Precision & Density の記入例
21
    └── system-warmth.md     # Warmth & Approachability の記入例

中身はすべてMarkdownファイルです。コードは一切なく、プロンプト設計だけで構成されています

中身を読んで面白かったところ#

READMEの和訳になっても意味がないので、実際にSKILL.mdやリファレンスを読んで面白いと思った部分を紹介します

AIに「デフォルトに逃げるな」と言い続ける構造#

SKILL.mdの冒頭にこう書かれています

You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.

「お前は汎用的な出力を生成する。パターンの引力が強い」と、AIの弱点を最初に自覚させています

さらに、UIを提案する前に「このタイプのUIでありがちな選択を3つ挙げて、その代替を出せ」という工程を挟みます。デフォルトに名前を付けて可視化することで、無意識にそれを選ぶのを防ぐ仕組みです

ビルド前のセルフチェック#

コード生成前に4つのテストを通すよう指示しています

Swap test — 一般的な代替案に差し替えても違いが分からなければ失敗
Squint test — 目を細めてもヒエラルキーが見えるか
Signature test — そのプロダクト固有の要素が5箇所以上に現れているか
Token test — CSS変数名がプロダクトの世界観に属しているか

CSS変数の命名にまで踏み込んでいる#

--ink and --parchment evoke a world. --gray-700 and --surface-2 evoke a template.

「--ink と --parchment は世界観を呼び起こす。--gray-700 と --surface-2 はテンプレートを呼び起こす」

CSS変数の名前だけで出力の質が変わるという指摘は、プロンプト設計として参考になります

具体的なプロダクトを品質基準にしている#

Vercel、Supabase、Linear、Stripeのサーフェス設計を具体例として参照しています。「ボーダーは0.05-0.12 alphaで。注目すべきではないが、構造を理解したいときに見つけられる程度に」といったレベルの具体性です

注意点#

コントリビューターは作者1名のみ（46コミット）の個人プロジェクト
2026年1月作成で、まだ歴史は浅い
現状Claude Code専用。Cursorなど他AIエディタへの対応要望は出ている（#8）
ランディングページやマーケティングサイトには使えない

まとめ#

interface-designは「デザインの決定をファイルに保存して、セッション間で引き継ぐ」というシンプルな仕組みのプラグインです

中身はすべてMarkdownで、コード生成前にデザインの方向性を整理するプロンプトと、決定事項を記録するsystem.mdのテンプレートで構成されています

Claude Codeでダッシュボードや管理画面を作っていて、セッションごとにデザインがブレる問題を感じている人には試してみる価値があると思います