design-extract

designlang（リポジトリ manavarya09/design-extract、npmパッケージ designlang）は、Node 20以上を要するMITライセンスのオープンソースCLIです。ヘッドレスブラウザを用いて任意のライブURLからデザインシステムを抽出し、17以上のファイルを ./design-extract-output にエクスポートします。出力には19セクションからなるデザイン言語マークダウン、W3C DTCG準拠のプリミティブ・セマンティック・コンポジット層を持つデザイントークン、Tailwind設定、shadcn/uiテーマ変数、Figma Variables JSON、CSSカスタムプロパティ、型付きReactコンポーネントアトミーのスタブ、モーショントークン、ブランドボイスJSON、v0/Lovable/Cursor/Claude Artifacts用の貼り付け済みプロンプトが含まれます。MCPサーバーペイロードの生成やMCPサーバーとしての実行も可能です。 単一ページのトークン抽出に加え、グリッド・フレックス・コンテナ幅・ギャップなどのレイアウトシステムキャプチャ、4つのブレークポイントでのレスポンシブクロール、ホバー/フォーカス/アクティブなどのインタラクション状態取得、document.getAnimations()によるランタイムモーションキャプチャ（期間・コリオグラフィ・スタッガー・スクロールレシピ）、共有トークンとルート固有トークンの融合解析を行うマルチページクロール、WCAG 2.1準拠のコントラストスコアリングおよび修正パレット提案、z-indexマップ、グラデーション検出、SVGアイコンの重複排除、フォントファイル検出、画像スタイル分類、スタック指紋付け、CSS健全性監査、ナビ・ヒーロー・プライシング・テストモニアル・CTA・フッターなどのセマンティック領域分類、再利用可能なコンポーネントクラスタリングといった高度な分析機能も備えます。 主要コマンド： - designlang URL … フル抽出 - site … 全体サイトの規範的システムと整合性グレード - grade … 共有可能なHTMLレポートカードとSVGバッジ生成 - battle … ヘッドツーヘッド grading - remix … brutalist/swiss/art-deco/cyberpunk/soft-ui/editorial など多様なボキャブラリでの再スタイリング - pack … 出力のバンドル - theme-swap … OKLCH色相回転による新規プライマリカラー適用 - brand … 13章からなるブランドガイドラインブック生成 - pair … 2つのデザインの融合 - dna … 30機能測定量空間内でのデザイン位置づけ - dna-corpus … カスタム参照コーパス構築 - fidelity … クローンとオリジナルの視覚・モーション比較と修正案提示 - gallery … 静的ギャラリー構築 - clone … Next.jsスタートラー生成 - apply … 検出したフレームワークへのトークン書き込み - drift/lint/visual-diff … CI対応チェック - sync/history/watch/diff … モニタリングと差分比較 マルチプラットフォームエミッターとしてiOS SwiftUI、Android Compose、Flutter、WordPress出力をサポート。MV3(activeTab)のChrome拡張によりワンクリックでハンドオフ可能。npmでグローバルインストールかエージェントスキルの追加が可能で、Claude Codeプラグイン（スラッシュコマンド対応）としても提供されます。オプションの--smart分類ではAtlas Cloudまたは既存のOpenAI/Anthropicキーを利用できます。 READMEでは、サイト抽出の基本操作は決定論的かつ無料であり、デザインスコアリングは欠測値の計測を代替しないことが明記されています。本プロジェクトはデザイン監査、トークン生成、アクセシビリティレビュー、デザインツーコードワークフロー、クローン忠実度測定に有用な、デザインツール兼開発者ツールのカテゴリに位置します。