AI 驱动的网页标注工具，支持高亮元素和添加文字批注。通过自然语言与 AI 对话，即可在任何网页上创建可视化标注。

本 Skill 是为 Tactus 项目开发的扩展功能。Tactus 是一个浏览器扩展，让 AI 能够与网页进行交互。

• 🎯 高亮标注 - 为页面元素添加高亮效果和文字标签
• 💬 文字批注 - 在元素旁添加批注气泡

如图所示，AI 可以自动识别页面内容并添加批注：

用户输入：

请帮我标注这个页面的主要功能点

AI 执行：

1. 分析页面结构
2. 识别关键功能区域
3. 使用长文本精确匹配
4. 添加批注说明每个功能

首先需要安装 Tactus 浏览器扩展。

将 page-annotator.skill 文件导入到 Tactus 中：

1. 打开 Tactus 浏览器扩展
2. 进入 Skills 管理页面
3. 点击"导入 Skill"按钮
4. 选择 page-annotator.skill 文件
5. 等待导入完成

打开任意网页，在 Tactus 侧边栏中与 AI 对话：

高亮元素：

请高亮页面上包含"登录"的按钮

添加批注：

请在"用户协议"旁边添加批注"重要：请仔细阅读"

清除标注：

请清除所有标注

• 📖 教学演示 - 标注操作步骤，引导用户学习
• 🐛 Bug 报告 - 标记问题位置，说明错误原因
• 📊 产品演示 - 讲解功能特点，展示产品亮点
• 👥 用户引导 - 新手教程，操作指引
• 🔍 竞品分析 - 标注设计特点，对比功能差异
• 💻 代码审查 - 标记代码问题，提出改进建议
• 📝 文档标注 - 添加注释说明，补充额外信息

page-annotator/
├── SKILL.md                          # AI 使用的主文档
├── README.md                         # 项目说明（本文件）
└── scripts/                          # 核心脚本
    ├── annotate.js                   # 高亮标注
    ├── comment.js                    # 文字批注
    ├── clear.js                      # 清除标注
    └── debug.js                      # 诊断工具

部分页面可能无法正常使用，还未进行大量测试

推荐使用 Claude 模型

测试了gemini，使用时会有一点问题，且效果不佳

欢迎提交 Issue 和 Pull Request！