HTML Mender
一个专为本地HTML文件设计的可视化编辑器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：HTML Mender。 它的用途是：一个专为本地HTML文件设计的可视化编辑器。 完整的 Skill 内容见：https://321skill.com/skills/html-mender-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我用HTML Mender编辑一下我桌面上的presentation.html文件，把标题字体调大，并把第二张幻灯片的图片居中对齐。’，它会启动可视化编辑器并加载你的文件，让你直接在图形界面上进行拖拽和样式调整，所有改动会自动保存回原文件。
介绍
HTML Mender 解决了用户直接编辑本地HTML文件时，需要反复在代码和预览视图间切换、手动调整样式和布局的繁琐问题。它提供了一个直观的可视化界面，允许用户像操作Word文档一样，通过拖拽、点击等方式直接修改HTML页面的外观和内容，所见即所得。
使用时，用户只需在AI助手（如Claude Desktop）中加载此Skill，然后指定需要编辑的本地HTML文件路径。AI助手会调用该工具，打开一个可视化编辑界面。用户可以在界面中直接修改文本、调整元素位置、更改样式等，所有修改会实时保存到原始HTML文件中。
这个工具非常适合需要快速调整HTML页面布局、美化演示文稿或修复AI生成HTML代码的前端开发者、内容创作者以及需要制作或修改课件讲义的教师和学生。它降低了直接操作HTML代码的门槛，提升了非专业开发者的编辑效率。
建议在编辑前备份原始文件，因为修改是直接保存的。该工具主要针对静态HTML的视觉层调整，对于复杂的交互逻辑或动态数据绑定，仍需回到代码编辑器中进行。
核心特点
与通用代码编辑器或在线HTML构建器不同，它专注于本地静态HTML文件的可视化编辑，无需网络连接，修改直接保存至源文件，实现了本地文件与可视化操作的深度集成。
注意事项
不适合需要编辑动态脚本、服务端代码或涉及复杂JavaScript交互的HTML项目。
常见问题
HTML Mender能编辑在线网页吗？
不能，它仅支持编辑本地或已保存到本地的.html文件。
编辑后的代码格式会乱吗？
工具会尽量保持代码结构，但复杂操作后建议用专业IDE格式化代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/html-mender-x/raw/index.md 读取 HTML Mender 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/html-mender-x/raw/index.md（查看排版版本）