STATION 03 / LET THEM SPEAK

对话

Every click is the user saying something.

这一站的词，用来告诉 AI 怎么让人表达自己——按钮、输入、选择与上传。

本站 67 词 · 8 个分类

按钮

Button21 词

中文俗称主按钮标准英文Primary Button

常见别名Main CTA何时使用页面主操作。

AI PROMPT

Build a single Primary Button, the main call to action, not a toolbar. Structure: one filled button labeled Save with comfortable padding (about 32px height). Visual: solid accent fill, high-contrast label, no outline-only look. Interaction: click fires the primary action; keyboard focus-visible ring. States: default, hover (slightly lighter or lifted), pressed, disabled, loading optional. Do not style it as a ghost, outline, or link, and do not add a dropdown chevron. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗主按钮，作为页面主操作，不要整条工具栏。实心填充、对比足够的文字，标签 Save，高度约 32px。点击执行主操作，键盘有可见焦点环。状态含默认、悬停、按下、禁用。不要做成幽灵、描边或链接，也不要右侧下拉箭头。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称次按钮标准英文Secondary Button

常见别名Default button何时使用与主按钮配对。

AI PROMPT

Build a single Secondary Button meant to sit beside a primary CTA. Structure: label Cancel, same height as a primary button. Visual: quieter than primary — filled muted or neutral, not accent-solid. Interaction: click; focus-visible. States: default, hover, pressed, disabled. Do not use accent fill, and do not make it look like a text link. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗次按钮，用来放在主按钮旁边。标签 Cancel，高度与主按钮一致。比主按钮弱，中性填充，不要实心强调色。状态含默认、悬停、按下、禁用。不要做成文字链接。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称描边按钮标准英文Outline Button

常见别名Bordered button何时使用弱一点但仍是按钮。

AI PROMPT

Build a single Outline Button. Structure: label Edit, ~32px height. Visual: 1px border, transparent fill, text matches border; no heavy shadow. Interaction: click; focus-visible. States: default, hover (light fill inside the border), pressed, disabled. Do not use a solid primary fill, and do not remove the border (that would be ghost/text). If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗描边按钮。标签 Edit，约 32px 高。1px 边、透明底、字色跟边走，不要重阴影。悬停可在边框内淡填。不要实心主色，也不要去掉边框变成幽灵/文字按钮。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称幽灵按钮标准英文Ghost Button

常见别名Bare button何时使用无背景，工具栏常见。

AI PROMPT

Build a single Ghost Button for toolbars. Structure: label Filter, same height as other buttons. Visual: no background and no border at rest; hover reveals a light fill. Interaction: click; focus-visible. States: default (bare), hover (fill), pressed, disabled. Do not keep a permanent border (outline) or a solid accent fill (primary). If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗幽灵按钮，适合工具栏。标签 Filter。静止时无底无边，悬停才出现浅底。不要常驻描边（那是描边按钮），也不要实心强调色（那是主按钮）。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称文字按钮标准英文Text Button

常见别名Textual button何时使用最轻量操作。

AI PROMPT

Build a single Text Button, the lightest action. Structure: label Skip with no box at all. Visual: text only, optional underline on hover; no border, no fill at rest. Interaction: click; focus-visible. States: default, hover, pressed, disabled. Do not add chrome, and do not style it as a navigation link with always-on underline unless hovering. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗最轻的文字按钮。标签 Skip，完全无框。静止无边无底，悬停可出现下划线。不要加任何铬框，也不要做成一直带下划线的导航链接。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称链接按钮标准英文Link Button

常见别名Button as link何时使用跳转感强的操作。

AI PROMPT

Build a single Link Button that feels like navigation. Structure: label Open docs. Visual: accent or info colored text with an underline affordance (always or on hover, but clearly a link). Interaction: click; focus-visible. States: default, hover, visited optional, disabled. Do not use a bordered button shape, and do not use it as the page primary save action. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗链接按钮，跳转感要强。标签 Open docs。信息色或强调色文字，带下划线（常显或悬停），一眼是链接。不要做成带边框的按钮形，也不要当页面主保存按钮。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称图标按钮标准英文Icon Button

