0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@toki_mwc

designlang v6.0 を試す — 任意WebサイトをLLM食わせ用markdownに5秒で分解する

0
Last updated at Posted at 2026-04-17

2026年4月時点の検証内容です。designlang v6.0.0、Node.js v20.19.0、Windows 11 + Playwright 1.59.1 (Chromium 147) で検証しています。

TL;DR

  • designlang v6.0.0（2026-04-16リリース）を試した。任意URLから 5 秒で 9 個の出力ファイル（AI-optimized markdown / W3C design tokens / Tailwind config / shadcn/ui theme / CSS variables / Figma variables / React theme / WordPress theme / HTML preview）を生成する
  • 仕組み: Playwright で headless Chromium を起動し、live DOM の computed style を最大 5000 要素まで walk する。CSS ファイルを parse しないので styled-components / Emotion / Tailwind / CSS Modules どれでも動く
  • Vercel (Design Score 68/100 Grade D) と自分のブログ (Score 84/100 Grade B) で実行。Vercel より良い点があったという話ではない — 複雑なサイトほど容赦なく減点される設計
  • npx skills add Manavarya09/design-extract で Claude Code agent skill として直接登録できる
  • Revenue 観点: LP 受託量産 / デザインシステム提案書 / ブランドガードレール監視 / 競合サイト分析、いずれも「手作業ならダルい調査」を秒で終わらせる系の用途に刺さる

この記事で示すこと

実際に動かして得られた出力と、1つだけ明確になった使い所と限界を先出しする。

対象 抽出時間 ファイル合計 Design Score 備考
https://vercel.com 5.6 秒 9 個 / 120KB 68 / 100 (D) 3030 要素。Border Radii で減点。
自分のブログ (Hexo製) 5.1 秒 9 個 / 54KB 84 / 100 (B) 13 色のみ。シンプルなほど高得点になる。

Vercel の方が low score なのは悪い設計だからではなく、色数・shadow 数・radius の分散が多い方が「統制が取れていない」と採点されるため。一貫性スコアと覚えたほうがいい。

何をするツールか

designlang https://stripe.com

URL を渡すと以下を出力する。

  • AI-optimized markdown — 19 セクション（Color Palette / Typography / Spacing / Border Radii / Shadows / CSS Custom Properties / Breakpoints / Transitions / Component Patterns / Layout System / Responsive Design / Interaction States / Accessibility / Gradients / Z-Index Map / SVG Icons / Font Files / Image Style Patterns / Quick Start）。LLM に投げて同じデザインの別ページを生成させる前提で構造化されている
  • W3C Design Tokens JSON — デザイントークンの業界標準フォーマット
  • Tailwind config — theme.extend に全トークンが入った、そのまま差し替え可能な config
  • shadcn/ui theme — globals.css 用の CSS 変数セット
  • CSS variables / React theme / Figma variables / WordPress theme — 他エコシステム向け
  • Visual HTML preview — ブラウザで開けばカラーチップ・タイポグラフィスケール・A11y スコアを目視確認できる

技術的な中身は Playwright の headless browser で対象サイトを描画し、DOM を walk して getComputedStyle() で全要素の確定済みスタイルを読む方式。CSS ファイルは一切読まない。だから:

  • styled-components / Emotion / CSS-in-JS でもOK（ブラウザ側で解決されたスタイルを見るので）
  • Tailwind の class 解析も不要（最終的な computed style だけ取る）
  • dynamic な CSS (ダークモード等) も --dark オプションで追加キャプチャできる

インストール

Windows の NVM (nvm4w) 環境では少しだけ罠があった。グローバルインストール時の postinstall が npx playwright install を走らせるが、NVM の PATH 問題で失敗する。

# 1. scripts を飛ばしてインストール
npm install -g designlang --ignore-scripts

# 2. Playwright Chromium を手動インストール
node "C:/Users/<USER>/AppData/Local/nvm/v20.19.0/node_modules/designlang/node_modules/playwright/cli.js" install chromium

Chromium 本体 (179MB) と headless shell (111MB) を落とすので、初回は約 300MB のダウンロード。

macOS / Linux なら npm install -g designlang 一発で動くはず（筆者未検証）。

実行してみる

designlang https://vercel.com -o ./vercel-test --verbose

