HTML Mender
一个专为本地HTML文件设计的可视化编辑器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：HTML Mender。 它的用途是：一个专为本地HTML文件设计的可视化编辑器。 完整的 Skill 内容见：https://321skill.com/skills/html-mender-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘打开我的项目介绍幻灯片index.html文件’，它会加载该HTML文件并进入可视化编辑模式。你可以直接点击页面上的标题修改文字，拖拽图片调整位置，右侧面板可以快速更改字体颜色和背景，所有改动实时预览，完成后一键保存即可更新原文件。
介绍
HTML Mender 解决了开发者、设计师和内容创作者需要快速、直观地编辑本地HTML文件，但又不想深入代码细节的痛点。它提供了一个所见即所得的编辑界面，让用户可以直接在浏览器中拖拽、修改样式和内容，而无需手动编写或调试HTML/CSS代码。
使用方式非常简单：用户只需将本地的 .html 文件拖入HTML Mender的界面，或者打开之前保存的HTML文件，即可开始可视化编辑。编辑器支持对页面元素进行直接操作，如调整布局、修改文本、更换图片和调整CSS属性等，所有更改会实时反映在预览中，并可以随时保存回原文件。
这个工具非常适合前端开发初学者、UI/UX设计师、产品经理以及需要制作或修改单页演示文稿（如基于HTML的PPT）的用户。对于不擅长编码但又需要产出或调整网页内容的人来说，它是一个高效的辅助工具。
建议在使用前备份原始HTML文件，因为编辑是直接作用于文件本身的。此外，它主要针对静态HTML内容的可视化调整，对于涉及复杂JavaScript交互或动态数据绑定的页面，编辑能力可能有限，更适合用于内容排版和样式微调。
核心特点
与通用代码编辑器或在线建站工具不同，HTML Mender专注于本地HTML文件的可视化编辑，提供了直接操作DOM元素的便捷性，且不依赖网络或云服务，能直接保存更改到本地文件，适合处理AI生成的HTML幻灯片或已保存的单页演示文稿。
注意事项
不适合编辑包含复杂JavaScript交互或服务端动态渲染内容的网页。
常见问题
HTML Mender能编辑在线的网页吗？
不能，它仅支持编辑本地保存的 `.html` 文件。
编辑后的文件会覆盖原文件吗？
是的，保存操作会直接修改原始本地文件，建议操作前备份。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/html-mender-x-7/raw/index.md 读取 HTML Mender 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/html-mender-x-7/raw/index.md（查看排版版本）