常见别名Icon-only button何时使用工具操作。

AI PROMPT

Build a single Icon Button. Structure: a square control about 32px with a line icon (settings gear), no text. Interaction: click; tooltip Settings on hover; focus-visible. States: default, hover, pressed, disabled. Hit target at least 32px. Do not use a circular FAB, and do not add a visible label beside the icon. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗图标按钮。约 32px 方形，只有线条设置图标，无文字。点击；悬停 tooltip 为 Settings。热区至少 32px。不要做成圆形 FAB，也不要在旁边加可见文字。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称圆形图标按钮标准英文Circular Icon Button

常见别名Round icon button何时使用添加一类圆形强调。

AI PROMPT

Build a single Circular Icon Button for a compact add action. Structure: a round 32–40px control with a plus line icon. Visual: circular clip, 1px border or soft fill. Interaction: click to add; tooltip Add. States: default, hover, pressed, disabled. Do not use a square icon button, and do not pin it as a screen-corner FAB. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗圆形图标按钮，用于紧凑添加。32–40px 圆，中间加号线条图标。可点，tooltip 为 Add。不要做成方图标按钮，也不要钉在屏幕角落当 FAB。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称浮动按钮标准英文Floating Action Button

常见别名FAB何时使用移动端主创建入口。

AI PROMPT

Build a single Floating Action Button (FAB). Structure: a circular 40–56px button with a plus icon, visually anchored to the bottom-right of its container. Visual: stronger than a normal icon button (accent fill or accent ring). Interaction: click is the main create action. States: default, hover (lift), pressed, disabled. Do not place it inline in a form row, and do not expand it into a speed-dial unless asked. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗浮动操作按钮 FAB。圆形 40–56px，加号图标，锚定在容器右下角。比普通图标按钮更强调。点击即主创建。悬停可微抬。不要排进表单行里，也不要默认展开成速度拨号。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称危险按钮标准英文Destructive Button

常见别名Danger button何时使用删除、不可逆操作。

AI PROMPT

Build a single Destructive Button for irreversible actions. Structure: label Delete. Visual: danger red text and/or border or fill, still clearly a button. Interaction: click; should not look like the primary save. States: default, hover, pressed, disabled. Do not use the primary accent color, and do not use a text-only link style for delete. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗危险按钮，用于不可逆操作。标签 Delete。红色字/边/底，仍是按钮。不要用主强调色（现在是绿），也不要用纯文字链接当删除。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称加载按钮标准英文Loading Button

常见别名Pending button何时使用提交中防止连点。

AI PROMPT

Build a single Loading Button that blocks repeat submits. Structure: label Save, ~32px. Interaction: on click, switch to a pending state: show a small spinner, change label to Saving, and disable further clicks until a short mock finish. States: default, loading (spinner + disabled), success optional, disabled. Motion: spinner rotates. Do not allow double-submit, and do not use a page-level spinner instead of the button state. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗加载按钮，防止连点。标签 Save。点击后进入等待：小转圈、文案 Saving、禁用再点，直到一次短模拟结束。转圈要转。不要允许双提交，也不要用整页转圈代替按钮自己的状态。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称禁用按钮标准英文Disabled Button

常见别名Inactive button何时使用当前不可用。

AI PROMPT

Build a single Disabled Button that cannot be pressed. Structure: label Submit, visually a primary-shaped button at reduced contrast (about 40% opacity). Interaction: not clickable, not focusable as an action, cursor not-allowed. States: only the disabled look. Do not make it look enabled, and do not use it as a loading button with a spinner. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗禁用按钮，按不了。标签 Submit，主按钮外形但对比降低（约 40% 透明）。不可点、不可当操作聚焦，光标 not-allowed。不要看起来还能点，也不要带转圈（那是加载按钮）。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称分裂按钮标准英文Split Button

常见别名Split CTA何时使用主操作加右侧更多。

AI PROMPT

Build a single Split Button. Structure: one control split into a left primary action labeled Save and a right chevron slot sharing one outline. Interaction: left click runs Save; right click opens a small menu with Save draft and Save and close. States: default, hover, open, disabled. Do not use a single dropdown that hides the primary action, and do not use a disconnected button plus icon. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗分裂按钮。同一描边里左侧主操作 Save，右侧箭头。点左执行 Save；点右打开小菜单（Save draft、Save and close）。不要做成把主操作藏进菜单的下拉按钮，也不要拆成两颗不相连的按钮。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称按钮组标准英文Button Group

