正在打开每日关注
正在打开每日关注
用可视化词典识别 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 💜
是什么
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 工程而言，准确术语能显著改善提示词的约束力和实现方向。它的价值不只是灵感展示，而是把设计语言转成工程语言。
边界与风险
知道控件名称不等于理解完整行为，也不保证跨平台实现一致。示例仍需结合项目的可访问性要求、键盘路径、响应式布局和具体框架文档验证；尤其是拖放与焦点管理，不能只复制表面视觉状态。