TellYourAgent

看得见，说得出，让 agent 一次做对。

给 vibe coder 的选型决策词典。看到 UI 元素、叫出它的名字、知道什么场景用哪个——然后复制一句可以直接发给 agent 的精准指令。

⌘K

收录 32 条 · 持续上新

完整案例用一个个人博客，走完从骨架到表单的设计决策约 30 分钟 · 宏观到微观

图版 №01 · 页面与展示

4 条

这一屏由哪些大块组成、信息用什么形式呈现？

UI · №01单讲 SPECIMEN

让 agent 一次做对

看得见、说得出的选型决策词典。

首屏大区

Hero Section
落地页最上面那一大块
UI · №02单讲 SPECIMEN
卡片解剖图
悬停每个部位，看它的名字。
2026-07-17·3 min
悬停部位 → ?

卡片

Card
一块一块的内容格子
UI · №03单讲 SPECIMEN
姓名 角色
陈默设计
阿杰开发
小满产品

数据表格

Table / Data Grid
后台那种一行行的数据表
UI · №04对照 PLATE
Badge
设计 Chip
Pill
#vibe-codingTag

小标签（怎么选）

Badge vs Chip vs Pill vs Tag
角上的小红点

图版 №02 · 分组与路径

8 条

内容怎么分组、切换，用户怎么知道自己在哪？

UI · №05单讲 SPECIMEN
本周访问 1,248 次，比上周 +12%

标签页

Tabs
上面一排可以切换的栏目
UI · №06单讲 SPECIMEN

步骤条

Stepper
第1步第2步那种进度条
UI · №07单讲 SPECIMEN

全部免费开源，词条可自由复制使用。

可以，每条都实测过才标「已验证」。

架构、测试领域已在路上。

手风琴

Accordion
点一下展开点一下收起的列表
UI · №08单讲 SPECIMEN

你在第 4 层 —— 点上面任意祖先试试「回到该层」

面包屑

Breadcrumbs
页面顶上那串「首页 > 分类 > 详情」
UI · №09对照 PLATE
STICKY跟着容器
文章开头
章节导航
容器边界
FIXED跟着视口
全局工具条
内容继续
scrollTop 0px

导航怎么钉住（怎么选）

Sticky vs Fixed
滚动时导航要不要一直在顶上
UI · №10对照 PLATE
MPA
首页分类文章
独立 URL
SPA
应用壳共享状态
客户端路由
HYBRID
文章后台
按任务切分

页面架构（怎么选）