常见别名Connected buttons何时使用相关操作并排。

AI PROMPT

Build a single connected Button Group. Structure: three joined buttons Left, Center, Right sharing one outline with inner dividers (no gap). Interaction: each segment is clickable; they are related actions, not exclusive selection unless styled as toggle. States: default, hover per segment, pressed, disabled. Do not use separate spaced buttons, and do not use a segmented control for view switching unless the labels are clearly actions. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成连在一起的按钮组。Left、Center、Right 共一圈边、内部分隔、无间隙。每段可点，是相关操作。不要做成有间距的独立按钮；若不是互斥视图切换，不要做成分段控制。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称开关按钮标准英文Toggle Button

常见别名Pressed button何时使用按下和未按下。

AI PROMPT

Build a single Toggle Button with pressed and unpressed states. Structure: label Bold or an icon, one control. Interaction: click flips pressed on/off and keeps the state. Visual: pressed uses accent border or fill; unpressed is quiet. States: off, on, hover, disabled. Do not use a Switch track, and do not group multiple toggles unless asked. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗开关按钮，有按下和未按下。标签 Bold 或图标。点击在开/关之间保持状态。按下用强调边或底。不要做成带轨道的 Switch，也不要默认做成一组。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称开关按钮组标准英文Toggle Group

常见别名Format group何时使用格式组。

AI PROMPT

Build a single Toggle Group for formatting. Structure: three joined toggles Bold, Italic, Underline. Interaction: each can be on independently (multi-select), click to toggle. States: off, on, hover, disabled per item. Do not allow only one selected (that would be segmented control), and do not use a dropdown. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成格式用的开关按钮组。Bold、Italic、Underline 连在一起，各项可独立开（可多选），点击切换。不要做成只能选一个的分段控制，也不要用下拉。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称更多按钮标准英文Overflow Button

常见别名Kebab Menu何时使用竖三点溢出操作。

AI PROMPT

Build a single Overflow / Kebab button. Structure: a vertical three-dots icon button. Interaction: click opens a menu with Edit, Duplicate, Delete; click outside or Escape closes. States: default, hover, open. Do not use a horizontal ellipsis (meatball), and do not use a labeled Actions dropdown as the only trigger. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗竖三点溢出按钮。点击打开 Edit、Duplicate、Delete；点外部或 Escape 关闭。不要用横三点（肉丸菜单），也不要只用带文字的 Actions 下拉当触发器。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称肉丸菜单标准英文Meatball Menu

常见别名Horizontal ellipsis何时使用横三点更多。

AI PROMPT

Build a single Meatball Menu button. Structure: a horizontal three-dots icon button. Interaction: click opens the same kind of overflow menu (Edit, Duplicate, Delete). States: default, hover, open. Do not use vertical kebab dots, and do not place it as a FAB. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做一颗横三点肉丸菜单。点击打开 Edit、Duplicate、Delete。不要用竖三点，也不要做成 FAB。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称快速操作菜单标准英文Speed Dial

常见别名FAB speed dial何时使用浮动按钮展开多个操作。

AI PROMPT

Build a single Speed Dial. Structure: a FAB in the corner; on click it fans out 2–3 smaller circular actions (file, image, note) with labels. Interaction: click FAB to expand/collapse; click an action then collapse. States: collapsed, expanded, hover. Motion: 180ms fan-out. Do not keep all actions visible at rest, and do not use a flat dropdown list instead of radial/stacked FABs. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成速度拨号：角落一颗 FAB，点击展开 2–3 个更小的圆形操作（文件、图片、笔记）带短标签。再点操作后收起。约 180ms 展开。静止时不要把所有操作都摆出来，也不要用扁平下拉列表代替。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

输入

Input6 词

姓名

中文俗称单行输入标准英文Text Input

常见别名Text Field何时使用短文本。

AI PROMPT

