HTML2Style

Gib eine Website ein und generiere mühelos ihren Webstil.

Du musst nur eine Website-URL angeben, und HTML2Style analysiert automatisch ihre Farben, Schriftarten, Abstände, Layout, Bilder, Icons und Responsive-Regeln und generiert einen Design-Style-Skill, der direkt an einen Agenten übergeben werden kann – inklusive HTML-Vorschau.

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

In 30 Sekunden verstanden

HTML2Style hilft dir bei drei Dingen:

1. Webstil extrahieren: Automatisch Farben, Schriftarten, Abstände, Eckenradien, Layout, Bilder, Rendering-Ebenen, beobachtbare Animationen und Responsive-Merkmale der Website erfassen.

2. Webstil verstehen: Ein direkt im Browser öffnbares HTML-Styleguide generieren, ohne in großen Code-Mengen nach Mustern suchen zu müssen.

3. Webstil wiederverwenden: Den generierten Skill an einen beliebigen Agenten übergeben, damit dieser neue Seiten nach diesem Stil entwirft.

Es ist kein einfacher Screenshot und auch nicht nur eine Handvoll Farbwerte. Es extrahiert aus einer echten Website einen vollständigeren Satz an Stilregeln, die weiterverwendet werden können.

Related MCP server: UIZZE

Die einfachste Nutzung: an einen Agenten übergeben

1. Projekt öffnen

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

2. Sag deinem Agenten

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

Wenn du einen Stil migrieren möchtest, sag:

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

Codex, Claude Code, Cursor, Copilot oder andere Agenten mit Terminal-Zugriff können diesen Ablauf ausführen. Zur Laufzeit wird Playwright oder ein lokales Chrome / Chromium / Edge verwendet – ohne Abhängigkeit vom proprietären Browser eines bestimmten Agenten.

Was du erhältst

Das Endergebnis ist ein standardmäßiger Skill-Ordner:

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

Der Mensch muss nur assets/preview.html doppelklicken; der Agent muss nur SKILL.md lesen. Detaillierte Regeln und Daten werden vom Skill bei Bedarf nachgeladen, sodass der Nutzer nicht mit einer Reihe von Einstiegsdateien konfrontiert wird.

Unten siehst du ein Beispiel der generierten HTML-Vorschau. Sie zeigt sowohl die Designregeln als auch die Quellen, die diese Regeln stützen – nicht nur einen Referenz-Screenshot.

Sieh dir den vollständigen Beispiel-Skill im Repository an. Nach dem Klonen des Repositories kannst du lokal assets/preview.html darin doppelklicken; das Beispiel verwendet fiktive Inhalte und verteilt keine Marken oder Assets der echten Website.

Drei typische Anwendungsfälle

1. Webstil extrahieren

Geeignet für Wettbewerbsanalyse, Design-Review und Design-System-Aufbereitung. Ausgabe von Farben, Schriftarten, Hierarchie, Dichte, Formen, Bildstrategie, Animationen und Responsive-Regeln – mit Belegen und Konfidenzwerten.

2. Stil auf ein neues Produkt übertragen

Geeignet für Anforderungen wie „Entwirf eine Apple-ähnliche Seite für mein Produkt“. HTML2Style behält die gemessene Hierarchie, den Rhythmus und die Layoutlogik bei, verlangt aber, dass Marke, Inhalte, Informationsarchitektur und geschützte Assets der Originalseite ersetzt werden.

3. Webseiten-Nachbildung verifizieren

Geeignet für autorisierte Refactorings, Migrationen und visuelle Regressionstests. Es prüft, ob die Seite vollständig ist, ob Bildquellen und Zuschnitte korrekt sind, ob Icons fehlen, ob wiederholte Komponenten konsistente Größen haben und ob Desktop und Mobil übereinstimmen.

CLI selbst ausführen

Umgebungsanforderungen: Node.js 20+ sowie Chrome, Chromium, Edge oder Playwright Chromium.

1. Browser prüfen

npm run doctor

2. Erfassen und messen

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

Lass den Agenten STYLE.md auf Basis von STYLE-measurements.md und assets/STYLE.template.md erstellen. Deterministische Messungen und die gestalterische Interpretation des Agenten werden getrennt gespeichert.

3. Styleguide und Design-Style-Skill generieren

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

Nur wenn du rohe Beweise, Manifeste oder Automatisierungs-Einstiegspunkte speichern musst, verwende den alten vollständigen Archivierungsmodus html2style bundle.

Wiederverwendung über Sessions hinweg

Verschiebe den gesamten Design-Style-Skill in ein neues Projekt oder in das Skills-Verzeichnis deines Agenten und sag dann:

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

