HTML Mark — HTML 标记

HTML 标记 — 点击注释叠加层演示 激活 — 右上角的一个暗色玻璃药丸。点击它或按 M，然后点击页面上的任何位置开始放置标记。注释 — 每次点击都会放置一个珊瑚渐变标记并打开一个内联注释弹出窗口。按 Enter 保存，标记将获得一个小珊瑚点，表示“有注释”。注释会在侧面板中累积；“复制所有”将其导出为 Markdown / Plain / JSON 格式。复制的输出（Markdown）可以粘贴到 Notion / Linear / Lark 中： 1. 将颜色改为红色 #header_logo · #header_logo 2. 添加更多图片 [data-mm-label] · [data-mm-label]

何时调用此技能： 用户想要在 HTML 原型（设计模拟、Figma 导出、静态页面）中添加审查样式的注释功能。 用户正在准备进行设计审查：点击 → 编写反馈 → 复制 → 粘贴到 PM / 设计师 / 工程师。 用户想要一个书签，可以在任何网页上运行以标注它。 触发关键词（英文和中文都可以触发）： 英文： "add html-mark"、"add mark mode"、"add annotation pins"、"click annotate"、"let me mark up this HTML for review"、"generate a mark-mode bookmarklet" 中文： "加 html-mark"、"加 mark mode"、"评审打点"、"标注模式"、"打点功能"、"给这个 HTML 加上标注"

此技能提供： 一个单文件的自包含运行时（html-mark.js）。在注入后，它为页面提供： 一个暗色玻璃切换药丸在右上角（● 标记 / ● 标记中）。OFF = 灰点；ON = 发光珊瑚渐变点 + 蜂蜜文本。 当 ON 时，光标变成十字准线。点击任何元素都会放置一个 22px 的珊瑚渐变球（#ff8d6b → #ffaf7a → #ffc890），带有缩放弹入动画。 一个内联玻璃注释弹出窗口在标记旁边打开 — 输入“应该在这里改变什么”，按 Enter 保存，Esc / 点击外部取消或自动保存。 这是核心审查连接点。 一个玻璃注释面板浮动在右下角 — 可拖动、可折叠为单行徽章。列出每个标记的注释 + 元素标签。悬停面板项 → 对应标记缩放，目标元素获得珊瑚轮廓（视觉交叉引用）。 点击面板项或标记本身重新打开注释弹出窗口进行编辑。 “复制所有”支持三种格式 — 注释是正文，元素描述转到元数据的子行： 1. 此复制需要更短 — 8 个字符最大 Button · "Get Started Free" · button.btn-primary 键盘：M 切换，Esc 退出 / 关闭弹出窗口，Backspace 删除最后一个标记，Enter 保存注释，Shift+Enter 新行。 一个带有保存注释的标记在其右上角穿着一个珊瑚光点。 面板：− 折叠，Clear 清空所有，×（悬停）删除一个项。 面板列表项带有注释的垂直珊瑚渐变条作为视觉锚点。 视觉样式：暗色玻璃切换 + 半透明白色玻璃面板 + 珊瑚 → 桃子 → 蜂蜜温暖渐变色。 玻璃主义美学 — 显著但不与目标页面竞争（尤其适合品牌网站、豪华设计、浅色 / 暖色调色板）。

使用场景： 场景 A — 单个 HTML 原型文件（最常见） 默认操作：在目标 HTML 的 之前内联运行时作为 中并插入到 之前。 不要修剪任何内容 — 脚本是完全自包含的（CSS 是内联的，DOM 是自注入的，所有类名都使用 .mm-* 前缀进行隔离）。 场景 B — 多页项目，带有 JS 资产管道 将 html-mark.js 复制到项目根目录或 assets 文件夹，然后在每个 HTML 中： 它会在加载时自动初始化。 场景 C — 任何 URL，无源访问（书签） 如果用户说“我想标注一个实时网页 / 一个竞争对手网站”，则生成一个 base64 自包含书签： echo "javascript:$(python3 -c " import urllib.parse js = open('$HOME/.claude/skills/html-mark/html-mark.js').read() print(urllib.parse.quote(js, safe='')) ")" 或者，托管在 GitHub Pages / gist / Vercel 上，并使用短引用变体： javascript:(function(){if(window.__markModeLoaded)return;var s=document.createElement('script');s.src='https://YOUR_HOST/html-mark.js';document.head.appendChild(s);})(); 可选：自定义标记标签 如果目标 HTML 具有语义不透明的元素（一个