Dembrandt

Dembrandt.

あらゆるウェブサイトのデザインシステムをワンコマンドで抽出し、CI で適用します。

ロゴ、色、タイポグラフィ、余白、境界線、影、モーション、コンポーネント。W3C デザイントークンを数秒で取得できます。

インストール

npm install -g dembrandt
dembrandt install-browser        # one-time: fetches the matching Chromium
dembrandt dembrandt.com

ブラウザーのインストール手順が必要です。dembrandt は playwright-core を介して Chromium を操作しますが、playwright-core にはブラウザーバイナリが含まれていないため、新規インストール直後は実行できるブラウザーがありません。この手順を省略すると、browser engine not available エラーが発生します。

インストールせずに npx を使うこともできます：npx dembrandt dembrandt.com。この場合もブラウザーのインストールが必要です。先に npx dembrandt install-browser を実行してください。ブラウザーは共有の Playwright キャッシュに保存されるため、どちらの方法でもインストールは一度だけで済みます。

Node.js 18+ が必要です

MCP サーバーをエディターに直接インストールして、エージェントに実行させることもできます：

得られる情報

• 色（各選択の根拠を含むセマンティックな役割、厳選されたパレット、検出されたすべての色、CSS 変数、グラデーション）
• タイポグラフィ（フォント、サイズ、ウェイト、ソース、フォントファイルの URL）
• 余白（マージン／パディングのスケール）
• 境界線（角丸、幅、スタイル、色）
• 影
• モーション（時間のスケール、イージングカーブ、コンポーネントの種類ごとのホバーパターン）
• コンポーネント（ボタン、バッジ、入力欄、リンク）
• ブレークポイント
• アイコンとフレームワーク

Playwright がページを描画し、dembrandt が DOM から計算済みスタイルを読み取り、色の使用状況と信頼度を分析し、類似するタイポグラフィをグループ化して、余白のパターンを検出し、デザイントークンを返します。

フラグ

dembrandt dembrandt.com --shadcn        # shadcn/ui theme, observed slots only
dembrandt dembrandt.com --dtcg          # W3C design tokens, for Style Dictionary or Tokens Studio
dembrandt dembrandt.com --wcag          # WCAG 2.1 contrast on real DOM pairs

デフォルトでは、整形されたターミナル出力のみを表示します。すべてのフラグの詳細なリファレンスは docs/usage.md をご覧ください。

エクスポート

フラグ	出力内容
--dtcg	W3C デザイントークン（DTCG）
--design-md	AI エージェント向けの DESIGN.md
--tailwind [path]	Tailwind v4 @theme CSS
--shadcn [path]	shadcn/ui テーマ。検出されたスロットのみ
--html [path]	自己完結型の HTML レポート
--brand-guide	ブランドガイド PDF
--json-only	標準出力に生の JSON を出力
--save-output	output/<domain>/ に JSON を保存
--screenshot <path>	ビューポートのスクリーンショット
--color-format <f>	色の表記形式：hex、rgb、oklch、lch、source
--raw-colors	フィルター適用前の色も出力

分析

フラグ	出力内容
--wcag	実際の DOM ペアのコントラスト評価
--compare <baseline>	ドリフトゲート。トークンが移動すると終了コード 1 を返します
--tokens <file>	レンダリングされた色、角丸、フォントサイズを W3C デザイントークンファイルと照合します。複数指定する場合は繰り返します
--max-off-token <n>	--tokens と併用：トークンに一致しないレンダリング値が N 個を超えると終了コード 1 を返します
--tokens-report <path>	--tokens と併用：トークン外の値ごとに最も近いトークンを記載した、Wiki ですぐに使える Markdown の概要
--annotations <github|azure>	ドリフトとトークン外の値に関する CI アノテーション。デフォルトではランナーから検出します
--approve	現在の実行結果を新しいベースラインとして承認します
--ai	ML によるブランドのプライマリーカラー予測（実験的）

カバレッジ

フラグ	出力内容
--crawl [n]	N ページを統合し、ページ間の信頼度を算出
--sitemap	sitemap.xml からページを検出
--dark-mode	ダークテーマのトークン
--mobile	モバイルのビューポート
--slow	重いサイト向けにタイムアウトを 3 倍に設定
--browser <type>	chromium または firefox。環境変数経由で CDP を使用
--no-sandbox	Docker および CI 向け

