页改笔 HTMLEdit

About

页改笔是 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