Agenten, die Skills nicht automatisch erkennen, können auch direkt SKILL.md im Ordner lesen. Es sind weder der ursprüngliche Chatverlauf noch ein erneuter Besuch der Referenzwebsite erforderlich.

Warum zuverlässiger als nur ein Screenshot

• Echte Browser-Beweise: Erfassung von DOM, berechneten Stilen, CSS-Variablen, SVG, Netzwerkressourcen und tatsächlich ausgewählten responsiven Bildern.

• Komplexe Seiten verstehen: Erfassung nicht standardmäßiger Rendering-Ebenen, CSS/Web Animations sowie manuell verifizierbarer Grenzen für Scroll-, Canvas- und WebGL-Szenarien.

• Verschiedene Viewports abdecken: Standardmäßig werden Desktop hoch/niedrig, Tablet hoch/niedrig und Mobil geprüft – nicht nur ein Desktop-Erstbildschirm.

• Messung und Interpretation getrennt: style-profile.json speichert deterministische Daten, STYLE.md speichert lesbare Designregeln.

• Klare Migrationsgrenzen: Designprinzipien sind übertragbar; Logo, Texte, Bilder und Markenidentität der Originalseite können nicht automatisch übernommen werden.

• Ergebnisse sind verifizierbar: Prüfung von statischem Layout, zeit- oder scrollbasierten Phasen und echten Interaktionen je nach Seitentyp – statt nur eines Screenshots.

Wie es den Browser steuert

HTML2Style bündelt kein Browser-CLI eines bestimmten Anbieters und benötigt auch kein MCP, um Webseiten zu erfassen. Es gibt vier verschiedene Rollen:

Die Standard-Aufrufkette ist:

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

Wenn lokal bereits Chrome, Chromium oder Edge vorhanden ist, startet HTML2Style einen isolierten Browser mit einem temporären Benutzerverzeichnis und verbindet sich über das offizielle Chrome DevTools Protocol (CDP) von Chromium. Nach der Erfassung wird der Browser geschlossen und das temporäre Verzeichnis gelöscht – das täglich genutzte Chrome wird nicht gesteuert und weder Cookies, Verlauf noch Login-Status des Original-Browsers werden gelesen.

In Code und Ausgabe wird dieser direkte Verbindungspfad als chrome-cdp bezeichnet. Der CLI-Parameter verwendet weiterhin das kürzere --backend chrome:

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

Bei Verwendung von MCP ist die Aufrufkette nur um eine Adapterebene erweitert: Agent → MCP → HTML2Style CLI → Browser. MCP ist nicht für die Installation oder Steuerung des Browsers zuständig.

Kompatibel mit verschiedenen Agenten

Chinesisch und Englisch

• Chinesische Nutzer erhalten standardmäßig zh-CN-Dokumentation.

• Englische Nutzer verwenden --locale en.

• SKILL.md und agents/openai.yaml des generierten Skills folgen der gewählten Sprache.

• Befehle, Dateinamen, MCP-Toolnamen und JSON-Felder bleiben Englisch, um Automatisierung und internationale Zusammenarbeit stabil zu halten.

• Inhalte und Messbeweise der Originalwebsite bleiben in der Originalsprache, sofern der Nutzer keine Übersetzung ausdrücklich wünscht.

npm run mcp

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

Ein Konfigurationsbeispiel findest du in integrations/mcp.example.json.

Wenn kein Browser erkannt wird:

npx playwright install chromium

Wenn die Seite eine Anmeldung erfordert, öffne einen temporär sichtbaren Browser und melde dich manuell an:

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

HTML2Style fordert keine Zugangsdaten an und speichert sie auch nicht.

Nur verwenden, wenn du berechtigt bist, die Zielwebsite nachzubilden:

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

Projektgrenzen

HTML2Style importiert keine Webseiten in Figma und beansprucht auch kein Eigentum an erfassten Inhalten Dritter. Die MIT-Lizenz deckt nur den Code und die Vorlagen dieses Projekts ab, nicht Bilder, Schriftarten, Logos, Icons, Texte oder Marken-Assets der Originalwebsite.

Komplexe Canvas-/WebGL-Inhalte, geschlossene Shadow Roots, Anti-Scraping-Herausforderungen, Video-Zeitachsen und alle Interaktionszustände können derzeit nicht vollständig erfasst werden. Diese Fälle werden als Beweislücken dokumentiert und nicht vom Agenten geraten.

Entwicklung

npm test
npm run validate

Bitte lies vor dem Einreichen von Änderungen CONTRIBUTING.md; Sicherheitsprobleme melde gemäß SECURITY.md.

Lizenz

MIT. Die Inhalte und Assets der erfassten Websites verbleiben bei den jeweiligen Rechteinhabern.