designMD - デザイントークン抽出

ワンクリックでWebサイトのデザイントークンを抽出し、design.mdを生成・ダウンロード

designMDは、気に入ったWebサイトのデザインシステムを瞬時に抽出できるChrome拡張機能です。 【主な機能】 ・ワンクリックで現在開いているサイトのデザイントークンを抽出 ・抽出内容: カラーパレット、タイポグラフィ、スペーシング、ボーダー、シャドウ、レイアウト、コンポーネントスタイル、アニメーション ・モダンCSS色関数（lab(), oklab(), oklch()）にも対応 ・design.md(Markdown)形式で保存 ・スクリーンショットを自動撮影し、社内ギャラリーに登録 ・ダークモード検出、CSS変数の抽出にも対応 【利用シーン】 ・参考サイトのデザインを素早くドキュメント化 ・Claude Codeなどの AIコーディングアシスタントに design.md を渡して、統一されたデザインでサイト構築 ・チーム内でデザインリファレンスを共有 【使い方】 1. 参考にしたいWebサイトを開く 2. 拡張アイコンをクリック 3. 「デザインを抽出」ボタンを押す 4. design.mdが自動ダウンロード + 共有ギャラリーに登録 ※ 社内利用向け、限定公開版です。