Build a single labeled Text Input, not a form page. Structure: label Name, one-line field, placeholder Jane Doe, helper text optional. Interaction: type freely; focus-visible ring. States: default, hover, focus, error (red border plus message), disabled. Do not use a textarea, search icon, or masked pattern. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成带标签的单行输入，不要整表单页。标签 Name，占位 Jane Doe。可自由输入，焦点环可见。状态含默认、悬停、聚焦、错误（红边加文案）、禁用。不要做成多行、搜索框或格式遮罩。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称多行输入标准英文Textarea

常见别名Multiline Text Field何时使用长文本。

AI PROMPT

Build a single Textarea, not a rich editor. Structure: label Notes, fixed height about 4–6 lines, placeholder Add a note, no live markdown preview. Interaction: type multiline; no resize handle required. States: default, focus, error, disabled. Do not use a WYSIWYG toolbar or auto-grow unless asked. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成多行文本域，不是富文本。标签 Notes，固定约 4–6 行，占位 Add a note，不要 Markdown 预览。不要工具栏，也不要默认自动长高。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称搜索框标准英文Search Field

常见别名Search Input何时使用过滤列表或全局搜索。

AI PROMPT

Build a single Search Field. Structure: leading search icon, input, trailing clear button when not empty. Placeholder Search. Interaction: type to filter; Escape or clear empties the field. States: empty, typing, focus, cleared. Do not use a standalone combobox menu as the only UI, and do not omit the clear control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成搜索框。前置搜索图标、输入、有内容时尾部清除。占位 Search。可输入过滤；Escape 或清除清空。不要做成只有下拉的组合框，也不要省略清除。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称密码输入标准英文Password Field

常见别名Password Input何时使用敏感输入，可显隐。

AI PROMPT

Build a single Password Field. Structure: label Password, masked input, trailing visibility toggle (show/hide). Interaction: toggle reveals plaintext; autocomplete off. States: masked, visible, focus, error. Do not use a plain text input, and do not add a strength meter unless asked. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成密码输入。标签 Password，默认掩码，尾部显隐切换。不要做成普通文本，也不要默认加强度条。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称数字输入标准英文Number Input

常见别名Numeric field何时使用直接键入数字。

AI PROMPT

Build a single Number Input. Structure: label Quantity, field that accepts numeric values (integers). Interaction: type digits; invalid keys ignored. States: default, focus, error. Do not add stepper arrows (that is Spinbutton), and do not use a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成数字输入。标签 Quantity，只接受数字。不要加减按钮（那是步进数字），也不要用滑块。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称步进数字标准英文Spinbutton

常见别名Numeric Stepper何时使用带增减按钮的数值。

AI PROMPT

Build a single Spinbutton. Structure: numeric value with increment and decrement buttons, label Quantity, default 1. Interaction: click plus/minus or type a number; clamp to a min/max. States: default, focus, disabled, at-min/at-max. Do not use a slider or a plain number field without buttons. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成带增减的步进数字。标签 Quantity，默认 1，点加减或键入，限制最小最大。不要用滑块或没有按钮的纯数字框。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

选择器

Select6 词

China

中文俗称下拉单选标准英文Select

常见别名Dropdown Select何时使用固定选项里选一个，不能自由输入。

AI PROMPT

Build a single Select dropdown. Structure: closed field showing one value (Apple); click opens a list of fruits; cannot type a custom value. Interaction: click option to select and close; Escape closes. States: closed, open, selected, disabled. Do not allow free text (combobox) or multi chips. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成下拉单选。关闭时显示一项（Apple）；点开水果列表；不能自由输入。点选项即选中并关闭。不要做成可输入组合框或多选芯片。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

React

中文俗称下拉多选标准英文Multi-select

常见别名Multiselect何时使用已选项以可删 Chip 出现在框内。

AI PROMPT

Build a single Multi-select. Structure: field contains removable chips for selected values plus a dropdown of remaining options. Default two selected. Interaction: click to add; chip X removes. States: empty, filled, open. Do not use a single-value select, and do not use a tag input that creates tokens from free text. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成下拉多选。框内是可删芯片，下拉是其余选项。默认已选两项。点选添加，芯片 X 删除。不要做成单选，也不要做成回车造标签的标签输入。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称组合框标准英文Combobox

