HTML2Style

Introduce un sitio web y genera fácilmente su estilo de página.

Solo necesitas proporcionar la URL de un sitio web, y HTML2Style analizará automáticamente sus colores, fuentes, espaciados, diseño, imágenes, iconos y reglas de diseño responsive, generando un Skill de estilo de diseño que puedes entregar directamente a un Agente, junto con una vista previa en HTML.

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

Entenderlo en 30 segundos

HTML2Style te ayuda principalmente a hacer tres cosas:

1. Extraer el estilo del sitio web: Organiza automáticamente los colores, fuentes, espaciados, radios de borde, diseño, imágenes, capas de renderizado, animaciones observables y características responsive del sitio.

2. Comprender el estilo del sitio web: Genera un tablero de estilo HTML que puedes abrir directamente, sin necesidad de buscar patrones en grandes cantidades de código.

3. Reutilizar el estilo del sitio web: Entrega el Skill generado a cualquier Agente para que diseñe nuevas páginas siguiendo este estilo.

No es simplemente tomar una captura de pantalla, ni solo generar unos pocos valores de color. Extrae un conjunto más completo y reutilizable de reglas de estilo a partir de sitios web reales.

Related MCP server: UIZZE

La forma más sencilla: Entregárselo a un Agente

1. Abre el proyecto

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

2. Dile a tu Agente

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

Cuando necesites migrar un estilo, puedes decir:

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

Codex, Claude Code, Cursor, Copilot u otros Agentes con capacidades de terminal pueden ejecutar este flujo. En tiempo de ejecución se usa Playwright o Chrome / Chromium / Edge local, sin depender del navegador exclusivo de ningún Agente.

Lo que obtendrás

El resultado final es una carpeta de Skill estándar:

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

Los humanos solo necesitan hacer doble clic en assets/preview.html; los Agentes solo necesitan leer SKILL.md. Las reglas y datos detallados serán leídos por el Skill según sea necesario, sin que el usuario tenga que lidiar con un montón de archivos de entrada.

A continuación se muestra un ejemplo de la vista previa HTML generada. Muestra tanto las reglas de diseño como las fuentes que las respaldan, no solo una captura de referencia.

Consulta el Skill de ejemplo completo en el repositorio. Después de clonar el repositorio, puedes hacer doble clic en assets/preview.html localmente; el ejemplo utiliza contenido ficticio y no redistribuye marcas ni materiales de sitios web reales.

Tres escenarios típicos

1. Extraer el estilo de un sitio web

Ideal para investigación de competidores, revisión de diseño y organización de sistemas de diseño. Genera colores, fuentes, jerarquía, densidad, formas, estrategia de imágenes, reglas de animación y responsive, con evidencia y niveles de confianza.

2. Migrar el estilo a un nuevo producto

Adecuado para necesidades como "diseña una página de estilo Apple para mi producto". HTML2Style conserva la jerarquía, el ritmo y la lógica de diseño medidos, al mismo tiempo que requiere reemplazar la marca, el contenido, la arquitectura de la información y los activos protegidos del sitio original.

3. Verificar la réplica de un sitio web

Adecuado para refactorizaciones, migraciones y regresiones visuales con permiso. Comprueba si la página está completa, si las fuentes de imágenes y los recortes son correctos, si faltan iconos, si los componentes repetidos tienen dimensiones consistentes y si el escritorio y el móvil coinciden.

Ejecutar el CLI por tu cuenta

Requisitos del entorno: Node.js 20+ y Chrome, Chromium, Edge o Playwright Chromium.

1. Verificar el navegador

npm run doctor

2. Recopilar y medir

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

Haz que el Agente complete STYLE.md según STYLE-measurements.md y assets/STYLE.template.md. Las mediciones deterministas y las interpretaciones de diseño del Agente se guardan por separado.

3. Generar el tablero de estilo y el Skill de estilo de diseño

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

Solo usa el modo de archivo completo html2style bundle cuando necesites guardar evidencia original, manifest o entradas de automatización.

Reutilización entre sesiones

