01
按钮 Button
触发一个明确动作。主按钮承载页面最重要的下一步。
Prompt 这样说
一个高对比的蓝色 Primary Button，文字为‘继续’，包含 hover 与 focus 状态
UI VISUAL DICTIONARY
看到那个东西，
终于知道它叫什么
按类别浏览或直接搜索。每张卡都给出准确名称、用途和一句可复用的 Prompt 描述。
VISUAL DICTIONARY
8 个高频 UI 部件
用筛选和搜索找到它，看到真实形态，再把标准名称带进 Prompt。
0/ 8 已掌握
02
模态对话框 Modal Dialog
浮在页面上方并暂时阻断背景操作，适合需要用户确认的任务。
Prompt 这样说
在页面中央打开 Modal Dialog，并在背景加入半透明 Scrim
03
轻提示 Toast / Snackbar
短暂出现的非阻断消息，告诉用户操作已经成功或失败。
Prompt 这样说
保存后在右下角显示 3 秒的成功 Toast，不打断当前任务
04
工具提示 Tooltip
在悬停或键盘聚焦时，为图标或控件补充一小段说明。
Prompt 这样说
鼠标悬停问号图标时，在上方显示 Tooltip，延迟 300ms
05
标签页 Tabs
在同一层级的内容视图之间切换，共享同一块内容区域。
Prompt 这样说
使用三项 Tabs 切换概览、活动与设置，当前项显示底部指示线
06
手风琴 Accordion / Disclosure
通过展开和收起标题来管理纵向内容，常见于 FAQ。
Prompt 这样说
把常见问题做成单项展开的 Accordion，标题右侧使用旋转 Chevron
07
切换开关 Switch / Toggle
立即在开和关两个状态之间切换，适合独立设置。
Prompt 这样说
用 Switch 控制深色模式，打开时轨道变蓝并让圆点滑向右侧
08
骨架屏 Skeleton Screen
在内容加载前保留大致结构，减少页面跳动和等待焦虑。
Prompt 这样说
数据加载时显示与最终卡片同尺寸的 Skeleton，并加入轻微 Shimmer
CHECKPOINT
记录这一站
完成后勾选。你可以随时撤销。