常见别名Searchable select何时使用可输入、过滤、选已有项。不是 Select。

AI PROMPT

Build a single Combobox (searchable select), not a plain Select. Structure: field you can type in; list filters to matching existing options (cities). Interaction: type to filter; pick an option; do not invent values outside the list. States: idle, filtering, open, selected. Do not use a closed-only select, and do not treat it as autocomplete that keeps arbitrary text as the value. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成可搜索组合框，不是普通 Select。可输入并过滤已有选项（城市）；只能选列表里的值。不要做成不能打字的下拉，也不要做成任意文本都算值的自动完成。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称自动完成标准英文Autocomplete

常见别名Autosuggest何时使用输入时出建议，核心仍是文本框。

AI PROMPT

Build a single Autocomplete text field. Structure: a normal text input; suggestions appear while typing (e.g. emails) but the typed string remains the value even if none is chosen. Interaction: pick a suggestion to fill, or keep custom text. Do not force picking from a closed list (that is Select/Combobox). If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成自动完成文本框。本质仍是文本框，输入时出建议（如邮箱）；不选建议也可以，键入内容就是值。不要强制只能选列表（那是 Select/组合框）。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

选择地区

中文俗称级联选择标准英文Cascader

常见别名Hierarchical select何时使用省市区这类层级路径。

AI PROMPT

Build a single Cascader for hierarchical paths. Structure: click to open columns or nested menus for Region / City / District (e.g. Zhejiang, Hangzhou, Xihu). The field shows the full path. Interaction: pick level by level; confirm completes the path. Do not use a flat select or a tree-select with checkboxes. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成级联选择。点开省/市/区多列（如浙江、杭州、西湖），框内显示完整路径。逐级选。不要做成扁平下拉或带复选的树选择。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中国上海浦东

中文俗称树选择标准英文Tree Select

常见别名Tree dropdown何时使用层级多选或单选。

AI PROMPT

Build a single Tree Select. Structure: a searchable dropdown whose options are an expandable tree (folders/files); single or multi via checks. Interaction: expand nodes, pick a leaf or node; field shows the chosen name. Do not use a cascader column UI or a full-page tree view. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成树选择。可搜索的下拉里是可展开的树；点选节点。框内显示选中名。不要做成级联多列，也不要做成整页树视图。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

勾选

Selection4 词

选项 A选项 B选项 C

中文俗称复选框标准英文Checkbox

常见别名Multi-select boxes何时使用多项独立勾选。

AI PROMPT

Build a Checkbox group. Structure: three independent options (Email, SMS, Push) each with a square checkbox and label. Interaction: toggle any combination. States: unchecked, checked, disabled. Do not use radios (exclusive) or a switch. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成复选框组。三项 Email、SMS、Push 可任意组合勾选。不要做成单选或开关。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

选项 A选项 B选项 C

中文俗称单选组标准英文Radio Group

常见别名Radios何时使用一组里最多选一个。

AI PROMPT

Build a Radio Group. Structure: three radios Size S/M/L, only one selected. Interaction: picking one deselects others. Do not use checkboxes or a segmented control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成单选组。尺码 S/M/L，只能选一个。点一个其余取消。不要用复选或分段控制。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

已开启

中文俗称开关标准英文Switch

常见别名Toggle Switch何时使用开/关二元状态，不要用 Radio 代替。

AI PROMPT

Build a single Switch for binary on/off. Structure: a sliding thumb on a track, label Notifications, default on. Interaction: click/drag toggles. States: on, off, disabled. Motion: 150ms thumb travel. Do not use a radio pair or a checkbox square. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成开关，表示开/关。轨道加滑块，标签 Notifications，默认开。约 150ms。不要用一对单选或方复选框。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

部分选

中文俗称三态复选框标准英文Tri-state Checkbox

常见别名Indeterminate Checkbox何时使用全选、部分选、未选。

AI PROMPT

Build a Tri-state Checkbox. Structure: a parent Select all with children Option A/B/C. Parent is unchecked, checked, or indeterminate (partial). Interaction: toggle children updates parent; click parent selects/clears all. Do not use only two states. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成三态复选框。父级 Select all 加子项 A/B/C。父级有未选、全选、部分选。点子项更新父级；点父级全选或清空。不要只有两态。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

