现在用 Codex、Claude Code、Cursor 这类 Coding Agent 做前端，很多时候真正卡住我们的，并不是不会写代码。

而是：

知道自己想要什么效果，却不知道它到底叫什么。

比如你想告诉 AI：

我想要那个鼠标放上去后弹出来一小块说明文字的东西。

你真正想说的可能是：

Tooltip。

或者：

做一个点击图片以后，背景变暗，然后把图片放大的效果。

专业名称其实是：

Lightbox。

再比如：

那种元素移动过去一点点，然后有弹性地超过目标位置，再弹回来。

你真正需要告诉 Coding Agent 的可能是：

Spring Animation。

甚至你只是觉得：

现在这个动画移动起来特别机械，能不能柔和一点？

问题真正对应的可能并不是“动画不好看”，而是：

Easing / Timing Function 不对。

对于 UI / UX 设计师来说，这些术语并不陌生。

但对于大量正在进入 Vibe Coding 的产品经理、独立开发者和普通创作者来说，要准确叫出几十种组件、状态和微交互名称，并不容易。

这也是 Name That UI 很有意思的地方。

它把自己定义为：

The visual dictionary of UI——UI 的视觉词典。

你可以直接用自己的日常语言描述看到的 UI 元素，网站会帮助你找到它真正的专业名称、对应的代码/API 表达，以及一段可以直接复制给 Coding Agent 的 Prompt。

对于经常使用 Codex、Claude Code、Cursor、AI Coding、Vibe Coding 做前端的人来说，这个网站非常值得收藏。

一、Name That UI 是什么？

Name That UI 可以简单理解成一个：

UI / UX 组件、交互和动效的专业术语视觉词典。

它解决的并不是：

“这个页面好不好看？”

而是一个更具体的问题：

“眼前这个东西到底叫什么？”

截至目前，Name That UI 首页已经整理 76 个 UI 条目，其中包括 44 个 Web UI 条目和 32 个 macOS 条目。

里面既有大家比较熟悉的：

• Carousel；
• Pagination；
• Breadcrumbs；
• Form Field；
• Hamburger Menu；
• Bento Grid；
• Masonry Layout；

也有很多 Vibe Coding 时经常想用、却不知道名字的交互动效：

• Easing；
• Spring Animation；
• Parallax Scrolling；
• Text Scramble；
• Marquee；
• Drag & Drop；
• Lightbox。

它甚至会把一个组件内部继续拆开。

例如一个 Form Field，并不只是：

“输入框”。

实际上可以拆成：

Label
Required indicator
Placeholder
Helper text
Error message

并分别告诉你它们在 HTML、CSS 和 ARIA 中对应什么。

对于刚开始学习 UI / UX 或使用 AI 做前端的人来说，这种方式特别实用。

二、最实用的功能：不会专业术语，直接“说人话”

Name That UI 首页最核心的搜索方式非常简单：

Describe the thing in your own sloppy words.

也就是：

别管术语。

直接描述你看到的东西。

例如官网给出的搜索表达包括：

the gray text inside the box that disappears when you type

也就是：

输入框里那个打字之后会消失的灰色文字。

最后找到的是：

Placeholder。

再比如：

the dot you drag to change the volume

“调整音量时拖动的那个小圆点。”

对应的其实是：

Slider。

或者：

the text gets cut off with three dots

“一行文字太长以后，后面变成三个点。”

真正对应的是：

Truncation / Ellipsis / Line Clamp。

Name That UI 的搜索逻辑，本质上就是在帮助你完成：

日常语言
↓
UI 专业术语
↓
代码名称
↓
Agent Prompt

官网甚至已经把“输入框里打字后会消失的灰色文字”这样的中文模糊描述加入了搜索语料。

这对于中文 Vibe Coding 用户尤其友好。

三、找到组件名称以后，它还直接告诉你代码叫什么

Name That UI 不只是告诉你：

“这个叫 Placeholder。”

它还会继续给出：

In code。

也就是这个东西在真正开发环境里的对应名称。

