告别“弹窗”、“下拉菜单”、“闪光加载”。玩游戏掌握 50+ 国际规范 UI/UX 组件学名，1 秒复制高精度 AI 开发 Prompt，交互一发命中！
观察下方 UI 交互形态，选出它的国际标准学名
小白/俗称常见叫法：弹窗 / 弹出框 / 居中框 / 提示框
《UI 组件学名大杀器》是一款面向独立开发者、跨界创业者与 AI 辅助开发者的交互式 UI 规范教学与 Prompt 调优工具。
很多刚接触 Cursor、v0、Bolt、Claude 的开发者在描述 UI/UX 界面时，常常因为不知道组件的国际标准学名，只能使用“弹窗”、“下拉菜单”、“闪光加载”等模糊词汇与 AI 交流。这不仅容易导致 AI 混淆交互意图，生成的代码也往往缺乏无障碍规范、排版混乱。本工具通过游戏化互动与反向图鉴，助你 1 秒掌握大厂规范学名与极精细提示词。
在 2024–2026 年的 Vibe Coding 浪潮中，代码构建的瓶颈已经从“语法实现”转移到了“意图表达与规范定义”。AI 模型的训练语料中，涵盖了大量 Shadcn UI, Radix UI, Material Design, Shopify Polaris 等全球顶级开源设计系统的规范代码。
当你向 AI 描述 “做个右侧弹窗” 时，AI 无法判断是需要 Modal（居中中断）、Drawer / Sheet（滑出面板）还是 Popover（气泡卡片）；而当你准确输入 Sheet/Drawer with backdrop-blur and sticky footer 时，AI 会直接触发生产级代码模式，一次生成完美的无障碍控件！
真实可交互微图形展示，观察动画形态并选出标准英文学名，附带易混淆对比与 1 秒 Prompt 复制。
在完整 SaaS 控制台与产品蓝图界面上进行反向描点标注，掌握组件在整页排版中的位置关系。
对比 4 组给 AI 的 Prompt 描述，训练在复杂场景下挑选一次命中的极精细提示词能力。
上传任意 UI 截图并在图上标出组件学名，浏览器本地 0 费用自动拼接给 AI 的完整开发 Prompt！
建立大厂级 UI 规范认知，掌握 50+ 黄金 Prompt 模板，极速提升与 Cursor/Claude 交互的代码产出质量。
统一团队开发与交付学名，告别“这个弹窗不是那个弹窗”的沟通摩擦，提高团队协同效率。
理解各类组件在规范 Design System（如 Shadcn/Polaris）中的应用场景，打造设计感与用户体验兼备的产品。
AI 大模型（如 Claude 3.5/3.7, GPT-4o, Cursor）训练语料中，大厂开源设计系统（Shadcn UI, Radix, Material Design, Shopify Polaris）的英文规范代码占比极高。使用 "Sheet/Drawer"、"Combobox"、"Skeleton Loader"、"Segmented Control" 等专业学名，能直接激活 AI 生成高质量组件结构的权重，比口语化的“右边弹窗”、“闪光加载”精细度高 10 倍以上！
完全不会！整个游戏与工具模块 100% 运行在你的本地浏览器端，所有组件渲染、答题判断、截图标注与 Prompt 拼装均由前端静态引擎处理，响应速度 0 延迟，0 API 费用。
Modal 居中强行中断当前操作（需确认或关闭）；Drawer 从屏幕边缘（通常为右侧）滑出，适合容纳长表单或复杂设置；Popover 则锚定在触发按钮旁（如小气泡），适合包含轻量选择与操作。
你只需拖入一张喜欢的网页或 APP 截图，在上面点击画框打点，贴上标准的 UI 组件学名标签，系统就会自动将所有打点位置与规范组件拼接成一段符合 Prompt Engineering 规范的 AI 开发指令，直接复制喂给 Claude 或 Cursor 即可。
是的！系统使用本地 localStorage 持久化存储机制，你的技能积分、关卡进度、解锁的卡牌图鉴包都会自动保存。即便刷新页面或下一次重新打开浏览器，也能从上次停留的地方继续练习。
组件库只是散装的积木块，而设计系统是“积木块 + 色彩与间距规范 + 无障碍指南 + 搭建说明书”。在提示词中加入 Shadcn UI, Apple HIG 或 Linear Style 等设计系统全名，能大幅提升 AI 生成界面的排版与审美档次。