滑块

Slider4 词

中文俗称数值滑块标准英文Slider

常见别名Range Input何时使用连续范围内选一个值。

AI PROMPT

Build a single horizontal Slider. Structure: a track 0–100, one thumb, value label. Interaction: drag thumb or click track. States: default, dragging, disabled. Do not use two thumbs or tick-only steps. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成横向数值滑块。轨道 0–100，单滑块，显示数值。拖或点轨道。不要双滑块或只能停刻度。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

28 – 72

中文俗称范围滑块标准英文Range Slider

常见别名Multi-thumb Slider何时使用选最小和最大两个值。

AI PROMPT

Build a Range Slider with two thumbs. Structure: min and max on one track (e.g. 20–80), both values visible. Interaction: drag each thumb; they cannot cross. Do not use a single-value slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成双滑块范围条。同一轨道最小最大（如 20–80），两值都显示，不可交叉。不要单值滑块。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称垂直滑块标准英文Vertical Slider

常见别名Vertical range何时使用音量等纵向场景。

AI PROMPT

Build a Vertical Slider. Structure: a tall track (volume-like) with one thumb. Interaction: drag vertically. Do not use a horizontal slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成垂直滑块。纵向轨道单滑块，上下拖。不要做成横向。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称步进滑块标准英文Stepped Slider

常见别名Discrete Slider何时使用只能落在刻度上。

AI PROMPT

Build a Stepped / discrete Slider. Structure: a track with visible tick marks (e.g. 0, 25, 50, 75, 100); the thumb snaps to ticks only. Interaction: drag snaps. Do not allow free continuous values. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成步进/离散滑块。可见刻度（0 到 100 隔 25），滑块只能落在刻度上。不要连续任意值。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

日期时间

DateTime8 词

中文俗称日期选择器标准英文Date Picker

常见别名Date field何时使用选一天。

AI PROMPT

Build a Date Picker. Structure: a field showing YYYY-MM-DD; click opens a calendar popover to pick one day. Interaction: pick a date closes the popover; today highlighted. Do not pick a range or time of day. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成日期选择器。框内 YYYY-MM-DD，点开月历选一天即关。不要选范围或时分。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

开始 08-09 → 结束 08-12

一二三四五六日

中文俗称日期范围标准英文Date Range Picker

常见别名Range dates何时使用开始日到结束日。

AI PROMPT

Build a Date Range Picker. Structure: two linked fields Start and End plus a calendar that can select a start then an end. Interaction: choosing the second date completes the range. Do not use a single-day picker. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成日期范围。开始/结束两个联动字段，月历先选开始再选结束。不要单日选择。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称时间选择标准英文Time Picker

常见别名Time field何时使用选时分。

AI PROMPT

Build a Time Picker. Structure: field HH:MM with hour and minute controls (spinners or lists). Interaction: change hours and minutes, confirm. Do not include a calendar. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成时间选择。HH:MM，时分控件。不要带日历。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称日期时间标准英文DateTime Picker

常见别名Date and time何时使用日期加时间。

AI PROMPT

Build a DateTime Picker. Structure: one control combining a calendar date and a time (HH:MM). Interaction: set both then confirm. Do not split into unrelated widgets with no shared value. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成日期时间选择。日历日期加时分合成一个值。不要拆成互不共享值的两个无关控件。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

一二三四五六日

中文俗称日历标准英文Calendar

常见别名Month calendar何时使用月视图点选。

AI PROMPT

Build an inline Calendar month view, not a popover field. Structure: month grid with weekday headers; click a day to select it in place. Interaction: prev/next month. Do not hide the grid behind a text field. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成行内月历，不是弹出字段。星期表头，点选某日，可翻月。不要把格子藏在输入框后面。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

第 35 周

一二三四五六日

已选一整周

中文俗称周选择标准英文Week Picker

常见别名Week field何时使用选一整周。

AI PROMPT