例如 Form Field 页面会告诉你：

Label
HTML: <label for>

Placeholder
CSS: ::placeholder

Helper Text
ARIA: aria-describedby

Error
ARIA: aria-invalid

Required
HTML: required

这个设计非常适合 AI Coding。

因为很多时候：

设计语言和代码语言并不是一回事。

设计师可能说：

错误状态。

前端真正需要处理的可能是：

aria-invalid="true"
:user-invalid

当你直接把这些专业标识提供给 Coding Agent 后，AI 理解任务的精度会高很多。

四、最适合 Vibe Coding 的功能：直接给你 Prompt

Name That UI 对 AI Coding 用户最实用的一部分，是每一个 UI 条目下面基本都会提供：

Prompt — paste into your agent

也就是：

直接复制给 Agent 的提示词。

例如 Form Field 页面会告诉 Agent：

创建完整的表单字段结构，使用真正关联输入框的 Label，把 Placeholder 只作为提示文字，同时正确处理 Helper Text、Required、Error State 和 ARIA 无障碍关系。

所以使用方式可以非常简单。

假设你正在使用 Codex 做一个后台系统。

你觉得表单：

“哪里怪怪的。”

但又不知道怎么跟 AI 解释。

可以先来 Name That UI。

找到：

Form Field

复制它提供的 Prompt。

然后交给 Agent：

根据下面的 UI 规范重新检查当前表单组件：【粘贴 Name That UI Prompt】不改变当前品牌视觉，只修正组件结构、交互状态和 Accessibility。

这会比一句：

“把输入框优化得专业一点。”

具体很多。

五、它甚至准备了 Debug Prompt

更有意思的是，它不只是教你：

怎么创建。

还教你：

出了问题怎么修。

大量 UI 页面里都有：

Debug Prompt — when it misbehaves

例如 Form Field 的 Debug Prompt 会提醒 Agent 检查：

• Placeholder 是否被错误当成 Label；
• Label 是否真正绑定 Input；
• Error Message 是否通过 ARIA 关联；
• 浏览器 Autofill 是否覆盖了样式。

Spring Animation 则会让 Agent 检查：

• Damping 是否太低；
• Stiffness 是否太低；
• 是否错误同时使用 Duration；
• Overflow Hidden 是否把 Overshoot 裁掉；
• 动画中断后是否错误重置。

这类内容对于 AI Coding 特别有价值。

以后遇到一个交互：

“能用，但就是感觉不对。”

不需要自己到处搜 Stack Overflow。

先找到它的专业名称，再直接把 Debug Prompt 喂给 Agent。

六、做微动效时尤其好用：Easing 到底是什么？

前端微交互最容易出现的一种问题就是：

动画很生硬。

很多刚开始 Vibe Coding 的用户会告诉 AI：

动画柔和一点。

高级一点。

顺滑一点。

不要那么机械。

这些表达当然能用。

但都不够精确。

Name That UI 告诉你：

你真正需要关注的东西可能叫：

Easing，也叫 Timing Function。

它控制的是：

动画速度如何随时间变化。

例如：

linear
ease-out
ease-in-out
cubic-bezier(...)

Name That UI 甚至会直接演示相同动画时长、不同 Timing Curve 带来的运动差异。

所以以后再和 AI 沟通时，可以从：

动画高级一点。

改成：

这个进入动画不要使用 linear，请改成 ease-out，让元素快速进入并柔和减速落位；界面过渡控制在较短时间内。

这就是知道专业词以后带来的差距。

七、想要“弹一下”的动画？它叫 Spring Animation

另一个现在 AI 产品里特别常见的交互是：

元素移动到目标位置以后，轻微超过一点，然后再回到最终位置。

很多人会描述成：

像 iOS 那种有弹性的动画。

有点 QQ 弹弹的感觉。

移动以后轻微弹一下。

Name That UI 会直接告诉你：

Spring Animation。

它的核心不是普通 Duration + Easing。

而是通过：

stiffness
damping
mass

这类物理参数控制运动。

