HTML 一键可视化编辑器

要解决的问题

静态 HTML 改文案、换颜色、调间距往往要反复打开源码，设计反馈和前端实现之间容易来回拉扯。这个技能把页面转成可视化编辑版：文字可直接点开修改，右侧面板处理颜色、字号、布局，最后导出可交付的 HTML。

核心能力

• 数据驱动颜色面板：扫描 DOM 文字节点的 computed color，按字符数加权聚合出主要文字色、背景色和边框色。
• 字号与布局控制：用少量 slider 覆盖标题、正文、辅助层级，以及页面宽度、内距、行高和卡片间距。
• 风格 Prompt：点击风格卡片不直接改 CSS，而是复制包含描述、色板和约束的 prompt，便于交给 AI 重写 CSS。
• 导出干净版：去掉编辑工具，保留 data-editable，并把 var(--xxx) 还原为 hex，方便粘贴到文档或邮件。

边界与注意

更适合已有 CSS 变量的页面；inline 风格、canvas 或 iframe 为主的页面只能部分使用。优先运行 adapt.py，不要手写面板或修改 assets/editor-core.js。生成后需要抽查文字是否可编辑、字号层级是否正确、样式是否生效。