designlang

npm: designlang v12.23.0 / GitHub: Manavarya09/design-extract — ライブ DOM から Design Language を抜き出す

1 — 概要

位置づけ

designlang（ソースは Manavarya09/design-extract）は、Playwright のヘッドレス Chromium で任意の URL を開き、実際に計算された CSS から色・タイポ・間隔・影・ブレークポイント・モーション・アクセシビリティ指標などを集約し、17 種類以上の成果物（AI 向け Markdown、W3C DTCG トークン、Tailwind 設定、shadcn テーマ、Figma 変数、MCP メタ、など）として書き出す Node.js ツールだ。

12.23npm 版

CLIdesignlang

BrowserPlaywright

17+出力スロット

v10 以降は ページ意図・セクション役割・Material / 画像表現 など「意味」レイヤを追加。v12 系では 忠実度検証（verify）、ライブ編集スタジオ（studio）、ランタイムモーション（--motion-runtime）、サイト全体の canonical 合成（site）、レポートカード / バトル / リミックス / ブランドブック など、抽出後のワークフローまで一気通貫でカバーする。

実行前提: Node 20+。依存に Playwright があり、postinstall で Chromium の取得を試みる。オフライン環境ではブラウザ取得に手を要することがある。npm パッケージ名は designlang、公開バイナリ名も designlang（実装は bin/design-extract.js）。

2 — パイプライン

処理の流れ（概念）