アクセス

フラグ	出力内容
--cookie <string>	セッションが必要なページにアクセス
--cookie-file <path>	JSON Cookie、Playwright storageState（localStorage と --save-storage-state が追加する sessionStorage ブロックを含む）、または Netscape cookies.txt
--basic-auth <user:pass>	ブラウザーコンテキストに HTTP Basic 認証を設定
--login	表示されるブラウザーを開いてサインインします。準備ができたら Enter を押すと抽出を開始します（対話型ターミナルのみ）
--save-storage-state <path>	--login と併用：サインイン済みセッション（Cookie、localStorage、sessionStorage）をファイルに保存します。後で --cookie-file を使って再利用でき、CI でも使用できます
--header <string>	追加のリクエストヘッダーを指定します。複数指定する場合は繰り返します
--no-headed-fallback	ナビゲーションに失敗しても、表示されるブラウザーを開きません。バッチ実行向け
--user-agent <string>	カスタムユーザーエージェント
--locale <string>	フィンガープリントに使用するロケール
--timezone <string>	フィンガープリントに使用するタイムゾーン
--accept-language <s>	Accept-Language ヘッダー
--screen-size <WxH>	申告する画面解像度
--stealth	検出回避。許可された用途でのみ使用してください
--key <string>	実行結果をアカウントに同期

CI でデザインのドリフトを検出する

プレビュー環境から抽出し、コミット済みのベースラインと比較して、トークンが移動していた場合にジョブを失敗させます。

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

このアクションは GitHub Marketplace で公開されており、ドリフトしたトークンを PR にアノテーションとして追加します。それ以外のランナーでは、ゲートは終了コードと JSON のみを返します。dembrandt URL --compare baseline.json --json-only は、ドリフトがある場合に終了コード 1 を返し、トークンごとの changes[] を出力します。アクションの入力、プラットフォームに依存しないゲート、終了コードの表については docs/ci.md をご覧ください。

レシピ

コマンドをコピーし、プロンプトを貼り付ければ、結果が得られます。競合他社のベンチマーク、WCAG 監査、Figma トークンのプッシュ、エージェント主導のデザインシステム構築に対応します。dembrandt.com/recipes では役割ごとに絞り込めます。基本的な内容は docs/recipes.md をご覧ください。

AI エージェント連携（MCP）

Dembrandt を Claude Code、Cursor、Windsurf、または MCP 互換クライアントのツールとして使用できます。エージェントに「dembrandt.com からカラーパレットを抽出して」と頼むと、Dembrandt が自動的に呼び出されます。

クライアントごとのセットアップ、環境変数、ツールの全リストについては、docs/mcp.md および dembrandt.com/mcp をご覧ください。

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

このサーバーは MCP Registry に io.github.dembrandt/dembrandt として登録されているため、レジストリを参照するクライアントなら、名前を指定してインストールできます。

または、プロジェクトの .mcp.json に追加してください。

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt", "mcp"]
    }
  }
}

利用可能なツールには、get_design_tokens、get_color_palette、get_typography、get_component_styles、get_surfaces、get_spacing、get_brand_identity のほか、純粋な分析ツール（compute_drift、get_findings、export_dtcg、generate_design_md、render_report）とジョブ制御ツールがあります。

抽出ツールは、slow、mobile、darkMode、wcag、cookie、cookieFile、basicAuth、header（認証が必要なページ向け）、userAgent、noSandbox（Docker およびほとんどの CI コンテナ向け）を受け付けます。対話型の --login は CLI 専用です。pages を 1 より大きく設定すると、複数のページをクロールして統合できます。1 ページの場合と比べて、生成されるトークンセットの品質が大幅に向上します。paths でページを明示的に指定し、sitemap で sitemap.xml からページを検出できます。

抽出結果として job_id が返されます。get_job_status でポーリングし、抽出結果を引数として渡す代わりに、同じ ID を純粋なツールに渡してください。