它最明显的视觉信号是：

Overshoot。

也就是元素超过目标位置以后，再逐渐稳定下来。

Name That UI 还直接给出了 Motion / React 常见实现思路：

transition={{
  type: "spring",
  stiffness,
  damping
}}

并同时提供 React Spring、CSS linear() 和 SwiftUI Spring 等对应实现名称。

以后和 Codex 或 Claude Code 沟通，就可以直接说：

Modal 打开时使用 Spring Animation，不要普通 ease。轻微 Overshoot 后快速稳定，避免过度 Jelly 感。

比：

弹出来高级一点。

准确太多。

八、“滚动时背景移动得更慢”叫什么？

这个效果几乎所有做品牌官网的人都见过。

页面向下滚动时：

前景正常移动；

背景移动得更慢；

于是产生很强的空间和景深感觉。

它叫：

Parallax Scrolling。

Name That UI 不仅会告诉你这个名称，还会进一步区分：

Parallax；

Fixed Background；

Sticky

之间的区别。

同时它还会告诉 Agent 可以通过：

animation-timeline: scroll()

或者：

Motion useScroll + useTransform

以及：

GSAP ScrollTrigger

实现这种效果。

这时候你的 Vibe Coding Prompt 就能从：

背景跟着滚动慢一点，有点立体感。

升级成：

Hero 下方增加 Parallax Scrolling。背景层以低于前景的速度移动，形成明显但克制的深度差。使用 transform 驱动，不要通过高频 scroll handler 修改布局，同时兼容 prefers-reduced-motion。

Agent 拿到这种描述，执行会稳定很多。

九、“黑客文字乱码后出现标题”的效果也有名字

现在很多 AI、Cyberpunk、开发者工具网站会使用一种文字效果：

一开始字符不断随机变化；

然后一个一个停止；

最终拼成真正标题。

很多人会把它叫：

黑客文字效果。

Matrix 字符动画。

乱码变文字。

Name That UI 给出的名称是：

Text Scramble / Decode Effect。

常见实现包括：

GSAP ScrambleTextPlugin

或者：

requestAnimationFrame + charset swap

同时网站还特别提醒要处理：

• 字符宽度变化造成的 Layout Jitter；
• Screen Reader 不应该朗读随机乱码；
• prefers-reduced-motion；
• 重复渲染导致动画不断重新开始。

所以它并不只是：

告诉你这个动画叫什么。

而是连：

“怎样正确做这个动画”

也一起告诉你。

十、经常分不清 Tooltip、Popover、Modal？这里专门帮你区分

做 UI 最大的问题之一，是很多组件：

长得真的很像。

例如：

Tooltip 和 Popover。

Modal 和 Popover。

Dropdown、Select 和 Combobox。

Tabs 和 Segmented Control。

Toast 和 Alert。

Carousel 和 Marquee。

Masonry 和 Bento Grid。

很多人在跟 Agent 交流时，会把这些词混着用。

然后就会出现：

你想让 AI 做 Popover；

结果 AI 给你一个 Tooltip。

你想做 Segmented Control；

Agent 却按照 Tabs 的语义实现。

Name That UI 专门提供了：

Commonly Confused

栏目，用来解释这些“看起来差不多”的 UI 组件到底有什么关键区别。

比如：

Tooltip vs Popover

Tooltip 通常用于很短的文字提示，Hover 出现，也不能真正操作里面的内容。

Popover 通常由点击触发，可以承载：

表单；

按钮；

列表；

真正可交互的内容。

Tabs vs Segmented Control

Tabs 更偏向：

切换不同内容区域。

Segmented Control 更偏向：

改变当前同一个内容区域的模式、筛选或展示方式。

这些区别在真正做产品时非常重要。

十一、它还做了一个设计风格词典：Name That Vibe

如果你连：

“这个 UI 是什么风格？”

也不知道，Name That UI 还有一个单独的：

Name That Vibe。

它是一套 Visual Styles Atlas。

同样可以：

用自己的日常语言描述风格，然后找到专业名称。