Mueve todo el Skill de estilo de diseño a un nuevo proyecto o al directorio de skills del Agente, y luego di:

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

Los Agentes que no admiten el descubrimiento automático de Skills también pueden leer directamente SKILL.md de la carpeta. No necesitan el historial de chat original ni volver a abrir el sitio de referencia.

Por qué es más fiable que solo dar una captura de pantalla

• Evidencia real del navegador: Recopila DOM, estilos calculados, variables CSS, SVG, recursos de red e imágenes responsive realmente seleccionadas.

• Comprende páginas complejas: Registra capas de renderizado no predeterminadas, CSS/Web Animations, y establece límites de verificación manual para escenarios de scroll, Canvas y WebGL.

• Cubre diferentes viewports: Por defecto verifica escritorio alto/bajo, tablet alto/bajo y móvil, no solo una captura de escritorio en la parte superior.

• Separación de medición e interpretación: style-profile.json guarda datos deterministas, STYLE.md guarda reglas de diseño legibles.

• Límites de migración claros: Los principios de diseño se pueden migrar, pero el logo, el texto, las imágenes y la identidad de marca del sitio original no se heredan automáticamente.

• Resultados verificables: Comprueba composiciones estáticas, fases de tiempo fijas o de scroll, e interacciones reales según el tipo de página, evitando depender de una sola captura.

Cómo controla el navegador

HTML2Style no incluye el CLI de navegador de ningún proveedor, ni necesita MCP para recopilar sitios web. Aquí hay cuatro roles diferentes:

La relación de llamada predeterminada es:

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

Cuando ya tienes Chrome, Chromium o Edge local, HTML2Style inicia un navegador aislado con un directorio de usuario temporal y se conecta a través del protocolo oficial de Chrome DevTools Protocol (CDP) de Chromium. Al finalizar la recopilación, cierra el navegador y elimina el directorio temporal; no controla el Chrome de uso diario ni lee cookies, historial o estado de sesión del navegador original.

En el código y la salida, esta ruta de conexión directa se denomina chrome-cdp. Los parámetros del CLI siguen usando el más corto --backend chrome:

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

Si usas MCP, la relación de llamada solo agrega una capa de adaptación: Agente → MCP → HTML2Style CLI → navegador. MCP no se encarga de instalar ni controlar el navegador.

Compatibilidad con diferentes Agentes

Chino e inglés

• Los usuarios de chino generan por defecto archivos de documentación en zh-CN.

• Los usuarios de inglés usan --locale en.

• El SKILL.md y agents/openai.yaml del Skill generado siguen el idioma.

• Los comandos, nombres de archivo, nombres de herramientas MCP y campos JSON permanecen en inglés para garantizar la estabilidad de la automatización y la colaboración internacional.

• El contenido del sitio original y la evidencia de medición se mantienen en su idioma original, a menos que el usuario solicite explícitamente una traducción.

npm run mcp

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

Ejemplo de configuración en integrations/mcp.example.json.

Cuando no se detecta un navegador:

npx playwright install chromium

Cuando la página requiere inicio de sesión, abre un navegador temporalmente visible e inicia sesión manualmente:

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

HTML2Style no solicita ni guarda contraseñas de cuentas.

Úsalo solo cuando tengas permiso para replicar el sitio objetivo:

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

Límites del proyecto

HTML2Style no importa páginas web a Figma ni reclama la propiedad del contenido de terceros recopilado. La licencia MIT cubre solo el código y las plantillas de este proyecto, no las imágenes, fuentes, logotipos, iconos, textos o activos de marca del sitio original.

Los Canvas / WebGL complejos, closed shadow roots, desafíos anti-scraping, líneas de tiempo de video y todos los estados interactivos no se pueden garantizar completamente en la recopilación. Estas situaciones se registran como brechas de evidencia, no se adivinan por parte del Agente.

Desarrollo

npm test
npm run validate

Antes de enviar cambios, lee CONTRIBUTING.md; para problemas de seguridad, sigue SECURITY.md.

Licencia

MIT. El contenido y los activos de los sitios web recopilados siguen perteneciendo a sus titulares originales.