HTML2Style

ウェブサイトを入力するだけで、そのページのスタイルを簡単に生成できます。

ウェブサイトのURLを指定するだけで、HTML2Styleが色、フォント、間隔、レイアウト、画像、アイコン、レスポンシブルールを自動分析し、そのままAgentに渡せるデザインスタイルSkillをHTMLプレビュー付きで生成します。

网站 URL  →  HTML2Style  →  设计风格 Skill
                              ├─ SKILL.md：Agent 入口
                              ├─ assets/preview.html：人类预览
                              └─ references/：风格规则与测量数据

30秒でわかる

HTML2Styleが主にやってくれることは次の3つです：

1. ウェブページのスタイルを抽出： サイトの色、フォント、間隔、角丸、レイアウト、画像、レンダリングレイヤー、観測可能なアニメーション、レスポンシブ特性を自動整理します。

2. ウェブページのスタイルを理解： そのまま開けるHTMLスタイルボードを生成するので、大量のコードから規則を探す必要はありません。

3. ウェブページのスタイルを再利用： 生成したSkillを任意のAgentに渡して、このスタイルに沿った新しいページをデザインさせます。

単にスクリーンショットを撮るのでも、色の値をいくつか生成するだけでもありません。実際のウェブページから、より完全で使い続けられるスタイルルールを抽出します。

Related MCP server: UIZZE

最も簡単な使い方：Agentに任せる

1. プロジェクトを開く

git clone https://github.com/jackguihx-alt/html2style.git
cd html2style
npm install

2. Agentにこう伝える

请阅读这个仓库的 SKILL.md，提取 https://example.com 的网页风格，
生成一个可以复用的设计风格 Skill，并提供 HTML 预览。使用中文，不要开始复刻网站。

スタイルを移行したい場合はこう伝えます：

请阅读 SKILL.md，提取 https://example.com 的网页风格，
并用这套风格为我的产品设计一个新页面。不要复制原站品牌、文案和图片。

Codex、Claude Code、Cursor、Copilot、その他ターミナル機能を持つAgentなら、このフローを実行できます。実行時はPlaywrightまたはローカルのChrome / Chromium / Edgeを使用し、特定のAgent専用ブラウザには依存しません。

手に入るもの

最終成果物は標準のSkillフォルダです：

product-editorial-style/
├── SKILL.md                       # Agent 唯一入口
├── agents/
│   └── openai.yaml                # Skill UI 与快捷提示
├── assets/
│   └── preview.html               # 双击查看风格
└── references/
    ├── STYLE.md                   # 完整风格规则
    └── style-profile.json         # 测量数据

人間は assets/preview.html をダブルクリックするだけでよく、Agentは SKILL.md を読むだけで済みます。詳細なルールとデータはSkillが必要に応じて読み込むため、ユーザーが多数のエントリファイルに直面する必要はありません。

以下は生成後のHTMLプレビューの例です。これは単なる参考スクリーンショットではなく、デザインルールとそれを支える根拠を同時に示します。

リポジトリ内の完全なサンプルSkillを参照してください。リポジトリをクローンしたら、ローカルでその中の assets/preview.html をダブルクリックできます。サンプルは架空のコンテンツを使用しており、実際のWebサイトのブランドや素材を再配布するものではありません。

代表的な3つのシナリオ

1. ウェブサイトのスタイルを抽出

競合調査、デザインレビュー、デザインシステムの整理に適しています。色、フォント、階層、密度、形状、画像戦略、アニメーション、レスポンシブルールを出力し、根拠と信頼度を明記します。

2. スタイルを新製品に移行

「私の製品にApple風のページをデザインして」といったニーズに適しています。HTML2Styleは計測で得られた階層、リズム、レイアウトのロジックを保持しつつ、元サイトのブランド、コンテンツ、情報アーキテクチャ、保護されたアセットの置き換えを要求します。

3. ウェブページの複製を検証

権限のあるリファクタリング、移行、ビジュアルリグレッションテストに適しています。ページが完全か、画像の出典とトリミングが正しいか、アイコンが欠落していないか、繰り返しコンポーネントのサイズが一貫しているか、デスクトップとモバイルが一致しているかをチェックします。

CLIを自分で実行する

環境要件：Node.js 20+、およびChrome、Chromium、Edge、またはPlaywright Chromium。

1. ブラウザを確認する

npm run doctor

2. 収集して計測する

node bin/html2style.mjs extract https://example.com evidence.json --profile full
node bin/html2style.mjs profile evidence.json style-profile.json \
  --markdown STYLE-measurements.md
cp assets/STYLE.template.md STYLE.md

Agentに STYLE-measurements.md と assets/STYLE.template.md を基に STYLE.md を完成させます。決定的な計測とAgentによるデザイン解釈は分けて保存されます。

3. スタイルボードとデザインスタイルSkillを生成する

node bin/html2style.mjs preview STYLE.md style-board.html

node bin/html2style.mjs skill product-editorial-style \
  --style STYLE.md \
  --profile style-profile.json \
  --preview style-board.html \
  --measurements STYLE-measurements.md \
  --locale zh-CN

元の証拠、manifest、自動化エントリを保存する必要がある場合のみ、従来の html2style bundle 完全アーカイブモードを使用します。

