Manavarya09/design-extract

これは何？

主な機能

• 01ライブページから色、タイポグラフィ、余白、シャドウ、角丸、CSS variablesを抽出します。
• 02W3C DTCG tokens、Tailwind config、shadcn/ui theme、Figma variablesを出力します。
• 034つのブレークポイントでのレスポンシブな挙動と、hover、focus、activeの各状態を取得します。
• 04前景色と背景色の組み合わせについてWCAGコントラストを評価します。
• 05Claude Code、Cursor、Windsurf向けのMCP serverとして動作します。
• 06iOS、Android、Flutter、WordPress向けのプラットフォーム別トークンを出力します。

ユースケース

• 競合サイトや参考サイトの見た目を再現する際の、デザインシステムの出発点として使う。
• 既存のWebサイトからTailwindやshadcn/uiのthemeを生成する。
• 抽出したトークンをAIコーディングエージェントに渡し、生成するUIを既存のビジュアルスタイルに合わせる。
• CIでライブサイトとトークンファイルを照合し、デザインのドリフトを検出する。

クイックスタート

1. 1

   CLIをグローバルにインストールする

   npm i -g designlang
2. 2

   Chromiumブラウザーを一度だけインストールする

   designlang install-browser
3. 3

   サイトのデザインシステムを抽出する

   npx designlang https://stripe.com

使う前に知っておきたいこと

• !初回使用前に、ヘッドレスChromiumブラウザーをダウンロードする必要があります。
• !いくつかの高度な機能（site、fidelity、dna）はバージョン管理されており、頻繁に変更される場合があります。

トピック

よくある質問

design-extract とは？

ヘッドレスブラウザで任意のWebサイトを解析し、DTCG tokensやTailwind設定などを抽出するCLI。 designlangはPlaywright経由でヘッドレスChromiumからURLを開き、ライブDOMの計算済みスタイルとレイアウトを読み取ります。1つのコマンドで、色、タイポグラフィ、余白、シャドウ、角丸、CSS variables、モーショントークン、検出したコンポーネントを網羅するファイル一式を出力します。W3C DTCG tokens、Tailwind theme、shadcn/ui themeに加え、ライトモードとダークモード用のFigma variablesも生成します。

design-extract は無料で使えますか？ライセンスは？

design-extract は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

design-extract は今もメンテナンスされていますか？

活発にメンテナンス中。design-extract の最終コミットは 2026年10月8日 です。

design-extract は何に使えますか？

競合サイトや参考サイトの見た目を再現する際の、デザインシステムの出発点として使う。 既存のWebサイトからTailwindやshadcn/uiのthemeを生成する。 抽出したトークンをAIコーディングエージェントに渡し、生成するUIを既存のビジュアルスタイルに合わせる。 CIでライブサイトとトークンファイルを照合し、デザインのドリフトを検出する。

design-extract のインストール方法は？

CLIをグローバルにインストールする: npm i -g designlang Chromiumブラウザーを一度だけインストールする: designlang install-browser サイトのデザインシステムを抽出する: npx designlang https://stripe.com

design-extract はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Manavarya09/design-extract