Communitygithub.com

machbuilds/interactive-html

对本地 HTML 页面进行评论——高亮、提问或注释;AI 智能体应用更改后页面重新加载并附带导览。您可以使用自己的页面,也可让技能生成一个页面供评论。适用于 Claude Code、Cursor 或任何智能体 CLI。

interactive-html 是什么?

该技能使开发者能够与本地 HTML 页面进行交互式对话,通过高亮、提问或注释的方式提供反馈,AI 智能体会根据这些反馈自动应用代码更改,并重新加载页面以展示更新效果。它支持直接加载用户提供的 HTML 文件,也能由技能自动生成一个示例页面供评论,极大降低了使用门槛。适用于 Claude Code、Cursor 等主流 AI 编码工具及任何智能体 CLI 环境。该技能的核心价值在于加速前端开发中的迭代反馈循环,让开发者无需手动编辑代码即可试验和调整 UI 元素,配合页面导览功能可清晰追踪每次修改。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add machbuilds/interactive-html

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

interactive-html 是做什么的?

对本地 HTML 页面进行评论——高亮、提问或注释;AI 智能体应用更改后页面重新加载并附带导览。您可以使用自己的页面,也可让技能生成一个页面供评论。适用于 Claude Code、Cursor 或任何智能体 CLI。

概述

该技能允许您通过与 AI 智能体对话来编辑本地 HTML 文件。您可以高亮特定元素、询问修改建议或直接注释更改,智能体会自动应用修改并重新加载页面,同时显示一个导览以突出更改的部分。

使用方法

  1. 在您的项目中准备一个 HTML 文件,或让智能体生成一个示例页面。
  2. 使用自然语言描述您想要的更改(例如:“将标题颜色改为蓝色”或“在导航栏后添加一个部分”)。
  3. 智能体将修改 HTML 文件,重新加载页面并显示一个导览,指出更改的位置。

支持的平台

  • Claude Code
  • Cursor
  • 任何智能体 CLI 环境

配置

无需特殊配置。确保您的工作目录中包含有效的 HTML 文件。

示例

# 让智能体修改页面
请将 <h1> 的文本改为“欢迎使用 Interactive HTML”

故障排除

  • 如果页面未重新加载,请检查文件路径是否正确。
  • 如果智能体无法应用更改,请尝试更具体地描述修改。

相关技能