Webサイトのデザインを瞬時に抽出する「designlang」

「このサイトの余白感、すごく綺麗なんだけど、どうやって組んでるんだろう？」

フロントエンドに関わるエンジニアやデザイナーであれば、一度は優れたWebサイトを開き、ブラウザのデベロッパーツールを立ち上げた経験があるはずだ。要素をインスペクトしてComputedタブを睨みつけ、フォントファミリーをメモし、カラーコードを抽出し、見えないグリッドの法則性を推測する。この泥臭い「デザインのリバースエンジニアリング」は、Web開発における一種の通過儀礼のようなものだった。

しかし、そんな職人芸のような手作業を一掃してしまうツールが現れた。

ただのカラーパレット抽出ではない

色やフォントを抽出するだけのブラウザ拡張機能なら、昔からいくらでも存在した。しかし、今回取り上げる「designlang」は、その解像度と出力の方向性が根本的に異なっている。

使い方は拍子抜けするほど簡単だ。手元のターミナルで以下のコマンドを叩くだけでいい。

npx designlang https://stripe.com --full

背後でヘッドレスブラウザが立ち上がり、対象サイトをクローリングする。モバイルやタブレットを含む4つのブレイクポイントを検証し、ホバーやフォーカス時のインタラクション状態まで記録する。さらにはWCAG 2.1に基づくアクセシビリティのスコアまで計測してしまうのだ。

特筆すべきは、「レイアウトシステム」の抽出にある。カラムパターンの使われ方、フレックスコンテナの配置、ギャップの数値など、サイトの「骨格」となる構造データを丸裸にする。リポジトリのReadmeに記された「他のツールはペイント（塗料）を提供するが、我々はアーキテクチャを提供する」という開発者の言葉も大いに頷ける。

AIエージェントに「デザインの文脈」を教え込む

designlangが単なる便利スクリプトの域を超え、今まさに注目を集めている最大の理由は、その出力フォーマットの多様性と、AI（LLM）を見据えた現代的なアーキテクチャにある。

とりわけ強烈なのが、AI向けに最適化されたマークダウンファイルと、MCP（Model Context Protocol）サーバーとしての機能だ。

これまでのコーディング支援AIは、「良い感じのUIを作って」と指示しても、一般的で無難なデザインしか生成できなかった。しかし、designlangが抽出した *-design-language.md をCursorやWindsurf、Claude Codeなどのエージェントに読み込ませれば話は変わる。

「この抽出されたデザインシステムと余白の法則に従って、新しいダッシュボードのUIを組んで」というプロンプトが、具体的なCSSやコンポーネント設計の裏付けを持った指示として機能するようになるのだ。さらにv7から搭載されたMCPを利用すれば、AIはローカルに保存されたコンポーネントデータやヘルスデータにシームレスにアクセスしながらコードを書くことができる。

優れたデザインは、一貫したシステムの上に成り立つ。そのシステムをコマンド一つで手元に引き寄せ、AIのコンテキストとして流し込み、新たなUIを紡ぎ出す。フロントエンド開発における「リファレンス」の使い方は、デザインの「見た目」を真似る時代から、「文脈」をコードとして取り込む全く新しいフェーズに入ったと言えるだろう。

参考リポジトリ: Manavarya09/design-extract

Photo by Nick Karvounis on Unsplash