例如：

soft buttons pushed out of the background

对应：

Neumorphism。

frosted cards over colorful wallpaper

对应：

Glassmorphism。

bright blocks with black outlines and hard shadows

对应：

Neobrutalism。

chrome bubblegum millennium interface

对应：

Y2K Digital Aesthetic。

目前已经包含包括：

Skeuomorphism；

Neumorphism；

Glassmorphism；

Liquid Glass；

Web Brutalism；

Neobrutalism；

Y2K；

Frutiger Aero；

Flat Design；

Minimalism；

Claymorphism；

Vernacular Web；

Aqua；

Windows Aero

等多个风格方向。

每一种风格还会告诉你：

最关键的 3～5 个视觉信号是什么。

这比单独告诉 AI：

做个 Glassmorphism。

更加有价值。

十二、它不是随便编 UI 名词，而是会核对官方规范

Name That UI 有一个单独的：

Methodology

页面。

它的原则很简单：

see it
↓
verify it
↓
name it

也就是：

先确认用户看到的具体 UI；

再去验证对应平台规范；

最后给出名称。

网站目前会根据不同内容核对：

• Apple Human Interface Guidelines；
• Apple Developer Documentation；
• WAI-ARIA；
• ARIA APG；
• WCAG；
• WHATWG HTML；
• MDN Web Docs。

而且它特别强调：

同一个视觉元素，在不同平台和 Framework 里可能真的叫不同名字。

所以不会强行给所有平台统一成一个术语。

这对于真正拿来写代码非常重要。

十三、做 macOS App 的人还有专门的“翻译表”

如果你最近刚好在使用：

Swift；

SwiftUI；

AppKit；

AI Coding

开发 macOS 应用，Name That UI 还有一个非常实用的：

Translation Table。

它直接把：

日常 UI 名称
AppKit
SwiftUI

放在一起。

目前表格包含 63 个对应关系。

例如：

Button
AppKit: NSButton
SwiftUI: Button

Segmented Control
AppKit: NSSegmentedControl
SwiftUI: Picker + .pickerStyle(.segmented)

Popover
AppKit: NSPopover
SwiftUI: .popover(...)

Search Field
AppKit: NSSearchField
SwiftUI: .searchable(...)

这对于用 Claude Code 或 Codex 写 macOS App 特别方便。

因为以后可以直接告诉 Agent：

我要的是 SwiftUI 的 Segmented Control，不是重新用几个 Button 拼出来，请使用 Picker + segmented style。

一下就精确很多。

十四、Name That UI 最适合怎么配合 Codex / Claude Code 使用？

我推荐把它当成：

Coding Agent 前面的“术语翻译器”。

工作流可以这样：

看到喜欢的交互
↓
不知道叫什么
↓
Name That UI 模糊搜索
↓
找到专业术语
↓
查看 API / Framework 名称
↓
复制 Prompt
↓
交给 Codex / Claude Code / Cursor
↓
Agent 实现
↓
不对就继续复制 Debug Prompt

例如你想做：

“卡片鼠标移动上去以后轻微跟着倾斜。”

先找到准确的交互名称。

然后不是告诉 AI：

给卡片加点高级动画。

而是直接把：

组件名称；

Motion 类型；

触发方式；

参数；

Accessibility；

Reduced Motion

一次说清楚。

这才是 AI Coding 真正舒服的使用方式。

十五、推荐一个 Vibe Coding Prompt 模板

以后用 Name That UI 找到组件以后，可以直接使用下面这个结构：

请优化当前页面的交互设计。

需要增加的 UI / Motion：
[Name That UI 中找到的专业名称]

具体实现参考：
[API / CSS / Motion / React / SwiftUI 对应名称]

行为：
[描述触发条件和结果]

视觉要求：
保持当前 Design System，不改变现有品牌颜色、字体和组件风格。

交互要求：
处理 Hover、Focus、Active、Disabled 和 Loading 等必要状态。

无障碍：
按照组件语义正确处理 ARIA、键盘操作和 prefers-reduced-motion。

