Claude Codeを飼いならし、手作業でのピクセル調整から解放される方法
よくあるシナリオです。AIにダッシュボードのインターフェースを描いてもらうと、まずまずの結果を出力します。2ページ目を追加するよう頼むと、そこで「デザインドリフト」が始まります。ボタンが数ピクセル上にずれ、カードのパディングが「漂流」し始め、グレーの背景色が微妙に変わってしまう。Claudeは10分前に自分がどんな決定をしたかを忘れてしまうのです。
問題はモデル自体にあるのではなく、デザイン決定のための長期メモリが欠けていることにあります。interface-Designリポジトリはこの問題をまさに解決します。Claude Code用の拡張機能で、AIに一貫したルールシステムを強制し、さらにはセッション間でそのルールを記憶させるものです。
なぜ開発者にとって重要か
プロトタイピングや管理パネルの構築にClaudeを使っているなら、プロジェクトがインラインスタイルやランダムなマジックナンバーで乱雑になるのがいかに早いか知っているでしょう。このツールは混沌としたコード生成を体系的なデザインに変換します。
ここでのコアバリューは.interface-design/system.mdファイルです。Claudeと基本事項（例えば8ピクセルのグリッドを使い、border-radiusは6pxのみ）に合意すれば、これらのルールは設定ファイルに書き込まれます。次回Claude Codeを起動すると、このファイルを最初に読み込み、昨日は厳密なSlate-900だった場所に「革新的な」ピンクのグラデーションを提案することはなくなります。
この拡張機能できること
このプロジェクトは複雑なインターフェースの構築に特化しています：監視ツール、コントロールパネル、プロフェッショナルソフトウェア向けです。ビジュアルノイズが多すぎるランディングページやマーケティングサイトにはあまり向いていません。重視されている点は以下の通りです：
メモリを持つデザイン
このツールはすべての決定を保持します。ボタン高さを36pxに承認したら、Claudeはどこでもその値を使います。チャット間でスタイルをコピーしたり、「カードborder-radiusってなんだっけ」と聞いたりする必要はもうありません。
原則的なアプローチ
単に推測する代わりに、拡張機能はいくつかの方向性（Design Directions）から選択するよう促します。例えばテクニカルツール向けにはPrecision & Density、コンシューマーアプリ向けにはWarmth & Approachabilityです。これにより要素の密度、シャドウの使用、カラーパレットなど、すべての дальнейшая作業のトーンが設定されます。
監査とパターン抽出
拡張機能には便利なコマンドがあります。/interface-design:auditはコードをスキャンし、あなた（またはAI）が自分のデザインシステムを違反していないかチェックします。そして既存のプロジェクトがすでにある場合、extractコマンドは既存のパターンを抽出してシステムファイルにフォーマットしようとします。
内部動作の仕組み
本質的には、システムプロンプト（スキル）のセットとClaude Code用のプラグインです。作業を開始すると、プロセスは以下のようになります：
- Claudeがプロジェクトコンテキストを分析する
- ビジュアル方向を提案し、あなたの「ok」を待つ
- 各コードブロックの前でデザイン選択を明確に述べながらコンポーネントを生成する
- 成功したパターンを
system.mdに保存することを提案する
システムファイル自体は極めてシンプルで、単なるMarkdownです。ベーススペーシングに4px是不够だと判断した場合は、手動で編集も簡単です。
# Design System
## Tokens
### Spacing
Base: 4px
Scale: 4, 8, 12, 16, 24, 32
### Patterns
### Card Default
Border: 0.5px solid
Padding: 16px
Radius: 8px
始め方
一番簡単な方法はClaude Codeプラグインマーケットプレイス経由です：
/plugin marketplace add Dammyjay93/interface-design
/plugin menu
インストール後、Claude Codeを再起動する必要があります。手動で全てをコントロールしたい場合は、リポジトリをクローンして、説明に従ってファイルを~/.claude/フォルダに配置するだけです。
試す価値はあるか
AIで「手作業」によりインターフェースを構築し、ビジュアルな不整合にうんざりしている人にとっては、このプロジェクトは必ず役立ちます。名作を描く魔法の薬ではなく、Claudeを規律正しくするための優れた方法です。
Tailwindを設定したり、CSS変数を一から書いたりするのに何時間も費やすことなく、手っ取り早くちゃんとした管理パネルを組み立てる必要があるフルスタック開発者にとって、特に便利です。このツールは、17pxの間隔を開ける代わりに16pxにすべきところであなたの手を叩く、うるさいデザインリーダーの役割を果たします。
欠点としては、このプロジェクトはClaude Codeに大きく依存しているため、通常のClaude.aiウェブインターフェースではあまり恩恵がありません。しかし、Anthropicのコンソールインターフェースにすでに移行しているなら、interface-Designはワークフローへの素晴らしい追加になるでしょう。
関連プロジェクト