get_design_tokens(url: "example.com", pages: 5)  ->  job_id
get_job_status(job_id)                           ->  tokens
get_findings(job_id)                             ->  contrast and consistency issues
export_dtcg(job_id)                              ->  W3C design tokens

dembrandt-skills と組み合わせると、抽出したトークンに加えて、階層、アクセシビリティ、インタラクション状態、6 段階の完全なデザインパイプラインオーケストレーターに関する UX インテリジェンスをエージェントに提供できます。

npx skills add dembrandt/dembrandt-skills

Dembrandt アプリ（ベータ版）

抽出結果を読み込み、トークンのドリフトを追跡し、スナップショットを比較できます。dembrandt.com/app

• CI からのドリフト追跡を自動化。 dembrandt.com/app/api-keys で API キーを生成し、CLI に --key を渡します。実行のたびにスナップショットがアカウントにアップロードされ、同じドメインの前回のスナップショットと比較してスコアが算出されます。GitHub Actions や任意の CI ランナーに組み込むと、デプロイのたびに記録されます。
• ベースラインを固定。 任意のスナップショットを基準として指定できます。それ以降の抽出結果はすべて、自動的にその基準と比較してスコアが算出されます。
• ビジュアル差分。 カラースウォッチ、変更前と変更後の値、色、タイポグラフィ、スペーシング、角丸、シャドウのカテゴリ別差分スコアを確認できます。
• スナップショットのタイムライン。 ドメインごとの比例タイムラインで、数日から数年まで、任意の期間をスクラブできます。
• 並べて比較。 複数の抽出結果を 1 つのビューに読み込み、2 つのリリース、サイト、またはサーフェスを比較できます。
• トークンをコピー。 値を Copilot、Claude、Cursor にそのまま貼り付けられます。
• ローカルでの利用にログインは不要。 データはブラウザー内に保持されます。GitHub でサインインすると、クラウド同期を有効にできます。

制限事項

• ダークモードには --dark-mode フラグが必要です（自動検出されません）
• ホバー状態とフォーカス状態は、一部の要素で実際に操作して取得します。ポインターパスやタイマーが必要な状態は検出できません
• Canvas/WebGL でレンダリングされるサイトは解析できません（読み取り可能な DOM がありません）
• JavaScript を多用するサイトでは、ハイドレーションに時間がかかります（初期 8 秒＋安定化 4 秒）
• 動的に読み込まれるコンテンツの一部は検出できない場合があります
• デフォルトのビューポートは 1920x1080 です（モバイルの 390x844 ビューポートには --mobile を使用してください）

想定される用途

Dembrandt は、公開されている CSS とウェブサイトの DOM から取得した計算済みスタイルを読み取り、ご自身が所有する、または分析の許可を得ているデザインシステムのドキュメント作成、学習、分析に利用できます。

自動アクセスが利用規約で認められているサイト、またはご自身が所有するサイトに対してのみ Dembrandt を実行してください。抽出した素材を使用して、第三者のブランドアイデンティティ、ロゴ、商標を再現しないでください。robots.txt、レート制限、著作権を尊重してください。

Dembrandt は、第三者のブランド素材をホスト、再配布せず、それらの権利を主張することもありません。

スポンサー

CLI は MIT ライセンスで、無料です。スポンサーからの支援は、コミット済みのプロジェクトレベルのトークンベースライン、CI/CD のドリフトゲート用の --compare と取り込み API、App プラットフォーム（スナップショット履歴、チーム向けドリフトダッシュボード、Slack、Linear、GitHub へのアラート）を支えます。

ドキュメント

• docs/usage.md：すべてのフラグ、複数ページの抽出、ブラウザーの選択、CDP、DTCG、DESIGN.md、Tailwind テーマ、WCAG、モーション、ブランドガイド PDF
• docs/ci.md：GitHub Action、ドリフトゲート、終了コード
• docs/mcp.md：クライアントごとの MCP サーバーのインストール、環境、ツール
• docs/recipes.md：コピーしてすぐ使えるワークフロー
• docs/FLAGS.md：フラグの相互作用、無視される組み合わせ、複数ページへの適用

コントリビューション

バグ、変わったサイト、プルリクエストを歓迎します。

Issue または PR を作成してください。

@thevangelist

MIT ライセンスです。自由にお使いください。