HTML2Style

Input a website, instantly generate its visual style.

Just provide a website URL, and HTML2Style automatically analyzes its colors, typography, spacing, layout, images, icons, and responsive rules, then generates a design style Skill you can hand directly to any Agent, along with an HTML preview.

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

Understand It in 30 Seconds

HTML2Style mainly helps you do three things:

1. Extract web styles: Automatically organize a website's colors, fonts, spacing, border radius, layout, images, rendering layers, observable animations, and responsive characteristics.

2. Understand web styles: Generate an HTML style board you can open directly, without having to find patterns from piles of code.

3. Reuse web styles: Hand the generated Skill to any Agent and let it design new pages according to that style.

It is not just a screenshot or a few color values. It extracts a more complete set of reusable style rules from a real web page.

Related MCP server: UIZZE

The simplest way to use it: hand it to an Agent

1. Open the project

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

2. Tell your Agent

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

To migrate a style you can say:

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

Codex, Claude Code, Cursor, Copilot, or any other Agent with terminal access can run this workflow. At runtime it uses Playwright or a local Chrome / Chromium / Edge—it does not depend on any particular Agent's proprietary browser.

What You Get

The final result is a standard Skill folder:

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

Humans just double-click assets/preview.html; Agents only need to read SKILL.md. Detailed rules and data are read by the Skill on demand, so users are not faced with a pile of entry files.

Below is an example of the generated HTML preview. It shows both the design rules and the sources that back them, not just a reference screenshot.

See the complete example Skill in this repository. After cloning the repo, you can double-click assets/preview.html in it locally; the example uses fictional content and does not redistribute real websites' branding or assets.

Three typical use cases

1. Extract a website's style

Good for competitor research, design review, and design-system teardowns. Outputs colors, typography, hierarchy, density, shape, image strategy, motion, and responsive rules.

2. Migrate the style to a new product

Good for requests like "design an Apple-style page for my product." HTML2Style keeps the measured hierarchy, density and layout logic, while requiring you to replace the original site's brand, content and protected assets.

3. Verify a web replica

Good for authorized refactors, migrations and visual regression checks. It verifies whether the page is complete, whether image sources and crops are correct, whether icons are missing, whether repeated components have consistent dimensions, and whether desktop and mobile match.

Quickest way to use it: hand it to an Agent

1. Open the project

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

2. Tell your Agent

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

To migrate a style, say:

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

Codex, Claude Code, Cursor, Copilot or any other Agent with terminal access can run this flow. At runtime it uses Playwright or a local Chrome / Chromium / Edge — it does not depend on any single vendor's Agent-specific browser.

What you get

The final result is a standard Skill folder:

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

Humans only need to double-click assets/preview.html; Agents only need to read SKILL.md. Detailed rules and data are read on demand by the Skill, so users no longer face a pile of entry-point files.

Below is an example of the generated HTML preview. It shows the design rules together with the evidence behind them, not just a reference screenshot.

See the complete example Skill in the repository. After cloning the repo, you can double-click assets/preview.html locally; the example uses fictional content and does not redistribute the real site's brand or assets.

Three typical use cases

1. Extract a website's style

Good for competitor research, design review, and design-system audits. Outputs colors, typography, hierarchy, density, shape, image strategy, motion and responsive rules, with evidence and confidence levels noted.

2. Migrate the style to a new product

Good for requests like "design an Apple-style page for my product." HTML2Style preserves the measured hierarchy, rhythm and layout logic, while requiring that the original site's brand, content, information architecture and protected assets be replaced.

3. Verify a web replica

Good for authorized refactors, migrations and visual regression. It checks whether the page is complete, whether image sources and crops are correct, whether icons are missing, whether repeated components have consistent sizes, and whether desktop and mobile match.

Run the CLI yourself

Environment requirements: Node.js 20+ and Chrome, Chromium, Edge or Playwright Chromium.

1. Check the browser

npm run doctor

2. Capture and measure

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

Have the Agent complete STYLE.md based on STYLE-measurements.md and assets/STYLE.template.md. Deterministic measurements and the Agent's design interpretation are kept in separate files.

3. Generate the style board and the design style 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

Only use the full html2style bundle archive mode when you need to keep raw evidence, automation entry points, or a self-contained snapshot.

Reuse across sessions

Move the entire Style Skill to a new project or to your Agent's skills directory, then say:

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

Agents that don't support auto-discovery of Skills can simply read SKILL.md from the folder. No prior chat history or a second visit to the reference site is required.

Why this is more reliable than a screenshot

• Real browser evidence: Collects DOM, computed styles, CSS variables, network resources Orthographic and the actually selected responsive images.

• Understands complex pages: Records non-default rendering layers and CSS/Web Animations, and sets up human-verification boundaries for Canvas and WebGL scenes.

• Covers multiple viewports: Checks tall/short desktop, tall/short tablet and mobile by default — not just one desktop above-the-fold view.

• Measurement separated from interpretation: style-profile.json holds deterministic measurements; STYLE.md holds the readable design interpretation.

• Clear migration boundaries: Design principles can be migrated; the original site's logo, copy, images and brand identity are not inherited.

• Verifiable output: Checks page type, real interactions and responsive behavior instead of relying on a single screenshot.

How it controls the browser

HTML2Style doesn't bundle a browser or require MCP to capture a page. Here's how it drives the browser:

• If you have Chrome, Chromium or Edge installed locally, HTML2Style launches an isolated browser with a temporary user profile and connects over the official Chrome DevTools Protocol (CDP). It closes the browser and deletes the profile when done; it never touches your everyday browser profile, cookies or login state.

• If only Playwright is installed, HTML2Style uses Playwright's bundled browser instead.

This direct connection path is called chrome-cdp in code and output. The CLI flag stays short: --chrome:

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

If you use MCP, the call chain becomes Agent → MCP → HTML2Style CLI → browser. MCP does not install or control the browser. See the table below for connection paths:

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

Agent integration

Chinese and English

• Chinese users get zh-CN output files by default.

• English users use --locale en.

• The generated SKILL.md and agents/openai.yaml follow the chosen locale.

• Commands, filenames, MCP tool names and automation interfaces stay in English for stable automation and international collaboration.

• The original site's content and measurements stay in their original language unless users explicitly ask for translation.

npm run mcp

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

See integrations/mcp.example.json for config examples.

If no browser is found:

npx playwright install chromium

If the page requires login, open the browser manually and sign in:

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

HTML2Style never asks for or stores your credentials.

Only when you are authorized to replicate the page:

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

Project boundaries

HTML2Style does not import pages into Figma, and it does not claim ownership of any website's content. The license covers only this project's code and templates, not the original site's brand, copy, images, icons or assets. Pages behind login walls, heavy anti-bot protection, closed shadow DOMs, or complex Canvas/WebGL scenes may not be fully capturable; such cases are recorded as evidence gaps rather than guessed at.

Development

npm test
npm run validate