MPA vs SPA vs Hybrid
网站该做单页还是多页
UI · №11对照 PLATE

    列表加载（怎么选）

    Pagination vs Infinite Scroll vs Load More
    列表太长怎么翻页
    UI · №12单讲 SPECIMEN

    命令面板

    Command Palette
    按 Cmd K 弹出来的搜索框

    图版 №03 · 输入与操作

    10 条

    用户怎么输入、选择、执行动作，临时界面怎么出现？

    UI · №13单讲 SPECIMEN

    离开输入框时自动校验

    输入框最佳实践

    Input Field Best Practices
    Input
    UI · №14对照 PLATE
    Primary
    Secondary
    Ghost
    Danger

    按钮怎么选

    Button Variants
    Button
    UI · №15对照 PLATE

    正确示例

    Link — 导航到其他页面
    查看按钮词条

    右键试试「在新标签页打开」；Tab 聚焦后按 Enter

    Button — 触发操作（不跳转）

    Tab 聚焦后按 Enter 或 Space 都能触发

    常见错误（反模式）

    ❌ 错误：Link 的 href 是 #
    展开更多

    点了会在 URL 栏加 #；屏幕阅读器说「链接」但不去任何地方；右键「在新标签页打开」没意义

    ✓ 正确：用 Button

    语义正确；Enter/Space 都能触发；屏幕阅读器说「按钮」

    试试看

    验证方式：

    • 右键菜单：Link 有「在新标签页打开」「复制链接」，Button 没有
    • 键盘：Tab 聚焦后，Link 只响应 Enter；Button 响应 Enter 和 Space
    • 焦点态：Tab 浏览时两者都有可见焦点环（朱砂色 outline）
    • 屏幕阅读器（如有）：Link 读作「链接，去往 XX」；Button 读作「按钮，XX」

    Link 还是 Button

    Link vs Button
    链接
    UI · №16对照 PLATE
    实时校验离开字段就报错
    提交时校验点提交才集中报错

    试试看：

    • 左边点进「昵称」敲 1 个字就点别处 → 立刻报错；右边同样操作 → 不吭声，点「注册」才集中报错并跳到第一个错误
    • 两边都填对后提交：用 taken@example.com → 客户端全过，服务器仍会打回（服务器端校验兜底，错误映射回邮箱字段）

    表单结构与校验

    Form Structure & Validation
    表单
    UI · №17对照 PLATE
    已开启Switch
    Checkbox
    Radio

    选择控件（怎么选）

    Switch vs Checkbox vs Radio
    加个选择
    UI · №18单讲 SPECIMEN

    单个 Checkbox

    多选分组

    选择你感兴趣的领域（可多选）

    全选 + 不定态

    试试看

    验证方式：

    • 点击区域：label 文字可点击（不只是小方框）
    • 键盘：Tab 聚焦到 Checkbox，Space 切换选中 / 未选
    • 不定态：在「全选任务」区域勾选部分任务，父级 Checkbox 显示横线（不定态）
    • 焦点环：Tab 浏览时所有 Checkbox 有可见焦点环（朱砂色 outline）

    复选框

    Checkbox
    复选框
    UI · №19单讲 SPECIMEN

      自动补全框

      Combobox
      打字时下面弹建议的输入框
      UI · №20对照 PLATE

      模态弹窗

      居中、挡住一切，逼你先处理

      抽屉

      从右侧滑出，页面还在旁边

      底部面板

      从底部升起，移动端最常见

      弹窗（怎么选）

      Modal vs Drawer vs Sheet
      弹出来一个框
      UI · №21单讲 SPECIMEN

      遮罩层

      Scrim
      弹窗后面那层黑
      UI · №22对照 PLATE

      浮层（怎么选）

      Popover vs Dropdown vs Tooltip
      鼠标放上去弹出来的小框

      图版 №04 · 系统回应

      6 条

      系统怎么说明正在处理、已完成、出错或没有内容？

      UI · №23对照 PLATE
      已保存

      提示（怎么选）

      Toast vs Banner vs Alert
      给用户提示一下
      UI · №24单讲 SPECIMEN
      已保存

      轻提示

      Toast
      右下角弹出来又自己消失的小提示
      UI · №25对照 PLATE
      Helper — 出错前

      至少 8 个字符

      中性引导，常驻可见

      Error — 出错后

      密码至少 8 个字符，还差 3 个

      错误色 + 边框同步，说清怎么改

      Success — 通过后（可选）

      该用户名可用

      仅高焦虑字段，其余沉默即通过

      至少 8 个字符

      普通字段：修够 8 位后回到 Helper，不打绿勾

      4-20 个字符，字母数字下划线

      高焦虑字段：离开时模拟服务器检查，通过给 Success

      试试看：

      • 密码敲 3 个字符点别处 → Error 在同一行换班；补够 8 位再离开 → 静静换回 Helper（沉默即通过）
      • 用户名填 paper_cat 离开 → 检查中 → 绿色 Success；换成 admin → 服务器打回「已被占用」
      • 盯住反馈行：三种身份来回换，下方内容纹丝不动（预留高度，布局不跳）

      表单验证提示

      Validation Feedback
      输入框下面那行小字
      UI · №26对照 PLATE
      Spinner
      72%
      Bar
      72Ring

      加载进度（怎么选）

      Spinner vs Progress Bar vs Progress Ring
      转圈圈
      UI · №27单讲 SPECIMEN
      词
      骨架屏加载完成
      内容淡入，布局没有跳动

      骨架屏

      Skeleton
      加载的时候一闪一闪的灰条
      UI · №28单讲 SPECIMEN

      还没有项目

      空状态

      Empty State
      列表里什么都没有的时候显示的那个页面

      图版 №05 · 动效与过渡

      4 条

      元素出现、消失、切换的时候，怎么动才自然？

      UI · №29对照 PLATE
      卡
      卡
      卡

      入场动效（怎么选）

      Slide vs Scale vs Pop
      滑进来的效果
      UI · №30对照 PLATE
      卡
      卡
      卡

      渐隐（怎么选）

      Fade vs Dissolve vs Blur-out
      慢慢消失的效果
      UI · №31单讲 SPECIMEN
      文章列表
      文章详情
      180ms CROSSFADE

      页面转场

      Page Transition
      页面跳转时淡一下
      UI · №32单讲 SPECIMEN
      • 收件箱
      • 已加星标
      • 草稿箱
      • 已发送

      错峰动画

      Stagger
      一个接一个出来的效果

      真实设计会在这五类之间来回跳——这是浏览顺序，不是工序。急着查词？直接用上面的搜索。