页改笔 HTMLEdit

面向 HTML 页面的编辑与标注工具，支持本地页面修改保存、批注和跨页面汇总

页改笔是 AI 生成 HTML 之后的精修工具。 AI 生成 HTML 原型、海报、演示稿，做初稿效率很高。但到了精修阶段——改个文案、调个颜色——HTML 就比 PPT 麻烦太多了。改一句"暂存"成"待审核"，你得找到对应的标签、改代码、存盘、刷新。把整个 HTML 复制给 AI 改一句文案？大材小用，还容易把别的地方动坏。 页改笔就是补这个短板的。 【编辑模式】像改 PPT 一样改 HTML • 双击文本元素直接修改文字，跟在 PPT 里改文本框一样简单 • 支持字号、颜色、加粗、倾斜等轻量文字样式调整 • 通过 File System Access API 将修改写回授权目录内的本地 HTML 文件，不弹下载框、不生成副本 • 首次使用授权一次目录，后续编辑静默保存 • 支持撤销上一次编辑；保存失败自动回滚页面 DOM • 编辑过的元素显示绿色虚线边框标记 【标注模式】把"这里要改"精准地交给 AI 交互样式、设计方案要调整时，手动改不现实，交给 AI 才合适。但 AI 需要精确的定位和明确的意图。 • Shift+点击任意元素，弹出标注卡片，填写「修改为」和「修改说明」 • Shift+拖拽框选区域，填整体说明，适合"这里新增一个组件""这块整体重做" • 每条标注自动生成 CSS 选择器路径 + 父级 HTML 上下文（前 600 字符），确保 AI 能精确定位代码行 • A01、A02... 标注编号徽章定位在元素右上角，滚动跟随，点击可重新编辑 • 标注可在待处理、完成、拒绝等状态间切换，便于跟踪评审进度 • 多个 HTML 页面的标注在同一个面板里按页面分组展示 【导出】标注模式的交付物 • 按页面分组打包，每组带页头和条数 • 每条标注包含编号、原文、修改后、修改说明、状态、CSS 选择器、HTML 上下文；区域标注还包含坐标、尺寸和覆盖元素 • 两种格式：文本（给人看）和 JSON（给程序处理） • 一键复制到剪贴板，可手动粘贴到 AI 对话框、Issue、PRD 或开发文档 【适合谁】 • 用 AI 生成 HTML 原型/海报/演示稿，想快速改文案和轻量样式又不想把整个 HTML 发给 AI 的人 • 需要调整 AI 初稿的交互样式、设计方案，要精准标注后交给 AI 精修的人 • 产品经理、设计师做原型评审，需要把修改意见结构化交付给开发 • 开发者接收修改工单，希望打开导出文件就能定位到对应元素 【隐私优先】 • 不上传任何数据到服务器——所有处理在本地浏览器完成 • 不使用第三方分析、追踪或广告服务 • 不需要注册账号 • 仅在用户通过 File System Access API 明确授权后才访问本地文件 • 删除标注或卸载扩展即可清除所有数据 【技术特点】 • Chrome MV3 扩展，纯原生 JavaScript，零依赖 • 所有工具 UI 用 Shadow DOM 隔离，不污染页面样式 • 支持跨 frame：标注和编辑可在 iframe 内使用 • 需要 Chrome 102+（File System Access API 支持） HTMLEdit is the precision tool for refining AI-generated HTML. It bridges the gap between AI-drafted prototypes and final deliverables — no more copying entire HTML files to an AI just to change one word. EDIT MODE — Edit HTML like editing a slide • Double-click any text element to edit it inline — just like editing a text box in PowerPoint • Adjust font size, color, bold, italic, and other lightweight text styles • Save changes directly back to local HTML files via the File System Access API — no download dialogs, no duplicate copies • Authorize a folder once, then edits save silently • Undo your last edit with one click; failed saves automatically roll back the DOM • Edited elements are marked with a green dashed outline for the current session ANNOTATE MODE — Tell AI exactly what to change • Shift+Click any element to open an annotation card with "Change to" and "Notes" fields • Shift+Drag to select a region for broader instructions like "rebuild this layout" or "add a chart component here" • Each annotation auto-captures the CSS selector path and surrounding HTML context (first 600 characters), so AI can locate the exact code • Badge numbering (A01, A02...) floats at each annotated element and follows scroll • Track status: pending, done, rejected — manage review progress • Cross-page aggregation: annotations from multiple HTML pages are grouped in one panel EXPORT — Structured feedback for AI or developers • Export annotations grouped by page, with page headers and counts • Each entry includes: badge ID, original text, changed text, notes, status, CSS selector, and HTML context; area annotations also include coordinates, dimensions, and covered elements • Two formats: Plain Text (for humans) and JSON (for programs) • One-click copy to clipboard — paste into AI chat, issue trackers, PRDs, or dev docs WHO IS THIS FOR? • Product managers and designers who use AI to generate HTML prototypes, posters, or presentation decks, and want to tweak text without round-tripping through an AI • Anyone who needs to communicate precise structural changes to AI or developers — annotate exactly what to change, export, and hand off • Developers receiving change requests who need to locate the exact element instantly PRIVACY-FIRST • No data is uploaded to any server — all processing happens locally in your browser • No third-party analytics, tracking, or advertising • No account required • Local file access only with explicit user authorization via the File System Access API • Users can delete all data by removing annotations or uninstalling the extension TECHNICAL DETAILS • Chrome MV3 extension, pure vanilla JavaScript, zero dependencies • Shadow DOM isolation for all tool UI — no style conflicts with your pages • Cross-frame support: annotations and editing work inside iframes • Requires Chrome 102+ for File System Access API support