HTML2Style

웹사이트 URL만 입력하면 해당 웹페이지의 스타일을 쉽게 추출할 수 있습니다.

URL만 제공하면 HTML2Style이 색상, 폰트, 간격, 레이아웃, 이미지, 아이콘, 반응형 규칙을 자동으로 분석하여 Agent에 바로 전달할 수 있는 디자인 스타일 Skill을 생성하고, HTML 미리보기까지 제공합니다.

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

30초 요약

HTML2Style은 다음 세 가지 작업을 대신 처리합니다:

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을 더블클릭하면 됩니다. 예시는 가상의 콘텐츠를 사용하며, 실제 웹사이트의 브랜드와 자산을 재배포하지 않습니다.

대표적인 세 가지 사용 사례

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. HTML 스타일 보드 및 디자인 스타일 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 완전 아카이브 모드를 사용하세요.

세션 간 재사용

디자인 스타일 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 없이도 웹페이지를 수집할 수 있습니다:

기본 호출 관계는 다음과 같습니다:

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

로컬에 Chrome, Chromium 또는 Edge가 이미 있다면, HTML2Style은 임시 사용자 디렉터리를 사용하는 격리된 브라우저 인스턴스를 시작합니다. 이때 Chrome DevTools Protocol(CDP)을 통해 브라우저를 제어하며, 작업이 끝나면 브라우저를 종료하고 임시 디렉터리를 삭제합니다. 기존 브라우저의 쿠키나 사용자 데이터를 읽지 않습니다.

코드와 출력물에서는 이 연결 방식을 html2style로 표기합니다. CLI 인자도 동일하게 사용합니다:

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

MCP를 사용하는 경우 호출 관계는 Agent → MCP Server → HTML2Style CLI → Browser가 됩니다. MCP는 어댑터일 뿐이며, CLI가 직접 브라우저를 제어합니다.

다른 Agent와의 호환성

기본 호출 구조는 다음과 같습니다:

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

로컬에 Chrome, Chromium 또는 Edge가 이미 설치되어 있다면 HTML2Style은 임시 사용자 디렉터리로 브라우저를 실행합니다. Chrome DevTools Protocol(CDP)을 통해 제어하며, 수집이 끝나면 브라우저를 닫고 임시 데이터를 삭제합니다. 기본 브라우저의 쿠키나 세션을 사용하지 않습니다.

코드와 출력에서 이 연결 방식을 chromium-cdp라고 부릅니다. CLI 파라미터는 --browser chrome을 사용합니다:

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

MCP를 사용하는 경우 연결 방식은 Agent → MCP → Chrome DevTools Protocol(CDP) → Chrome이 됩니다. MCP는 필수가 아니며, CLI를 직접 호출하는 것과 동일한 데이터를 생성하고 동일한 품질을 유지합니다.

다양한 Agent 호환성

기본 호출 관계는 다음과 같습니다:

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

로컬에 Chrome, Chromium, Edge가 이미 있는 경우 HTML2Style은 임시 사용자 디렉터리를 사용하는 격리된 브라우저 인스턴스를 시작하고 Chrome DevTools Protocol(CDP)를 통해 연결합니다. 이렇게 하면 기본 브라우저 프로필, 쿠키, 로그인 상태에 영향을 주지 않습니다.

이 직접 연결 방식을 코드와 출력에서는 --browser chrome으로 표시합니다. 특정 브라우저 경로가 필요하면 --browser-path 인자를 지원합니다.

MCP를 사용하는 경우, MCP는 CLI를 호출하는 역할만 하며 브라우저 설치나 제어를 담당하지 않습니다.

왜 스크린샷만 제공하는 것보다 더 신뢰할 수 있을까요?

• 실제 브라우저 증거: DOM, 계산된 스타일, CSS 변수, SVG, 네트워크 리소스, 실제 선택된 반응형 이미지를 수집합니다.

• 복잡한 페이지 이해: CSS/Web Animations, 렌더링 레이어를 기록하고 스크롤·Canvas·WebGL 시나리오에 대한 수동 검증 경계를 설정합니다.

• 다양한 뷰포트 검증: 데스크톱(높음/낮음), 태블릿(높음/낮음), 모바일을 기본으로 확인하여 단일 스크린샷에 의존하지 않습니다.

• 측정과 해석 분리: STYLE-measurements.md에는 확정 데이터를, STYLE.md에는 Agent의 디자인 해석을 저장합니다.

기본 사용 흐름

1. 콘텐츠 수집

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

2. 스타일 측정 및 분석

npm run mcp

3. 스타일 보드 및 Skill 생성

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

사전 요구 사항

• Node.js 20 이상

• Chrome, Chromium 또는 Edge (또는 Playwright 브라우저 설치)

빠른 시작

npx playwright install chromium

CLI 사용법

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

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

출력물

기여

npm test
npm run validate

라이선스

Apache 2.0