HTML2Style

Введите URL сайта — и легко получите его веб-стиль.

Достаточно указать URL сайта, и HTML2Style автоматически проанализирует его цвета, шрифты, отступы, макет, изображения, иконки и правила адаптивности, а затем сгенерирует Skill дизайн-стиля, который можно напрямую передать агенту, вместе с HTML-превью.

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

Понятно за 30 секунд

HTML2Style помогает сделать три вещи:

1. Извлечь стиль сайта: автоматически собирает цвета, шрифты, отступы, скругления, макет, изображения, слои рендеринга, наблюдаемые анимации и адаптивные особенности сайта.

2. Понять стиль сайта: создаёт HTML-панель стиля, которую можно открыть напрямую, — не нужно искать закономерности в большом объёме кода.

3. Переиспользовать стиль сайта: передайте сгенерированный Skill любому агенту, чтобы он проектировал новые страницы в этом стиле.

Это не просто скриншот и не просто несколько значений цветов. HTML2Style извлекает из реального сайта более полный набор правил стиля, которые можно использовать дальше.

Related MCP server: UIZZE

Самый простой способ: передайте агенту

1. Откройте проект

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

2. Скажите вашему агенту

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

Если нужно перенести стиль, можно сказать:

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

Codex, Claude Code, Cursor, Copilot и другие агенты с доступом к терминалу могут выполнять этот процесс. Во время работы используется Playwright или локальный Chrome / Chromium / Edge — без привязки к браузеру конкретного агента.

Что вы получите

Итоговый результат — стандартная папка Skill:

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

Человеку достаточно дважды кликнуть assets/preview.html; агенту — прочитать 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

Пусть агент заполнит STYLE.md на основе STYLE-measurements.md и assets/STYLE.template.md. Детерминированные измерения и дизайн-интерпретация агента сохраняются раздельно.

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

Старый режим полного архивирования html2style bundle используйте только тогда, когда нужно сохранить исходные доказательства, манифест или точки входа для автоматизации.

Переиспользование между сессиями

Переместите весь Skill дизайн-стиля в новый проект или в каталог skills агента, а затем скажите:

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

Если агент не поддерживает автоматическое обнаружение Skill, можно просто прочитать 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) от Chromium. После сбора браузер закрывается, временный каталог удаляется; обычный Chrome не затрагивается, а Cookie, история и состояние входа исходного браузера не читаются.

В коде и выводе этот прямой путь подключения называется chrome-cdp. В параметрах CLI по-прежнему используется более короткий --backend chrome:

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

При использовании MCP связь просто получает дополнительный слой адаптации: Agent → MCP → HTML2Style CLI → 浏览器. MCP не отвечает за установку или управление браузером.

Совместимость с разными агентами

Китайский и английский

• Китайские пользователи по умолчанию получают файлы описания на zh-CN.

• Английские пользователи используют --locale en.

• SKILL.md и agents/openai.yaml сгенерированного Skill следуют выбранному языку.

• Команды, имена файлов, имена 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 покрывает только код и шаблоны этого проекта, но не изображения, шрифты, логотипы, иконки, тексты или брендовые активы исходных сайтов.

Сложные Canvas / WebGL, закрытые shadow root, защита от скрейпинга, видеотаймлайны и все состояния взаимодействия в настоящее время не гарантированно собираются полностью. Такие случаи фиксируются как пробелы в доказательствах, а не домысливаются агентом.

Разработка

npm test
npm run validate

Перед отправкой изменений прочитайте CONTRIBUTING.md; о проблемах безопасности сообщайте согласно SECURITY.md.

Лицензия

MIT. Контент и активы собираемых сайтов остаются за их правообладателями.