単一のターミナルコマンドで任意のWebsitesからデザインシステムを抽出する方法

こんな経験はありませんか？他社のランディングページやWebサービスを閲覧中に、「このフォントは何だろう、スペーシングはどうしているのか、カラーパレットは？」と思ったことがあるはずです。通常、この段階でDevToolsを開き、要素をクリックして回り、hexコードをコピーし、計算済みスタイルを閲覧し始めます。プロジェクトが大規模であれば、このルーティンは数時間を要する場合があります。

最近、dembrandtという、このプロセスを驚くほど自動化してくれるユーティリティを見つけました。URLを入力すると、パレット、タイポグラフィ、スペーシンググリッド、シャドウ、ボーダー半径、アニメーションなど、構造化されたデザインカードをアウトプットします。

それは何で、誰に向いているのか

dembrandtはNode.js向けに構築されたコマンドラインユーティリティ兼TypeScriptライブラリです。Playwright経由でブラウザエンジンを起動し、指定されたページに移動して、DOMから計算済みスタイルを抽出し、整然と整理します。

このツールは複数のユースケースに対応しています：

• 他社UIのクイック監査とリバースエンジニアリング
• 明示的なデザインシステムがなかったレガシープロジェクト向けのデザインカード作成
• CI/CDパイプラインでのスタイル「ドリフト」の監視
• CursorやClaude CodeのようなAIアシスタントへのコンテキストエクスポート

始め方

Node.js 18以上が必要です。バンドルされたバイナリなしでPlaywrightに依存しているため、最初のステップとしてChromiumをダウンロードします：

npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.com

グローバルインストールしたくない場合は、npxでも動作します：

npx dembrandt install-browser
npx dembrandt example.com

ブラウザはPlaywrightの共有システムキャッシュに一度だけダウンロードされ、その後ユーティリティは使用可能になります。

内部構造：フォーマットと統合

このツールは単に一堆のCSSプロパティをコンソールにダンプするわけではありません。タイポグラフィをサイズやウェイトでグループ化し、カラーの使用頻度を分析し、見つけたルールに対する信頼度レベルを計算します。

W3CとTailwind標準へのカードエクスポート

Style DictionaryやFigmaのTokens Studioを使用している場合、W3C DTCG仕様に従ってカードをエクスポートできます：

dembrandt example.com --dtcg

モダンなTailwind CSSで作業するフロントエンド開発者向けに、フレームワークのバージョン4用の@theme directiveを生成するフラグがあり、実際に使用されている値のみを含みます。

WCAGコントラストチェック

フラグはアクセシビリティ監査を開始します。このユーティリティはDOM内の実際のテキストと背景のペアを特定し、WCAG 2.1 AAおよびAAAコンプライアンスレベルで評価します。これは、重い拡張機能なしで素早くインターフェースアクセシビリティをチェックするのに便利です。

CIでのスタイル変更追跡

最も魅力的なユースケースの一つは、プルリクエストでの偶発的なスタイル変更防止です。リポジトリでカードのスナップショットをキャプチャし、GitHub Actionsでプレビューデプロイを検証できます：

uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

誰かがブランドプライマリカラーを誤って変更したり、スペーシングスケールを崩したりすると、アクションは失敗し、PRに変更されたカードをリストしたコメントを残します。他のCIシステムでは、比較時にユーティリティがゼロ以外の終了コードを返します。

MCPプロトコルでAIエージェントに接続

開発者はModel Context Protocol（MCP）サポートを追加しました。つまり、Claude Code、Cursor、Windsurfに直接接続できます：

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

その後 нейронная сеть получает набор инструментов (extract_tokens, extract_palette, extract_typography, extract_spacing) и может независимо изучать интерфейс и писать код на основе текущих токенов сайта.

考えられる課題

READMEには認識しておくべき技術的制限が正直に記載されています：

• ダークモードは自動検出されない—フラグで強制する必要があります
• CanvasまたはWebGLベースのサイトはDOMツリーがないため解析できません
• ReactやVueで構築されたヘビーなSPAはハイドレーションに時間がかかるため、タイムアウトを伸ばすために最初からフラグを渡すのがベストです
• モバイルビューポートは別途パラメータで有効化されます

まとめ

dembrandtは実際のWebコードと正式なデザインシステムドキュメントのギャップを埋めます。既存プロジェクトで散らかったスタイルを整理する必要がある場合、CIで自動スタイルチェックをHook upしたい場合、またはAIアシスタントにフロントエンドの現在のコンテキストをFeedしたい場合は、このツールはぜひブックマークする価値があります。オープンソースコード（MIT）により、内部ビルドスクリプトに簡単に埋め込むことができます。