完成后：
先自行测试交互，再检查移动端和桌面端表现。

你会发现：

一旦知道专业名称以后，Prompt 反而不用写得特别长。

十六、Name That UI 对哪些人最有用？

Vibe Coding 用户

这是最推荐的一类。

你不需要先系统学习整套前端术语，也可以边做产品边查。

独立开发者

尤其是不擅长 UI / UX 的程序员。

看到喜欢的交互后，可以快速知道它叫什么，再交给 AI 实现。

产品经理

和 Agent 或开发团队沟通时，可以减少：

“就是那个点一下会弹出来的东西。”

这种模糊表达。

UI / UX 初学者

非常适合拿它当：

UI 专业术语学习网站。

因为每一个概念都有：

视觉演示；

名称；

结构拆解；

相似组件；

代码对应。

前端开发者

即使已经熟悉组件，也可以拿它查：

ARIA；

Framework 对应 API；

Motion；

Debug Prompt；

相似组件之间的语义区别。

AI Coding 重度用户

如果你每天都在使用：

Codex；

Claude Code；

Cursor；

Windsurf；

Copilot

生成前端，这类词典可以明显减少和 Agent 来回沟通的次数。

十七、为什么现在这类网站会越来越有价值？

以前不知道一个 UI 叫什么。

问题可能不大。

设计师可以画出来；

开发者自己理解；

最后人工交流。

但进入 Vibe Coding 以后：

语言就是新的界面。

你描述得越准确，Agent 就越容易找到：

正确组件；

正确 API；

正确交互模式；

正确实现方式。

所以 AI Coding 时代一个很有意思的能力开始变得越来越重要：

设计词汇量。

不是要求每个人变成专业 UI 设计师。

而是至少知道：

Tooltip；

Popover；

Combobox；

Segmented Control；

Lightbox；

Marquee；

Masonry；

Spring；

Easing；

Parallax

这些名字背后到底是什么。

Name That UI 做的事情，就是降低这层门槛。

十八、从“我想要这个效果”，变成“Agent 知道该怎么写”

我觉得 Name That UI 最值得收藏的地方，就在这里。

很多 Vibe Coding 用户真正缺的不是想法。

而是：

不知道怎么把脑子里的画面翻译成 AI 能稳定执行的语言。

以前可能说：

那个页面滚动的时候，后面的图走慢一点。

现在可以说：

Parallax Scrolling。

以前：

弹窗出来的时候有一点弹性。

现在：

Spring Animation with subtle overshoot。

以前：

输入框里面还没输入时候那个灰色字。

现在：

Placeholder。

以前：

图片点开以后整屏黑色背景看大图。

现在：

Lightbox。

以前：

那个自动一直往左滚的 Logo 列表。

现在：

Marquee。

这几个单词，可能比再写两百字模糊 Prompt 更有效。

结语

Name That UI 不是一个传统 UI 灵感网站。

它真正解决的是 Vibe Coding 过程中一个很小、却非常高频的问题：

我知道自己想要什么，但不知道它叫什么。

现在你只需要用日常语言描述：

“背景移动得慢一点。”

“输入框里面那个灰色字。”

“弹一下再停。”

“随机乱码最后变成标题。”

Name That UI 就可以帮助你找到对应的：

UI 专业术语 + API / Framework 名称 + 可直接复制的 Agent Prompt + Debug Prompt。

目前网站已经整理 76 个 Web 与 macOS UI 条目，同时还有专门的视觉风格词典、易混淆组件对比，以及包含 63 个 AppKit / SwiftUI 对应关系的 Translation Table。

对于正在使用 Codex、Claude Code、Cursor 做 Vibe Coding、AI 前端开发和 UI 交互设计 的人来说，非常适合放进收藏夹。

以后遇到：

“我知道这个效果，但是不知道怎么跟 AI 说。”

先来这里查一下。

找到真正的名字以后，再把 Prompt 喂给 Agent。

很多时候，前端生成效果就会稳定很多。

官方网站：

https://namethatui.com/