Build a Week Picker that selects a full ISO week. Structure: field like 2026-W35; picking any day in the calendar highlights the whole week. Do not select a single day only. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成周选择。显示如 2026-W35，点任一天高亮整周。不要只选单日。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称月选择标准英文Month Picker

常见别名Month field何时使用选年月。

AI PROMPT

Build a Month Picker. Structure: year-month grid or list (2026-08). Interaction: pick month, optional year switcher. Do not show a full day grid as the primary UI. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成月选择。选年月（2026-08），可切换年。不要以日网格为主界面。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称年选择标准英文Year Picker

常见别名Year field何时使用选年份。

AI PROMPT

Build a Year Picker. Structure: a grid of years; click one year. Interaction: page of years with prev/next. Do not require picking month/day. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成年选择。年份网格点选，可翻页。不要再选月日。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

特殊输入

Special14 词

输入后自动跳格

中文俗称验证码输入标准英文OTP Input

常见别名PIN Input何时使用分格输入，自动跳格。

AI PROMPT

Build a six-digit OTP Input. Structure: six separate single-character boxes. Interaction: type a digit advances focus; backspace goes back; paste fills all. States: empty, filled, error. Do not use one normal text field. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成六格验证码。每格一字，输入自动跳下一格，退格回上格，粘贴可填满。不要用一个普通文本框。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

ReactVue

中文俗称标签输入标准英文Tag Input

常见别名Token field何时使用回车生成标签。

AI PROMPT

Build a Tag Input. Structure: a field where Enter creates a token from typed text (e.g. design, ui). Interaction: Enter adds; X on token removes. Do not use a closed multi-select list only. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成标签输入。回车把当前文字变成标签。芯片 X 删除。不要做成只能从固定列表多选。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

ReactVue

中文俗称芯片输入标准英文Chip Input

常见别名Chips input何时使用以 Chip 展示已输入项。

AI PROMPT

Build a Chip Input where values render as removable chips inside the field (same family as tag input, chip-forward). Structure: chips plus a trailing caret to type the next value. Do not use static category tags that cannot be removed. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成芯片输入。已输入项以可删芯片显示在框内，后面可继续键入。不要做成不可删的类别标签。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称提及输入标准英文Mentions Input

常见别名At-mention何时使用输入 @ 出人列表。

AI PROMPT

Build a Mentions Input. Structure: a text field; typing @ opens a people list (Ada, Linus) to insert a mention token. Interaction: pick a person inserts @name. Do not use a generic autocomplete without the @ trigger. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成提及输入。输入 @ 出人员列表（Ada、Linus），选中插入 @name。不要做成没有 @ 触发的普通自动完成。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

可编辑正文

中文俗称富文本编辑器标准英文Rich Text Editor

常见别名WYSIWYG Editor何时使用所见即所得排版。

AI PROMPT

Build a compact Rich Text Editor (WYSIWYG). Structure: toolbar Bold, Italic, Lists plus a contenteditable area with sample sentence. Interaction: toggling toolbar formats the selection. Do not use a markdown-only textarea. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成紧凑所见即所得编辑器。工具栏粗体斜体列表，加可编辑区。不要做成纯 Markdown 文本域。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

**粗体** 和列表

中文俗称Markdown 编辑器标准英文Markdown Editor

常见别名MD editor何时使用写 Markdown。

AI PROMPT

Build a Markdown Editor with a preview toggle. Structure: textarea of markdown and a Preview control that shows rendered bold/heading. Interaction: toggle edit/preview. Do not use a full WYSIWYG toolbar as the only mode. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成带预览切换的 Markdown 编辑器。文本域写 md，Preview 显示渲染。不要只有所见即所得工具栏。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

const n = 1;

中文俗称代码编辑器标准英文Code Editor

常见别名Code textarea何时使用编辑代码。

AI PROMPT

Build a compact Code Editor. Structure: monospace area with a few lines of code, line-oriented caret. Interaction: type/edit code. Do not render as a read-only highlighted block. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成等宽代码编辑器。可按行编辑几行代码。不要做成只读高亮代码块。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称行内编辑标准英文Inline Edit

常见别名Click-to-edit何时使用点文字即编辑。

AI PROMPT

