dembrandt/dembrandt

解決する課題

Dembrandt を使用すると、開発者とデザイナーは、Webサイトのデザインシステム（色、タイポグラフィ、スペーシング、コンポーネントなど）を自動的に抽出し、標準化されたデザイントークンに変換できます。また、チームがCI/CDパイプラインでこれらのトークンを強制できるようにすることで「デザインのドリフト」を防ぎ、サイトのレンダリングされたスタイルがコミットされたベースラインから逸脱した場合にビルドを失敗させます。

仕組み

このツールはPlaywrightを使用してターゲットのWebサイトをレンダリングし、DOMから計算されたスタイルを直接読み取ります。色の使用状況を分析し、タイポグラフィをグループ化し、スペーシングパターンを検出してデザイントークンを生成します。これらのトークンは、W3Cデザイントークン（DTCG）、Tailwind v4テーマ、shadcn/uiテーマなど、さまざまな形式でエクスポートできます。また、AIエージェント（ClaudeやCursorなど）が抽出をトリガーし、デザインシステムを自動的に分析できるようにするMCPサーバーも含まれています。

対象ユーザー

• フロントエンド開発者: 既存のサイトからデザインシステムを迅速に再作成または文書化する必要がある方。
• UI/UXデザイナー: 競合他社のベンチマークやWCAGアクセシビリティ監査を実施する方。
• DevOps/プラットフォームエンジニア: CIドリフトゲートを介してデプロイ全体の視覚的な一貫性を確保したい方。
• AIエージェントユーザー: LLMベースのコーディングアシスタントにUXインテリジェンスとブランドアイデンティティを抽出する機能を与えたい方。

主な特長

• 包括的な抽出: 色、タイポグラフィ、スペーシング、ボーダー、シャドウ、モーション、コンポーネントスタイルをキャプチャします。
• CIドリフトゲート: 現在のデプロイをベースラインと比較し、トークンが移動した場合にジョブを失敗させるGitHub Action。
• MCP統合: Model Context Protocolのネイティブサポートにより、AIエージェントがツールとしてデザイン抽出を実行できます。
• 複数のエクスポート形式: W3Cデザイントークン、Tailwind CSS、shadcn/ui、ブランドガイドPDFをサポート。
• アクセシビリティ監査: 実際のDOMペアに対する組み込みのWCAG 2.1コントラストチェック。