DESIGN.mdをlintで検証する：Claudeの「おしゃれ」を再現可能にする手順とshadcnプリセット

2026年10月13日

「おしゃれに作る」を感覚頼みにしない。金曜は、Google Labsがオープン仕様にしたDESIGN.mdを軸に、lintで検証する・MCPと使い分ける・shadcn/uiのプリセットで土台を固定する、という“再現性”の切り口でまとめます。

DESIGN.mdは「デザインの取扱説明書」

DESIGN.mdは、Google LabsがStitchのフォーマットとして公開したオープン仕様です。1つのMarkdownに2層を持たせます。

YAMLフロントマター：色・タイポグラフィ・余白・角丸などのトークン（機械が読む正解の値）
Markdown本文：「どこで・なぜ使うか」という意図（人とAIが読む文脈）

トークンが規範となる値で、本文は使い方の補足という役割分担です。リポジトリ直下に置けば、エージェントが毎回読み、セッションをまたいでも見た目がぶれにくくなります。

lintで「おしゃれ」を検証する

DESIGN.mdの強みは、CLIで機械的に検査できる点です。npx @google/design.mdには次のコマンドがあります。

コマンド	用途
lint	構造の検証。壊れたトークン参照、WCAG AAのコントラスト不足、未使用トークンなどを検出。エラーがあれば終了コード1
diff	2つのDESIGN.mdのトークン差分を報告
export	Tailwindなどの形式へ書き出し
spec	仕様をそのまま出力。エージェントのプロンプトに仕様を注入する用途

npx @google/design.md lint DESIGN.md
npx @google/design.md spec --rules --format json

Claudeに「DESIGN.mdを更新したら必ずlintを通す」と指示しておけば、配色のコントラスト不足を生成の段階で潰せます。

Webデザインのトレンドを示す写真 — Photo: Digital Markketing / CC BY 2.0, Openverse経由

既存サイトのDESIGN.mdを“参考資料”にする

DesignMDのように、有名サービスのデザイントークンをDESIGN.md形式で公開するサイトがあります。コピーしてプロンプトの冒頭に貼れば、ClaudeやCursorにそのスタイルの規則を渡せます。ただし他社ブランドの見た目をそのまま複製するのは避け、構造（余白の刻み、タイプスケールの考え方）を学ぶ用途にとどめるのが安全です。

DESIGN.mdとデザインシステムMCPの使い分け

Headwayの整理では、両者は役割が違います。推奨は「DESIGN.mdを正とし、MCPがそこから読む」構成です。

観点	DESIGN.md	デザインシステムMCP
向く場面	別フレームワーク、生成UIツール、スライド作成など、コード部品を使えない相手	同じスタックでコンポーネントを使う開発
渡せるもの	トークン、見た目の規則、理由	存在するコンポーネント、props、最新リリースの変更
置き場所	リポジトリの1ファイル	サーバー（ツール連携）

shadcn/uiはプリセットで土台を固定する

shadcn/uiは、複数のスタイル（Nova、Vega、Maia、Lyra、Mira、Luma、Sera、Rhea）を持ち、設定全体を短いコードに圧縮する「プリセット」を使えます（Untitled UIの比較記事による）。プロンプトにプリセットを書けば、正しく設定されたプロジェクトをエージェントが作れます。MCPサーバーとagent skillも用意され、レジストリからの検索・導入をエージェントに任せられます。