5.6 秒後に 9 ファイル。verbose ログのサマリ部がいい:

  Colors: 27 unique colors
  Fonts: Geist, Geist Mono, monospace
  Spacing: 13 values (base: 2px)
  Shadows: 11 unique shadows
  Radii: 10 unique values
  Breakpoints: 45 breakpoints
  Components: 10 patterns detected
  CSS Vars: 411 custom properties
  Layout: 55 grids, 492 flex containers
  Design Score: 68/100 (D) — 4 issues
  Gradients: 11 unique gradients
  Z-Index: 14 layers (1 issues)
  Icons: 89 SVG icons (filled)
  Font Files: 23 fonts (self-hosted, cdn)
  Images: 10 images, 3 style patterns
  A11y: 94% WCAG score (7 failing pairs)

3030 要素を分析して 5.6 秒。 Playwright が render に使う時間が支配的で、それ以降の DOM walk は早い。

生成される HTML プレビュー（ブラウザで開くだけ）はこんな感じ:

designlang-vercel-preview

カラーチップ・フォントファミリー・スペーシング・シャドウ・A11y スコアがビジュアルで一覧できる。コードを書かなくても結果を確認できる点は地味に便利。

出力された markdown の一部を見る

先頭 3KB を抜粋:

# Design Language: Vercel: Build and deploy the best web experiences with the AI Cloud

> Extracted from `https://vercel.com` on April 17, 2026
> 3030 elements analyzed

## Color Palette

### Primary Colors

| Role | Hex | RGB | HSL | Usage Count |
|------|-----|-----|-----|-------------|
| Primary | `#0068d6` | rgb(0, 104, 214) | hsl(211, 100%, 42%) | 7 |
| Secondary | `#52aeff` | rgb(82, 174, 255) | hsl(208, 100%, 66%) | 6 |

### Neutral Colors

| Hex | HSL | Usage Count |
|-----|-----|-------------|
| `#171717` | hsl(0, 0%, 9%) | 4462 |
| `#4d4d4d` | hsl(0, 0%, 30%) | 1052 |
| `#fafafa` | hsl(0, 0%, 98%) | 160 |
...

Usage Count が出る点が素晴らしい。使用回数の多い色 = デザインの主軸という情報が LLM にとって有用。「このサイトの primary は #171717 で 4462 回使われている。secondary は #4d4d4d」と Claude に伝えれば、再構築精度が一段上がる。

AI-optimized markdown は何が AI 最適化なのか

「LLM に食わせて別ページを生成させる」前提で設計されていると、具体的には次のような違いがある。

  1. 頻度順に並んでいる — primary / accent などの意味づけがランキングで自動決定
  2. 数値の冗長度を切ってある — rgb / hsl / hex を併記、LLM が迷わない
  3. CSS スニペット単位で切り出されている — component pattern section に box-shadow / border-radius / padding がそのままコピペ可能な CSS として並ぶ
  4. Layout skeleton が別セクションになっている — grid column / flex direction / container width / gap value が分離されている

実際に vercel-com-design-language.md を Claude に貼り付けて「このデザインシステムで pricing ページを作って」と頼むと、カラー・タイポ・component pattern が反映された MDX が返ってくる。手動でデザインガイドを書く労力が消える。

Claude Code の agent skill として入れる

npx skills add Manavarya09/design-extract

これで Claude Code に designlang が skill として登録され、エージェント内から呼べるようになる。

r/ClaudeAI のスレ（r/ClaudeAI comments/1sm23sp/）で crypt0amat00r 氏が「OpenClaw skill 化したらうまく動いた」と書いていて、作者も「openclaw のこと考えてなかったけど、そう使ってくれて嬉しい」と応答していた。ツール単体ではなく、エージェントの手足として組み込むのが本命の使い方だろう。

自分のブログで実行してみる（dogfooding）

designlang https://mwcportfolio.com -o ./tokiblog-test

結果:

  Colors: 13 unique colors
  Fonts: NotoSansJP, Font Awesome 6 Free, Times New Roman, Font Awesome 6 Brands
  Spacing: 8 values (base: 2px)
  Shadows: 3 unique shadows
  Components: 8 patterns detected
  Layout: 0 grids, 39 flex containers
  Design Score: 84/100 (B) — 3 issues
  A11y: 93% WCAG score (2 failing pairs)
  Completed in 5.1s

