NameThatUI：识别 UI 模式，写准 AI 提示词
用可视化词典识别 UI 模式、对应 API 与交互语义，帮助写出更准确的 AI 提示词。
原始内容
UI/UX Designers, you need to see this. I just found a new tool called “NameThatUI” and it’s basically a visual dictionary for UI patterns you recognize but don’t know the name of. If you’ve ever struggled to describe a UI element when prompting AI tools, this makes it much easier. Just search for what you’re looking at, learn the correct term, and write better prompts. Bookmark it; you will love it 💜
中文译文
机器翻译，保留原文供核对。
UI/UX 设计师们，你们需要看看这个。 我刚发现一个叫 “NameThatUI” 的新工具，它基本上就是一本视觉词典，专门收录那些你认得、却叫不出名字的 UI 模式。 如果你在用 AI 工具写提示词时，曾经为如何描述某个 UI 元素而苦恼，这个工具会让你轻松很多。只需搜索你看到的东西，学会正确的术语，然后写出更好的提示词。 收藏它；你会爱上它的 💜
深度解析
是什么
NameThatUI 是一个面向 UI 模式的可视化词典，解决“看得出来，但叫不出名字”的沟通问题。画面中的索引页覆盖 Pop-Up Button、Segmented Control、Sheet、Sidebar、Stepper、Toolbar 等 macOS 模式；详情页则把视觉示例、正式术语、平台 API、代码写法和可复制 prompt 串在一起。
核心设计
它提供了一层从“截图识别”到“可执行规格”的翻译：先通过搜索找到模式，再查看状态与交互演示，最后将名称映射到 AppKit、SwiftUI、HTML 或 dnd-kit。拖放页面强调 drag handle、拖拽预览、插入线、放置区域和可访问性语义；Focus Ring 页面则把键盘焦点、first responder 与 SwiftUI 焦点管理联系起来。这种结构特别适合给编码 Agent 提供精确上下文。
关键洞察
对设计师而言，它强化了组件命名和交互表达；对工程师而言，它减少凭感觉重造控件的概率；对 Agent 工程而言，准确术语能显著改善提示词的约束力和实现方向。它的价值不只是灵感展示，而是把设计语言转成工程语言。
边界与风险
知道控件名称不等于理解完整行为，也不保证跨平台实现一致。示例仍需结合项目的可访问性要求、键盘路径、响应式布局和具体框架文档验证；尤其是拖放与焦点管理，不能只复制表面视觉状态。
精选追评与案例
原作者补充了工具用途总结和直接访问链接。
Perfect for identifying UI patterns, learning the right design terminology, and writing better AI prompts with confidence. Website Link ⬇️ https://t.co/970guoYeF4
中文译文 · 机器翻译
非常适合识别 UI 模式、学习正确的设计术语，并更有信心地编写更好的 AI 提示词。 网站链接 ⬇️ https://t.co/970guoYeF4
点明准确术语对提示词输入的实际帮助。
@Abmankendrick nice addition, having the exact UI term cuts friction when feeding prompts. will bookmark it
中文译文 · 机器翻译
@Abmankendrick 很好的补充，掌握准确的 UI 术语能减少输入提示词时的摩擦。我会收藏它。