功能介绍
插件在你的页面上认组件，网页端负责诊断和预览，术语库解释每个词，Agent 把推荐落到整页上。
01浏览器插件
面向你正在开发的页面，支持 Chrome 和 Edge。这里的演示和插件用同一套本地识别，移上去试试。
悬停识别
开启识别模式后，鼠标移到哪个元素，就显示它的标准术语名（中英）、一句话定义、所在区块和布局。
本地比对
根据 DOM 标签、ARIA role 和常见组件库 class 名匹配，不调用 AI、不消耗额度。
AI 识别兜底
本地认不出时可以点「AI 识别」，结果只会落在术语库已有的条目上，落不上就显示「未识别」。
组件名
开发模式下尝试读取 React / Vue 组件名，读不到就不显示。
分析当前页
一键整页分析，截图和精简后的 DOM 结构一起提交，结果在侧边栏查看，也能跳到网页端看完整报告。
和插件同一个识别引擎 · 正在准备术语目录
02网页分析
不装插件也能用，适合分析截图和公网页面。
截图或网址
上传截图或输入公网网址做整页分析。本地开发中的页面服务器访问不到，请用插件或截图。
逐块判断
截图上框出每个区块，逐块说明当前用的布局和组件、内容特征、识别依据，结论是不用改有问题或未识别。
推荐有出处
每条推荐写清「当前用法 → 推荐」、问题说明、严重程度、规则编号，理由引用术语库原文。
效果预览
单条推荐可以生成改造前后的灰度线框对比。
复制给 AI
选择目标工具和技术栈，把采纳的推荐转成一段给 AI 的指令。
账户
历史记录、收藏、额度流水和自定义 API Key 都在账户里管理。
给 AI 的指令
请帮我调整这个页面「客户详情」的布局。只改下面列出的区域，其他区域保持原样。 1. 「客户详情」区域：把单页表单（Single Page Form）改成描述列表（Description List）。 原因：这里展示的是一条记录的详情，只看不改，字段又多。做成表单后每个字段都是一个禁用的输入框，灰底灰字不好读，还让人以为可以修改。 依据：单页表单的不适用场景：数据只读展示、不需要编辑时（应该用描述列表） 依据：描述列表的适用场景：展示单条记录的详情，字段较多且以只读查看为主时 依据：表单的常见坏用法：把只读的详情页做成一排排禁用的输入框，灰底灰字难以阅读，还让人以为能改 目标结构：由若干「标签-值」对组成，按两到三列网格排列；字段多时分为几组，每组带小标题。 具体要求：这里是只读的详情展示，请用描述列表（Description List）布局：每个字段显示为「标签：值」，两到三列网格排列，标签用浅灰色，值用正文色，字段按业务含义分组并加分组标题。不要用输入框展示只读数据，右上角放一个「编辑」按钮。 要求： - 保留现有的数据、文案、接口调用和整体视觉风格，只改变这些区域的排列方式和所用组件。 - 改完后说明每个区域具体改了什么。
03术语库
对所有人开放，不用登录。258 条术语，推荐理由都从这里引用。
六个分类
布局模式 24、UI 组件 98、交互模式 24、样式与 CSS 26、前端工程 45、AI 编程 41。
每条都讲全
中英文名、别名、一句话定义、详细解释、线框示例和「怎么跟 AI 说」。
推荐的依据
布局模式和 UI 组件额外写明结构、适用和不适用场景、常见坏用法、识别特征，推荐理由就引用这些原文。
新手指南
按场景组织，例如做后台管理页要知道的词、和 AI 沟通布局的常用说法。
把一条记录的多个属性按「字段名：值」成对排列，常用两到三列网格展示，适合只读查看详情。
别名详情描述键值对列表属性列表Descriptions
适用场景
不适用场景
怎么跟 AI 说
这里是只读的详情展示，请用描述列表（Description List）布局：每个字段显示为「标签：值」，两到三列网格排列，标签用浅灰色，值用正文色，字段按业务含义分组并加分组标题。不要用输入框展示只读数据，右上角放一个「编辑」按钮。
04Agent 升级
Agent 生成独立的 HTML 预览，不会改动你的项目代码。
复刻
根据截图和 DOM 用单文件 HTML 复刻原页面，保留结构、文案和主要配色，不追求像素级一致。
升级
只改动被采纳推荐涉及的区块，其他区块保持复刻原样。
对比
原截图、复刻版、升级版并排查看，生成过程实时显示进度。
调整
用自然语言继续让 Agent 修改，每次修改保存为一个版本，可以回退。
导出
下载 HTML，或者生成给 AI 编程工具的改造指令。
客户详情Agent 升级
v2 升级 · 只改了「客户详情」区块，其他区块和复刻版一致
版本记录
继续修改
每改一次存成新版本，可以随时设回之前的版本。
05效果图画布 · 订阅版
画布上只有页面。在底部对话框里说要做什么，AI 规划并生成风格一致的整套 HTML 效果图；选中页面或其中一个区块，说一句就改。
规划
写一段需求或选一个模板，AI 列出页面清单和每页的布局术语；确认后按顺序排在画布上，一次生成。
统一风格
主色、深浅、圆角、字号改了立即换肤；后台页面共用菜单，官网页面共用导航和页脚，登录页没有外壳。
选中哪里改哪里
选中整页或页面里的一个区块，在底部对话框说怎么改，其余部分保持不变。每次都是新版本，随时切回去。
换个方向
一次出两个不同方向，挂在原页面旁边；全屏并排同步滚动对比，挑一版采用。
诊断
生成后先自检、自动修一次；再用整页分析同一套规则诊断，问题框直接画在画板上，一键按推荐修改。
导出
下载每页一个 HTML 的 ZIP，或复制给 Cursor、Claude Code 的整套实现指令。
产品需求
云帆 CRM
给销售团队用的 CRM：客户、商机和回款
页面
01客户列表数据表
v2 新方向
v3 新方向
02客户详情描述列表
自检通过 · 诊断出 1 个问题
03新建客户单页表单
客户列表筛选栏
订阅版示意 · 选中「客户列表」的筛选栏，在底部对话框里说怎么改