--- name: html-visual-editor version: "1.8.4" description: "把任意静态 HTML 转成可视化编辑版：注入可拖动工具栏、颜色/字号/布局/风格面板、就地文字编辑、撤销保存导出干净版、元素与面板双向跳转、中英文 i18n、6 套场景风格 Prompt 一键复制给 AI 重塑样式。颜色面板数据驱动：扫 DOM 文字字符数 top 5 + 背景元素数 top 4 + 边框元素数 top 3，跨主题通用。适用于用户说可编辑版HTML、html可视化编辑、让html可编辑、样式面板、改html不写代码、所见即所得、点击直接编辑、把报告/页面/演示稿变成可调样式、给 AI 复制风格提示词。" agent_created: true --- # html-visual-editor 把任意静态 HTML 升级成「可视化编辑版」：文字可直接点开编辑，右侧面板可调颜色、字号、布局和主题预设，改完可导出新的 HTML。 ## 一行使用 ```bash python /scripts/adapt.py # 输出：-editable.html ``` 指定输出路径： ```bash python /scripts/adapt.py -o -editable.html --force ``` 依赖只有一个： ```bash pip install beautifulsoup4 ``` ## 生成后的能力打开生成的 `*-editable.html`，页面会多出工具栏和右侧样式面板： - **可拖动工具栏**：默认右上角，可拖动到任意位置，位置写入 `localStorage.hve_toolbar_pos`，刷新仍在。 - **文字编辑**：点击页面文字直接改；支持撤销、保存到浏览器、导出干净版。 - **颜色面板（v1.8 数据驱动）**：扫 DOM 所有文字节点的 computed color，按字符数加权聚合，输出 top 5 文字色 / top 4 背景色 / top 3 边框色；跨主题通用（蓝/红/绿主题都自动适配）。同色多变量自动联动。命名按使用频次：「主要 Primary / 次要 Secondary / 强调 Highlight / 装饰 Accent / 偶用 Subtle」。 - **字号面板（v1.7 收敛）**：≤10 个 slider，分 3 组（标题层级 / 正文层级 / 辅助）；自动合并 strong/upcoming/event/data 等同族选择器，避免堆砌。 - **布局面板**：7 个 slider，分 3 组——页面宽度 / 页面左右内距 / 段落最大宽 / 行高、章节间距、卡片间距 / 卡片内边距。命名清晰双语。 - **风格 Prompt（v1.5+）**：6 张场景风格卡片，点击不再改 CSS，而是**把风格描述 + 色板 + 硬约束的完整 prompt 复制到剪贴板**，让用户粘贴给任意 AI（Claude/ChatGPT/CodeBuddy）让 AI 重塑 CSS。6 套场景：云原生企业（产品汇报）、瑞士网格（咨询报告）、杂志编辑（品牌长文）、阳光手账（NGO/社区）、终端骇客（技术）、Y2K 可爱数字（创意）。 - **i18n（v1.8.3 双显）**：工具栏右上角「中 / EN」双显，激活态高亮、未激活半透明；首次加载根据 `navigator.language` 自动识别，写入 `localStorage.hve_lang`。 - **Pinned 弹窗 + 一键提取（v1.8.2+）**：hover 页面元素显示提示；按 P 固定后弹窗每行带色块/数值；自动检测元素颜色是否未提取为变量，按 A/B 类分流： - **A 类**（inline 写死）→ 橙色按钮「+ 一键提取为变量」→ 智能命名（基于色相 `--text-purple` 等）+ prompt 改名 + 直改 inline 为 `var()`，画面联动 - **B/C/D 类**（CSS 规则 / 继承 / 复杂表达式）→ 蓝色按钮「📋 复制提示让 AI 改」→ 复制语义化 prompt 到剪贴板 - **导出干净版（v1.7+ ε 方案）**：toolbar 顶部「导出干净版 Export Clean」按钮——去掉编辑器、保留 data-editable（方便日后再次 adapt），同时把 inline 的 `var(--xxx)` 还原成 hex（剪贴到 Notion / 邮件 / 微信也不丢色），vars-style 块保留供完整网页渲染。 - **双向跳转**：hover 页面元素会提示可调项；点击提示会自动切到对应 tab 并高亮面板控件。 ## 工作原理 ```text HTML ↓ parse_css.py → 抽取 CSS 变量、font-size、background、color、选择器规则 ↓ scan_dom.py → 扫描 DOM；v1.8 数据驱动统计 color/bg/border 使用频次（top-N） ↓ generate_panel.py → 生成颜色（top-N）/字号（≤10 收敛）/布局（7 项）面板 + 6 张 Style Prompt 卡片 + window.X 常量 ↓ inject.py → 注入可拖动 toolbar、panel、editor-core.css/js、i18n 字典，标记 data-editable ↓ verify.py → 运行 sanity checks；失败则不产出坏件 ``` ## LLM 增强（可选）不配置 API key 也能跑，启发式命名会兜底。若环境变量可用，会使用 LLM 给 CSS 变量生成更语义化的 label，例如「主色调 Accent」而不是「蓝色 Blue」。支持的环境变量： - `ANTHROPIC_API_KEY` - `OPENAI_API_KEY` ## 兼容性 - **Level A，全自动**：HTML 内有 `