Chrome拡張インストール
Chrome Web Storeから追加
ギャラリー
抽出済みデザイン一覧
プライバシーポリシー
収集情報について
1
Chrome拡張機能のインストール
全員2
Claude Code連携
開発者のみ
Claude Codeで /design-md スキルを使いたい人向け。
抽出した design.md をプロジェクトに配置して、Claude Codeに統一デザインでコーディングさせる機能。
Windows
Win + R で「ファイル名を指定して実行」を開き、以下を貼り付けて Enter：
powershell -Command "New-Item -ItemType Directory -Force -Path $env:USERPROFILE\.claude\commands | Out-Null; Invoke-WebRequest -Uri https://designmd.tashikani.jp/design-md.md -OutFile $env:USERPROFILE\.claude\commands\design-md.md"
Mac
ターミナルで以下を実行：
mkdir -p ~/.claude/commands && curl -sSL https://designmd.tashikani.jp/design-md.md -o ~/.claude/commands/design-md.md
3
使い方
デザインの抽出
- 参考にしたいWebサイトを開く
- ツールバーの「MD」アイコンをクリック
- 「デザインを抽出」ボタンをクリック
- 保存先を選んで design.md を保存
- 自動で社内ギャラリーに登録
Claude Codeで適用
- 抽出した design.md をプロジェクトルートに配置
- Claude Codeで
/design-mdを実行 - 以降のフロントエンド作業で
自動的にデザイントークンが適用される
抽出されるデザイントークン
| セクション | 内容 |
|---|---|
| Colors | カラーパレット（Primary/Secondary/Neutral/Accent） |
| Typography | フォント、サイズスケール |
| Spacing | 余白のベースユニットとスケール |
| Borders | 角丸、ボーダー幅・色 |
| Shadows | ボックスシャドウ |
| Layout | コンテナ幅、グリッド、ブレークポイント |
| Components | ボタン、カード、ナビ、フォーム、フッター |
| Animations | トランジション、ホバー効果 |
| Dark Mode | ダークモード対応 |
| CSS Custom Properties | CSS変数一覧 |
困ったとき
ギャラリーに出てこない
- Chrome拡張がストアからインストールされているか確認：
chrome://extensions/ - サイトでデザイン抽出した後、ギャラリーをリロード
Claude Codeで /design-md が使えない
- スキルファイル
~/.claude/commands/design-md.mdが存在するか確認 - 上記「Claude Code連携」のコマンドで再実行
Chrome拡張のアイコンがツールバーに出ない
- Chromeの右上のパズルアイコン🧩をクリック → designMDの横のピン📌をクリック
- これでツールバーに常駐