{"_id":"@atc-group/ui-annotator-2","name":"@atc-group/ui-annotator-2","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@atc-group/ui-annotator-2","version":"0.1.0","description":"MCP server that annotates any web page with hover labels — zero extensions, any browser. Fixed proxy encoding and asset routing.","type":"module","bin":{"ui-annotator-2":"src/index.js"},"scripts":{"start":"node src/index.js","dev":"node --watch src/index.js"},"keywords":["mcp","mcp-server","ui-annotator","ui-inspector","element-inspector","dom-inspector","hover-labels","ui-labels","design-feedback","web-inspector","hover-annotation","accessibility","reverse-proxy","browser","frontend","claude","model-context-protocol"],"author":{"name":"atc-group"},"license":"MIT","dependencies":{"@modelcontextprotocol/sdk":"^1.27.1","zod":"^3.23.0"},"gitHead":"6b89c1ce702136bf44b220bfab45b0e853e2d417","_id":"@atc-group/ui-annotator-2@0.1.0","_nodeVersion":"25.8.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-oWkld3ia+7mu+9rr6N1saENyFSd9fXPN4A0JOHqsa6HP6u5TZXYTJxqlDn7lU384HYWEIgHX428zmPetErvF/g==","shasum":"6b0991655e32ce336a52496c7d98eb9f4e8e822b","tarball":"https://registry.npmjs.org/@atc-group/ui-annotator-2/-/ui-annotator-2-0.1.0.tgz","fileCount":10,"unpackedSize":49774,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFX7CS8XOE6DyhTuPIdAQlCJrDu08kvQ8AoobrywjUoBAiAO6m3c0q2/fFEAW5ytZRH0sWjspc86H2mSwwZAZtg0DA=="}]},"_npmUser":{"name":"atcgroupdev","email":"atcgroupdev@gmail.com"},"directories":{},"maintainers":[{"name":"atcgroupdev","email":"atcgroupdev@gmail.com"},{"name":"toanzzz","email":"me@toan.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-annotator-2_0.1.0_1775141210001_0.9226508654158889"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-02T14:46:49.904Z","0.1.0":"2026-04-02T14:46:50.222Z","modified":"2026-04-02T14:46:50.493Z"},"maintainers":[{"name":"atcgroupdev","email":"atcgroupdev@gmail.com"},{"name":"toanzzz","email":"me@toan.io"}],"description":"MCP server that annotates any web page with hover labels — zero extensions, any browser. Fixed proxy encoding and asset routing.","keywords":["mcp","mcp-server","ui-annotator","ui-inspector","element-inspector","dom-inspector","hover-labels","ui-labels","design-feedback","web-inspector","hover-annotation","accessibility","reverse-proxy","browser","frontend","claude","model-context-protocol"],"author":{"name":"atc-group"},"license":"MIT","readme":"# UI Annotator MCP\n\n[![npm version](https://img.shields.io/npm/v/@mcpware/ui-annotator)](https://www.npmjs.com/package/@mcpware/ui-annotator)\n[![license](https://img.shields.io/github/license/mcpware/ui-annotator-mcp)](LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/mcpware/ui-annotator-mcp?style=social)](https://github.com/mcpware/ui-annotator-mcp)\n[![GitHub forks](https://img.shields.io/github/forks/mcpware/ui-annotator-mcp?style=social)](https://github.com/mcpware/ui-annotator-mcp/fork)\n\n[English](README.md) | **廣東話**\n\n**Hover 任何 element 就睇到佢叫咩名 — 任何 browser，零 extension。**\n\n一個 MCP server，幫任何網頁加上互動式 hover 標註。開個 proxy URL，hover 任何 element，即刻見到佢個名。同你嘅 AI 助手講「將 `sidebar` 整闊啲」— 佢即刻知你講邊個。\n\n![Demo](docs/demo.gif)\n\n## 點解要用\n\n大幅提升 AI 驅動嘅 UI 設計流程。痛點：同 AI 講「將嗰個 button 搬去 search bar 隔離」從來都唔 work，因為 AI 睇唔到你個頁面。UI Annotator 解決呢個問題 — hover 任何 element 就會顯示佢嘅 component 名。而家你講「將 `SearchButton` 搬去 `NavBar` 下面」，Claude 即刻改啱嘅 component。唔使 browser extension，任何 framework 都 work。成個 workflow 變成：開頁面 → hover 搵到 element 名 → 用真實 component 名描述改動 → Claude 改 → refresh 再嚟。將一個令人沮喪嘅來回過程變成流暢嘅設計循環。\n\n## 問題\n\n同 AI coding 助手改 UI 嘅時候，最難嗰part唔係改 code — 而係**形容你想改邊個 element**。\n\n> 「左邊嗰個嘢...第二行...唔係，有個 icon 嗰個...」\n\n你唔知佢叫咩名。AI 唔知你指緊邊個。你浪費時間喺溝通上而唔係 shipping。\n\n## 解決方案\n\n用 annotator proxy 開你個 page。Hover 任何 element — 即刻見到佢個名、CSS selector、尺寸。而家你同 AI 講同一種語言。\n\n```bash\n# Add 落 Claude Code\nclaude mcp add ui-annotator -- npx @mcpware/ui-annotator\n\n# 開任何 browser\n# http://localhost:7077/localhost:YOUR_PORT\n```\n\n**搞掂。** 零 extension。零 code 改動。零 setup。Chrome、Firefox、Safari、Edge — 任何 browser 都得。\n\n## 功能\n\n### Hover 標註\nHover 任何 element 睇到：\n- **Element 名**（粉紅色）— 人類可讀嘅識別名\n- **CSS selector**（等寬字）— 技術參考\n- **內容預覽** — element 入面嘅文字\n- **尺寸** — 闊 × 高 (px)\n\n### Inspect Mode\n撳 toolbar 嘅 **Inspect** 掣：\n- Click 任何 element → **複製佢個名去 clipboard**\n- 所有頁面互動暫停（click 唔會觸發按鈕/link）\n- 再撳 Inspect 返回正常模式\n\n### MCP 工具\n| 工具 | 做咩 |\n|------|------|\n| `annotate(url)` | 回傳 proxy URL 畀用戶喺任何 browser 開 |\n| `get_elements()` | 回傳所有偵測到嘅 UI elements（名、selector、位置） |\n| `highlight_element(name)` | 閃爍特定 element 畀用戶確認 |\n| `rescan_elements()` | 頁面改咗之後強制重新掃描 DOM |\n| `inspect_mode(enabled)` | 遠程切換 inspect mode |\n\n## 點解唔直接用 DevTools？\n\n| | DevTools | UI Annotator |\n|---|---|---|\n| **對象** | 識 DOM 嘅 frontend dev | 任何人 — QA、PM、設計師、junior |\n| **學習成本** | 要識 DOM tree、CSS selector、box model | Hover 就睇到 — 零學習 |\n| **溝通** | 「`div.flex.gap-4` 入面第二個 child 嗰個...」 | 「個 `sidebar`」 |\n| **AI 整合** | 冇 — AI 睇唔到你 inspect 緊咩 | MCP — AI 見到同你一樣嘅 element 名 |\n\n**DevTools 係做 debugging 嘅。** UI Annotator 係做**溝通**嘅 — 畀人同 AI 有共同嘅 UI 詞彙。\n\n## 更多 @mcpware 產品\n\n| 產品 | 做咩 | 安裝 |\n|------|------|------|\n| **[Pagecast](https://github.com/mcpware/pagecast)** | 錄低任何 browser page 做 GIF 或影片 | `npx @mcpware/pagecast` |\n| **[Claude Code Organizer](https://github.com/mcpware/claude-code-organizer)** | 視覺化 dashboard 管理 memories、skills、MCP servers | `npx @mcpware/claude-code-organizer` |\n| **[Instagram MCP](https://github.com/mcpware/instagram-mcp)** | 23 個 Instagram Graph API 工具 | `npx @mcpware/instagram-mcp` |\n\n## 授權\n\nMIT\n","readmeFilename":"README.zh-HK.md","_rev":"1-b541b188debd8023cd9751a8150cbdad"}