Build Inline Edit. Structure: a text value (Project name); click turns it into an input; blur or Enter saves. Interaction: click-to-edit. States: read, editing. Do not use a permanently visible input. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成行内编辑。显示文字 Project name，点击变输入框，失焦或回车保存。不要一直露出输入框。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

____-____

中文俗称遮罩输入标准英文Masked Input

常见别名Input mask何时使用格式锁定。

AI PROMPT

Build a Masked Input with a visible pattern. Structure: label Code, pattern like 000-000 shown while typing. Interaction: only allowed characters fill slots. Do not use an unconstrained text field. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成遮罩输入。标签 Code，可见模板如 000-000，只填允许字符。不要无约束文本框。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

+86 138 0000 0000

中文俗称电话输入标准英文Phone Input

常见别名Tel field何时使用区号加号码。

AI PROMPT

Build a Phone Input. Structure: country code prefix plus grouped national number. Interaction: digits group as typed. Do not use a generic text field with no grouping. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成电话输入。区号加分组号码。不要无分组的普通文本。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

¥ 0.00

中文俗称金额输入标准英文Currency Input

常见别名Money field何时使用货币符号与小数。

AI PROMPT

Build a Currency Input. Structure: leading currency symbol, decimal value (e.g. 12.00). Interaction: numeric entry with two decimals. Do not use a plain number without the symbol. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成金额输入。前导货币符号，两位小数。不要无符号的纯数字。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

https://

中文俗称URL 输入标准英文URL Input

常见别名Link field何时使用网址。

AI PROMPT

Build a URL Input. Structure: field with protocol hint (https://) and validation state. Interaction: invalid URL shows error. Do not use an unvalidated text field. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成 URL 输入。带 https:// 提示和校验态，非法变错误。不要无校验文本。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

中文俗称颜色选择器标准英文Color Picker

常见别名Swatch picker何时使用选颜色。

AI PROMPT

Build a Color Picker. Structure: a swatch plus hex value; click opens a simple palette or native color. Interaction: picking updates swatch and hex. Do not use text-only without a swatch. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成颜色选择。色块加十六进制，点选更新。不要只有文字没有色块。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

3 / 5

中文俗称星级评分标准英文Rating Control

常见别名Star rating何时使用1 到 5 分。

AI PROMPT

Build a star Rating Control 1–5. Structure: five stars. Interaction: hover previews, click sets value. States: 0–5. Do not use a numeric slider as the only UI. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成 1 到 5 星评分。悬停预览，点击打分。不要只用数字滑块。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

上传

Upload4 词

brief.pdf

中文俗称文件选择标准英文File Input

常见别名Choose file何时使用系统文件框。

AI PROMPT

Build a native-style File Input. Structure: Choose file control that selects one file and shows the filename. Interaction: click opens picker (or mock a name). Do not use a large dropzone. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成系统风格文件选择。选一个文件并显示文件名。不要做成大拖放区。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

brief.pdf

中文俗称上传按钮标准英文Upload Button

常见别名Upload CTA何时使用按钮触发选择。

AI PROMPT

Build an Upload Button. Structure: a button Upload that triggers the file picker and then shows the chosen name. Do not use a hidden unlabeled native input as the only visible UI. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成上传按钮。按钮 Upload 打开选择器并显示文件名。不要只露一个无标签原生控件。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

拖入文件或点击选择

中文俗称拖放上传区标准英文Dropzone

常见别名Drag-and-drop Uploader何时使用大虚线区域拖文件。

AI PROMPT

Build a Dropzone. Structure: a large dashed area Drop files here. Interaction: click or drag-over highlight; drop accepts a file name. States: idle, dragging, has-file. Do not use a tiny file button only. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成大虚线拖放上传区。可点击或拖入，拖入时高亮。不要只有小文件按钮。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

brief.pdf

中文俗称上传列表标准英文Upload List

常见别名File Queue何时使用显示进度与完成。

AI PROMPT

Build an Upload List / queue. Structure: rows with filename, progress bar, and complete/error. Interaction: at least one row animates progress to done. Do not show only a dropzone with no list. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成上传列表。每行文件名、进度、完成或失败。至少一行能看到进度到完成。不要只有拖放区没有列表。若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。