エントリ extractDesignLanguage は、まず crawlPage で（ライト/インタラクション用データを含め）生の計算スタイルと DOM シグナルを採取し、続く段階で extractors/* が色・タイポ・レイアウト・モーション・page-intent などのサブシステムに落とし込み、最後に formatters/* へ渡して各ファイル形式に整形される。

crawl（Playwright） → aggregate styles → extractors 群 → design オブジェクト → formatters & 書き出し

抽出レイヤの例

基礎: colors / typography / spacing / shadows / borders / variables
構造・挙動: layout / breakpoints / components + component-clusters / interaction-states / motion
意味づけ（v10 付近）: page-intent / section-roles / material-language / imagery-style / component-library / voice
運用系: lint / drift / sync / watch / visual-diff / multibrand — CLI サブコマンドから利用

早い試し方

npx designlang https://example.com
npx designlang site stripe.com --max-pages 8    # 全ページ canonical 合成
npx designlang studio                           # 最新抽出をライブ編集
npx designlang verify stripe.com                # トークン再現の忠実度スコア
npx designlang grade https://example.com --badge
npx designlang https://example.com --full       # responsive + interactions + motion-runtime

3 — 主な出力物

ファイル指針

同一抽出につきプレフィックス（例: ドメイン名由来）付きの複数ファイルが一括で生成される。代表的な役割は次のとおり（README 記載のサマリに準拠）。

成果物	用途
`*-design-language.md`	LLM に食わせるための 19 セクション構成の設計要約
`*-preview.html`	スウォッチ・タイプスケール等のビジュアルレポート
`*-design-tokens.json`	W3C DTCG 形式（primitive + semantic + composite）
`-tailwind.config.js` / `-shadcn-theme.css`	Tailwind テーマ、shadcn/ui 向け CSS 変数
`*-figma-variables.json`	Figma Variables 流し込み（light + dark）
`*-motion-tokens.json`	持続時間・easing・spring。 `--motion-runtime` 時は choreography / scroll レシピも
`*-anatomy.tsx`	コンポーネント解剖に基づく型付き React スタブ
`-voice.json` / `-prompts/`	Brand voice、v0 / Lovable / Cursor / Claude Artifacts 向けプロンプト
`*-mcp.json`	`designlang mcp` 向けディスク上メタ
`-grade.html` / `-grade.svg`	共有用 Design Report Card と README 用バッジ（`grade --badge`）
`*-battle.html`	`battle` コマンドの head-to-head 比較カード
`*-remix.<vocab>.html`	6 語彙（brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial）へのリスタイル
`*-site-system.json` 他	`site` コマンド: canonical トークン、coverage レポート、0–100 一貫性グレード
`verify.html` / `verify.json`	`verify` コマンド: トークン再現の 0–100 忠実度スコア

4 — 主要サブコマンド（v12 系）

抽出後のワークフロー

単一 URL 抽出（designlang <url>）に加え、README / CHANGELOG に載る v12 系サブコマンドの役割は次のとおり。

コマンド	役割
`site <url>`	pricing / docs / blog 等の canonical ページを巡回し、coverage 選出で 1 つの site-wide システムに合成（v12.23）
`studio`	最新抽出をインスペクタ付きライブプレビューで編集。DTCG / CSS / Tailwind をエクスポート（v12.19）
`verify <url>`	抽出トークンのみでコンポーネントを再構築し pixel-diff。0–100 忠実度スコア（v12.18）
`grade <url>`	8 次元の Design Report Card（HTML / SVG バッジ）。ライブ: `designlang.app/badge/<host>.svg`
`battle <a> <b>`	2 サイトの head-to-head 比較カード
`remix <url> --as <vocab>`	別語彙へのリスタイル（`--all` で 6 語彙一括）
`pack / brand / theme-swap / pair`	設計システム一式バンドル、13 章ブランドブック、OKLCH リカラー、2 サイト融合（7 軸）
`clone / apply / sync / drift / lint / visual-diff`	Next.js 雛形生成、フレームワーク自動適用、本番同期、CI 向けトークン監査
`mcp`	stdio MCP サーバー — トークン・領域・コンポーネントを MCP クライアントへ公開

--full は screenshots + responsive + interactions + deep-interact + --motion-runtime を一括有効化。--smart は低信頼分類を Atlas Cloud / OpenAI / Anthropic で補正可能（API キー要）。

5 — リリースの要点

v12.23 — Whole-site

site — 各トークンをページ coverage で選出。OKLab で近似色をマージ。*-site-coverage.md（🟢 site-wide / 🟡 section / 🔴 page-local）と *-site-consistency.md（0–100 グレード）を出力。
Claude プラグイン — マニフェストを現行版に同期。/site・/studio・/verify を追加しスラッシュコマンドは 11 本。

v12.18–12.22 — 検証・モーション・スタジオ

verify — トークン再現の pixel-diff と per-token-family 損失 attribution。--min で CI ゲート。
--motion-runtime — document.getAnimations() で実際の duration / stagger / scroll レシピを捕捉。Framer / GSAP emitter が推測ではなく観測値を使用。
studio — CLI と Web /studio で同一エンジン。WCAG ライブ採点、ダークモード、URL 共有。

v10 / v9 基盤（現行も継承）

v10 Intent — Page Intent（landing / pricing / docs 等）、Section Roles、Material / Imagery / UI ライブラリ推定、Prompt Pack。
v9 Motion & Ops — Motion Language、Component Anatomy v2、Brand Voice、lint / drift / visual-diff の CI 連携。

6 — 他ツールとの違い（抜粋）

マーケット上の空き

README では、単純に色とフォントだけ出す層と差をつけるため、次のような 構造寄りの能力が前面に出ている。

Layout System — グリッド/フレックス/コンテナ幅/ギャップ/整列のパターン採取。
Responsive 4 ビューポイント — ブレーク間で何が切り替わるか（表示/非表示、段数、フォントサイズ等）の差分を記述。
Interaction States — ホバー/フォーカス等をプログラム的に採取してスタイル遷移を具体値で残す（--interactions / --deep-interact）。
Runtime Motion — CSS 宣言だけでなく getAnimations() で実際に動く duration / stagger / scroll レシピを記録（--motion-runtime）。
Whole-site canonical — ホームページ 1 枚ではなく site で coverage ベースの site-wide トークンを合成。
Fidelity loop — verify が「抽出物で本物を再現できるか」をスコア化。弱い抽出は点数に反映される。
Live → Repo — sync / apply / clone でデプロイ済みサイトから再現用アプリ・トークン更新まで接続。
Grade / Battle / Remix — 品質レポート、競合比較、語彙変換まで同一 CLI から。

7 — 周辺エコシステム

同梱・連携

枠	内容
MCP	`designlang mcp --output-dir ./design-extract-output` — Cursor / Claude Code 等からトークン・領域・コンポーネントへアクセス
Claude Code プラグイン	11 スラッシュコマンド（`/extract` `/site` `/grade` `/battle` `/remix` `/pack` `/theme-swap` `/brand` `/pair` `/studio` `/verify`）。`/plugin marketplace add Manavarya09/design-extract`
Agent Skill	`npx skills add Manavarya09/design-extract` — Cursor 等 40+ エージェント向け（`/extract-design`）
GitHub Action	`github-action/` — PR 上のトークン差分を可視化する design regression guard
拡張	VS Code、Chrome（MV3）、Raycast、Figma プラグイン、公開 Web（`designlang.manavaryasingh.com` の extractor / studio / gallery）
Atlas Cloud	`--smart` 分類の OpenAI 互換ルート（`ATLASCLOUD_API_KEY`）。OpenAI / Anthropic キーも従来どおり

8 — 参考リンク

公式

GitHub: Manavarya09/design-extract
npm: designlang
公式 Web（バッジ経由。README 記載のライブサイト）