html2style

HTML2Style

把真实网站转化为可移植的设计证据与可复用视觉规则，使其他 Agent 不依赖原网页、原聊天记录或特定厂商浏览器也能继续使用。

语言与全球化

• 中文优先：当用户使用中文或未明确指定语言时，人类可读交付物默认使用 zh-CN。
• 国际用户：当用户使用英文或明确要求英文时，使用 en。
• 执行 html2style skill 时显式传入 --locale zh-CN 或 --locale en；MCP 的 create_style_skill 使用同名 locale 参数。
• 本地化生成 Skill 的 SKILL.md、agents/openai.yaml 和最终用户说明。
• CLI 命令、MCP 工具名、文件名、JSON schema、Token 名称和代码标识符始终保持英文，避免破坏跨地区自动化。
• 原网站文案和测量证据保持原始语言。除非用户明确要求，不要把内容翻译与设计提取混在一起。
• 回复语言跟随用户当前语言，而不是参考网站语言。

Default deliverables / 默认交付物：

• <style-name>-style/：默认最终交付的标准 Skill 文件夹，可以复制到新项目或 Agent 的 skills 目录。
• SKILL.md：唯一 Agent 入口，说明如何将这套网页风格用于新任务。
• agents/openai.yaml：Skill 列表、快捷提示和 UI 元数据。
• assets/preview.html：人类可以直接打开的自包含 HTML 风格预览。
• references/STYLE.md：可迁移到不同产品或业务场景的完整设计规则。
• references/style-profile.json：从浏览器证据生成、支撑风格规则的确定性测量。
• references/measurements.md：可选的测量摘要，仅在需要追溯精确依据时读取。
• 旧 design-package/：仅在用户需要 manifest、原始证据、自动化入口或完整归档时使用 html2style bundle 生成。
• DESIGN.md：供 Agent 使用的结构化设计系统事实来源。
• design-system.html：使用提取到的 Token 和组件渲染，供人类查看的 HTML 设计系统。
• 图标库：存在图标时，生成可搜索 HTML、icons-data.json 和独立 SVG 文件。
• 资源 manifest：图片、背景、字体、SVG、资源 URL 和响应式参考截图。
• 还原度对比：设计系统验证使用代表性样本；用户要求完整复刻时覆盖整个可见页面。
• 设计语言迁移：为新人物、产品或业务创建原创网站，复用测量得到的视觉原则，但不复制原站品牌、内容或专有素材。

优先使用真实页面证据：DOM、计算样式、CSS 变量、网络资源、验证截图和可见交互。不要只凭记忆或截图推断精确 Token；能够提取原始图片、Logo 或图标时，不要用近似占位物替代。

开始 / Start

1. 确定模式：
   • 风格提取：用户希望理解或复用视觉语言。只交付风格包，除非用户要求，否则不要额外构建复刻站或新网站。
   • 全新采集：用户提供 URL，创建完整交付物。
   • 补充现有工作：用户提供 DESIGN.md 和 URL。先读现有文件、列出缺口，只采集缺失证据。
   • 完整复刻：清点并复现所有可见区块和重复项目，不得静默降级为代表性样本。
   • 设计语言迁移：用户提供参考网站或 DESIGN.md 与新用途，使用可迁移设计原则创建原创信息架构和内容系统。
2. 检查工具：
   • 首先运行 html2style doctor 或 MCP browser_doctor。
   • 页面需要 JavaScript 渲染、登录、计算样式、CSS 变量、SVG sprite、截图或交互状态时，使用内置的 Agent 中立浏览器流程。
   • 宿主 Agent 自带的浏览器工具可以辅助检查，但不能成为这套工作流的必要依赖。
   • 只有公开 HTML 已包含目标内容且不需要精确计算样式时，才使用静态抓取。
   • 浏览器工具不可用时，阅读 references/browser-tooling-bootstrap.md 并指导安装，不要对动态页面静默降级。
3. 确定页面和视口范围：
   • 网站明显包含不同页面类型，而用户只提供一个 URL 时，如果能显著改善页面模式覆盖，可请求 2-5 个代表性 URL。
   • 简单单页网站直接使用一个 URL。
   • 默认使用 full：桌面高/短、平板高/短和移动端，覆盖同时受宽度与高度控制的响应式图片。
   • 只有速度明显更重要时才使用 standard 或 minimal，并记录跳过的响应式条件。
   • 对比原站和复刻站时保持视口尺寸完全一致。
4. 安全处理登录：
   • 使用 --headed --login-wait <seconds> 打开临时可见浏览器，让用户手动登录。
   • 不要索取凭据、自动绕过 MFA 或替用户选择账号。