ウェブサイトのスタイルを丸ごと抽出してDESIGN.md / SKILL.mdを自動生成するChrome拡張 — Claude Codeに渡すデザイン文脈を一瞬で構造化する

「このサイトのデザインに合わせて作って」——Claude Code や Codex に開発を任せるとき、毎回この説明から始める必要があった。 フォントサイズ、カラーパレット、スペーシング、ボーダー半径……これらをテキストで伝えるのは手間がかかるし、伝え漏れも起きやすい。

この課題を解決するChrome拡張が登場した。任意のウェブサイトを開いてボタンを押すだけで、そのサイトのデザインシステムをDESIGN.mdまたはSKILL.mdとして書き出せるツールだ。

何ができるか

GitHub リポジトリ bergside/design-md-chrome（2026年6月時点でスター2,200以上）で公開されているこの拡張の主な機能は次のとおりだ。

• 任意のウェブサイトのスタイルを抽出 — タイポグラフィ、カラー、スペーシング、ボーダー半径、シャドウ、モーションなど
• DESIGN.md か SKILL.md を選んで出力 — 用途に合わせて生成形式を切り替えられる
• Claude Code / Codex / Google Stitch にそのまま渡せる — 生成されたファイルをAIエージェントのコンテキストに置くだけで使える
• 無料 — Chrome Web Store から無料でインストール可能

DESIGN.md と SKILL.md の違い

Claude Code ではSKILL.mdをプロジェクトに置くと、定義されたデザインルールをコンテキストとして参照しながらコンポーネントを実装する。

インストール

Chrome Web Store で「DESIGN.md Style Extractor - TypeUI」を検索するか、以下のリンクから直接インストールできる。

• DESIGN.md Style Extractor - TypeUI（Chrome Web Store）

ソースコードはオープンソースとして公開されている。

• bergside/design-md-chrome - GitHub

使い方

1. 参考にしたいデザインのサイトをChromeで開く
2. 拡張のアイコンをクリック
3. DESIGN.md か SKILL.md を選択
4. 生成されたMarkdownをコピーしてプロジェクトルートに配置

たとえばStripeのサイトを開いて抽出すれば、Stripeのデザイン言語を記述したファイルが得られる。それをClaude Codeのプロジェクトに置けば、「Stripeっぽいデザインで」と口で説明しなくても、エージェントがデザインシステムを参照しながら実装を進めてくれる。

生成されるDESIGN.mdの例

抽出されるMarkdownは以下のような構造になる。

# Design System

## Colors
- Primary: #635BFF
- Background: #0A2540
- Text: #425466

## Typography
- Font family: -apple-system, BlinkMacSystemFont, "Segoe UI"
- Base size: 16px
- Heading scale: 1.25

## Spacing
- Base unit: 8px
- Section padding: 64px

## Border Radius
- Small: 4px
- Default: 8px
- Large: 16px

CSSのカスタムプロパティや実際に使われているスタイルをスキャンして、設計トークンとして整理する。

Claude Codeでの活用方法

生成したSKILL.mdをプロジェクトのルートに配置しておくと、Claude Codeが自動的に読み込む。

myproject/
├── SKILL.md        ← 抽出したデザインスキル
├── CLAUDE.md
├── src/
└── ...

あとは普通に「ログインフォームを実装して」と指示するだけで、エージェントはSKILL.mdに定義されたフォントサイズやカラーを参照しながらコンポーネントを組んでくれる。

まとめ

Claude Code にデザイン文脈を渡す作業は、これまで「毎回やり直す手作業」だった。この拡張を使えば、参考サイトを開いてクリックするだけで、再利用可能なデザイン定義ファイルが手に入る。AIエージェントを使った開発フローに組み込むと、デザインの一貫性を保ちながら実装速度を上げられる。