功能介绍

面向你正在开发的页面，支持 Chrome 和 Edge。

• 悬停识别：开启识别模式后，鼠标移到哪个元素，就显示它的标准术语名（中英）、一句话定义、所在区块和布局。
• 本地识别根据 DOM 标签、ARIA role 和常见组件库 class 名匹配，不调用 AI、不消耗额度。
• 本地认不出时可以点「AI 识别」，结果只会落在术语库已有的条目上，落不上就显示「未识别」。
• 开发模式下尝试读取 React / Vue 组件名，读不到就不显示。
• 一键整页分析，截图和精简后的 DOM 结构一起提交，结果在侧边栏查看，也能跳到网页端看完整报告。

不装插件也能用，适合分析截图和公网页面。

• 上传截图或输入公网网址做整页分析。本地开发中的页面服务器访问不到，请用插件或截图。
• 截图上框出每个区块，逐块说明当前用的布局和组件、内容特征、识别依据，以及「不用改 / 有问题 / 未识别」。
• 每条推荐写清「当前用法 → 推荐」、问题说明、严重程度、规则编号，理由引用术语库原文。
• 单条推荐可以生成改造前后的灰度线框对比。
• 选择目标工具和技术栈，把采纳的推荐转成一段给 AI 的指令。
• 历史记录、收藏、额度流水和自定义 API Key 都在账户里管理。

对所有人开放，不用登录。

• 六个分类：布局模式、UI 组件、交互模式、样式与 CSS、前端工程、AI 编程。
• 每条都有中英文名、别名、一句话定义、详细解释、线框示例和「怎么跟 AI 说」。
• 布局模式和 UI 组件额外写明结构、适用和不适用场景、常见坏用法、识别特征，推荐理由就引用这些原文。
• 新手指南按场景组织，例如做后台管理页要知道的词、和 AI 沟通布局的常用说法。

把采纳的推荐应用到整页上，看换完之后长什么样。

• 复刻：根据截图和 DOM 用单文件 HTML 复刻原页面，保留结构、文案和主要配色，不追求像素级一致。
• 升级：只改动被采纳推荐涉及的区块，其他区块保持复刻原样。
• 对比：原截图、复刻版、升级版并排查看，生成过程实时显示进度。
• 调整：用自然语言继续让 Agent 修改，每次修改保存为一个版本，可以回退。
• 导出：下载 HTML，或者生成给 AI 编程工具的改造指令。不会改动你的项目代码。