自分のサイトの方が Vercel より Design Score が高い、と素直に喜ぶのは早計。シンプルなほど加点される採点ロジックなので、機能が少ない = スコア高い、になりがち。とはいえ

  • 色が 13 色に収まっている
  • フォント 4 族（うち 2 族は Font Awesome）でミニマル
  • WCAG 93%（--dark モードを追加すれば改善余地あり）

といった定量的な把握が秒で得られるのは純粋に価値がある。自分のブログを何度も見ているのに、「何色使ってたっけ」と即答できなかった自分に気づいた。

独自機能で効くもの Top 3

1. Layout system extraction

Layout: 55 grids, 492 flex containers のような構造骨格の情報が取れる。ほとんどの design token エクスポーター（Figma プラグイン系）は色とフォントしか取らないが、designlang は grid-template-columns の種類・flex-direction の分布・container width の統計まで拾う。

2. Design Score with 7 categories

  68/100  Grade: D
  Color Discipline     ██████████░░░░░░░░░░ 50
  Typography           ██████████████░░░░░░ 70
  Spacing System       ████████████████░░░░ 80
  Shadows              ██████████░░░░░░░░░░ 50
  Border Radii         ████████░░░░░░░░░░░░ 40
  Accessibility        ███████████████████░ 94
  Tokenization         ████████████████████ 100

コンサル提案書の最初のページに載せたら強い。「御社の現状スコア」を 5 秒で作れる営業資料生成機能と読み替えられる。

3. Multi-brand comparison

designlang brands stripe.com vercel.com github.com linear.app

複数ブランドを並べて比較行列にする。これは個別抽出を N 回やるより体験が良い — 「linear は grade S だが vercel は D」みたいな相対値で語れるようになる。

限界

  • Cloudflare / 強力な bot detection を持つサイトは弾かれる。NYT / WSJ / 有料記事は不可
  • ログイン必須のページは --cookie / --header オプションで部分対応 だが OAuth とかは自力で session 作ってクッキーを渡す必要あり
  • component 検出は完璧ではない — 同じボタンを10個並べた単純なサイトでは精度高いが、複雑な UI では取りこぼす
  • --full モードはトークンを食う — screenshots + responsive + interactions すべてオンにすると 30 秒以上かかる。LLM に渡す markdown も巨大化するので、何を読ませたいか考えて必要なフラグだけ立てるのが正解

誰が何に使うか — Revenue 視点

思いついた適用領域:

  • 受託 LP 量産: クライアントサイトを抽出 → Claude に食わせて LP の別バリアント生成 → 納品。designlang + 既存 LLM ワークフロー の組合せで単価を落とさず量を稼げる
  • デザインシステム診断書: Design Score を根拠にした簡易診断 PDF を無料配布 → コンサル本番への導線
  • ブランドガードレール監視: designlang watch https://own-site.com --interval 60 を CI に組み込んで、リリース前に色やフォントが意図せず変わっていないか検出
  • 競合サイト分析: designlang brands で N 社を一気に比較 → スライド化 → ピッチ資料の裏付け

いずれも「手作業なら 1 日かかる調査が 1 分で終わる」系。Claude Code のスキルとして仕込んでおけば、自然言語で呼び出せる。

所感

  • v6.0.0 が 2026-04-16 リリースと本当に新しい。npm パッケージで 7 バージョン目なので成熟してはいないが、壊れてはいない
  • README のセールス文言には誇張あり（「layout extraction で architecture が取れる」は半分本当、半分期待過剰）。実物の markdown を開いてから判断するのが早い
  • Playwright ベースなので再現性高い、MIT ライセンスなので商用利用 OK、依存が 4 つ（playwright / commander / chalk / ora）と軽量
  • Claude Code skill として登録する価値はある。自分の用途だと「クライアントサイトの design token を 5 秒で抽出 → Claude に食わせて LP ドラフト生成」のパイプラインに組み込みたい

参考

試したコマンドまとめ

# インストール（Windows NVM 環境の場合）
npm install -g designlang --ignore-scripts
node <NVM_PATH>/node_modules/designlang/node_modules/playwright/cli.js install chromium

# 単発抽出
designlang https://vercel.com -o ./out

# デザインスコアだけ確認
designlang score https://vercel.com

# 複数サイト比較
designlang brands stripe.com vercel.com linear.app

# ダークモード対応で抽出
designlang https://vercel.com --dark

# レスポンシブ・インタラクション全部入り
designlang https://vercel.com --full

# Claude Code skill として登録
npx skills add Manavarya09/design-extract
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?