セッションをまたいだ再利用

デザインスタイルSkill全体を新しいプロジェクトやAgentのskillsディレクトリに移動して、こう伝えます：

使用 $product-editorial-style，把这套网页风格应用到我的新任务。

Skillの自動検出に対応していないAgentでも、フォルダ内の SKILL.md を直接読み取れます。元のチャット履歴も、参考サイトを再度開く必要もありません。

スクリーンショットだけより信頼できる理由

• 実際のブラウザによる証拠： DOM、計算済みスタイル、CSS変数、SVG、ネットワークリソース、実際に選択されたレスポンシブ画像を収集します。

• 複雑なページを理解： 非デフォルトのレンダリングレイヤー、CSS/Web Animationsを記録し、スクロール、Canvas、WebGLシーンには人間による検証境界を設けます。

• 異なるビューポートをカバー： デフォルトでデスクトップ（高/低）、タブレット（高/低）、モバイルをチェックし、デスクトップのファーストビューのみを検証するわけではありません。

• 計測と解釈を分離： style-profile.json に決定的なデータを保存し、STYLE.md に読みやすいデザインルールを保存します。

• 移行の境界を明確化： デザイン原則は移行できますが、元サイトのロゴ、コピー、画像、ブランドアイデンティティは自動的に継承できません。

• 結果を検証可能： ページタイプに応じて、静的構図、固定時間またはスクロール段階、実際のインタラクションをチェックし、単一のスクリーンショットだけに頼りません。

ブラウザをどう制御するか

HTML2Styleは特定ベンダーのブラウザCLIを同梱せず、ウェブページ収集にMCPも必要としません。ここには4つの異なる役割があります：

デフォルトの呼び出し関係は次のとおりです：

Agent
  ↓ 阅读 SKILL.md
HTML2Style CLI（本项目代码）
  ├─ Playwright API（可选开源依赖）
  ├─ Chrome CDP（直接连接本机 Chrome，不经过第三方 CLI）
  └─ agent-browser（仅检测已安装版本，作为旧环境兼容后端）

ローカルにChrome、Chromium、Edgeが既にある場合、HTML2Styleは一時的なユーザーディレクトリを使用する隔離ブラウザを起動し、Chromium公式のChrome DevTools Protocol（CDP）で接続します。収集が終わるとブラウザを閉じて一時ディレクトリを削除するため、日常使用中のChromeを操作したり、元のブラウザのCookie、履歴、ログイン状態を読み取ったりすることはありません。

コードと出力では、この直接接続パスを chrome-cdp と呼びます。CLIパラメータはより短い --backend chrome を使用します：

html2style extract https://example.com evidence.json --backend chrome

MCPを使用する場合、呼び出し関係はアダプタが1層増えるだけです：Agent → MCP → HTML2Style CLI → ブラウザ。MCPはブラウザのインストールや制御を担当しません。

さまざまなAgentとの互換性

中国語と英語

• 中国語ユーザーにはデフォルトで zh-CN の説明ファイルを生成します。

• 英語ユーザーは --locale en を使用します。

• 生成されるSkillの SKILL.md と agents/openai.yaml は言語に追従します。

• コマンド、ファイル名、MCPツール名、JSONフィールドは英語のままにし、自動化と国際協働の安定性を確保します。

• 元サイトのコンテンツと計測証拠は原文のまま保持し、ユーザーが明示的に翻訳を要求した場合のみ翻訳します。

npm run mcp

{
  "mcpServers": {
    "html2style": {
      "command": "node",
      "args": ["/absolute/path/to/html2style/mcp/server.mjs"]
    }
  }
}

設定例は integrations/mcp.example.json を参照してください。

ブラウザが検出されない場合：

npx playwright install chromium

ページでログインが必要な場合は、一時的な可視ブラウザを開いて手動でログインします：

node bin/html2style.mjs extract https://example.com evidence.json \
  --headed --login-wait 60

HTML2Styleはアカウントのパスワードを要求したり保存したりしません。

対象サイトを複製する権限がある場合のみ使用します：

node bin/html2style.mjs assets replica.html --base-url https://example.com
node bin/html2style.mjs extract ./replica.html replica-evidence.json --profile full
node bin/html2style.mjs audit evidence.json replica-evidence.json --mode complete
node bin/html2style.mjs compare original.png replica.png comparison.html

プロジェクトの範囲

HTML2StyleはウェブページをFigmaにインポートせず、収集した第三者のコンテンツに対する所有権を主張しません。MIT Licenseはこのプロジェクトのコードとテンプレートのみを対象とし、元サイトの画像、フォント、ロゴ、アイコン、コピー、ブランド資産は対象外です。

複雑なCanvas / WebGL、closed shadow root、アンチスクレイピングチャレンジ、ビデオタイムライン、すべてのインタラクション状態は、現時点では完全な収集を保証できません。これらの状況はAgentの推測ではなく、証拠のギャップとして記録されます。

開発

npm test
npm run validate

変更を送信する前に CONTRIBUTING.md をお読みください。セキュリティの問題は SECURITY.md に従って報告してください。

License

MIT。収集されたWebサイトのコンテンツと資産は、引き続き元の権利者に帰属します。