易混淆对比
23 组长得像、容易叫错的术语，放在一起看区别。
01图鉴
布局模式
页面区块怎么排。先认出整体框架，再看每块内容适合哪种排法。
悬停缩略图，看看每个部分叫什么
整体框架
05单栏布局
Single Column Layout
页面只有一条居中的内容主列，所有区块从上往下依次排列，没有侧边栏，常用于手机端和结构简单的页面。圣杯布局
Holy Grail Layout
页头和页脚横跨全宽，中间一行分成左侧栏、主内容、右侧栏三栏，两侧栏宽度固定，主内容栏自适应伸缩。主从布局
Master-Detail Layout
左侧是一列数据记录，右侧显示当前选中那条记录的详情，点击左边任意一项右边随之切换，不跳转页面。顶栏+内容
Top Navigation Layout
页面顶部是一条横向导航栏，放 Logo、主菜单和用户入口，下方整块区域放内容，适合导航项不多的网站。侧边导航+内容
Sidebar Layout
内容展示
11仪表盘
Dashboard
在一屏内用指标卡、图表和简短列表汇总多组不同的关键数据，让人几秒内看出整体状况和异常。长文阅读
Article Layout
为连续阅读大段文字设计的页面，正文限制在较窄的一列，配合标题层级、段落间距和目录，让长内容读起来不累。卡片网格
Card Grid
把同一类条目做成大小一致的卡片，按行列整齐排成网格，每张卡片放封面图、标题和少量关键信息。瀑布流
Masonry Layout
卡片等宽但高度随内容变化，新卡片总是填进最短的一列，整体错落像一面砖墙，常见于图片社区和种草类应用。数据表
Data Table
用行和列展示大量同类记录，每行一条、每列一个字段，配合筛选、排序、分页和批量操作，方便逐行查找和比较。简单列表
List View
把同类条目从上到下排成一列，每行只有图标、标题和一两项辅助信息，适合条目简单、需要快速扫读和点选的场景。信息流
Feed
一条接一条纵向排列的完整内容，每条带作者、正文、配图和点赞评论等互动，用户在流里直接阅读并不断下滑加载。时间线
Timeline
沿一条竖线按时间先后排列事件节点，每个节点标明时间和发生了什么，用来展示过程、历史或物流进度。画廊
Gallery
以图片为绝对主角的展示布局，同比例缩略图紧密排成网格，几乎不带文字，点击后放大查看并可左右切换。描述列表
Description List
把一条记录的多个属性按「字段名：值」成对排列，常用两到三列网格展示，适合只读查看详情。分屏对比
Side-by-Side Comparison
把两份结构相同的内容左右并排放在同一屏，对应部分逐行对齐，差异处高亮，方便逐项找出不同。
操作流程
03特定页面
05设置页
Settings Page
把大量互相独立的选项按类别分组，左侧或顶部切换分类，每项配说明文字，用户随时回来修改其中某一项。落地页
Landing Page
为推广某个产品或活动设计的长页面，从首屏大标题开始依次讲卖点、证明和价格，引导访客点击同一个行动按钮。登录注册页
Login / Sign-up Page
用户登录或注册账号的页面，中间一张窄小的表单卡片，只保留账号、密码和提交按钮等必要元素，常配品牌插图。空状态
Empty State
列表、表格或页面没有内容时显示的占位区块，用插图和一句话说明为什么是空的，并给出下一步操作按钮。搜索结果页
Search Results Page
用户输入关键词后看到的页面，顶部保留搜索框，侧边或上方是筛选条件，主区域按相关度列出结果并高亮关键词。
02图鉴
UI 组件
页面上的具体控件，从按钮、输入框到对话框和筛选栏。
基础
06表单输入
23输入框
Input
让用户输入一行简短文字的框，比如姓名、手机号、邮箱、标题，是表单里最常见的控件。多行文本框
Textarea
可以输入多行文字的输入框，按回车会换行，适合备注、评论、问题描述这类较长的内容。数字输入框
Input Number
只能输入数字的输入框，带加减按钮，可以限制最小值、最大值和每次加减的步长。下拉选择
Select
点击后展开选项列表，从中选一项或多项，收起时只占一个输入框的位置，适合选项较多的情况。复选框
Checkbox
可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。单选框
Radio
一组圆形的选项，只能选中其中一个，选了新的会自动取消原来的，适合 2~5 个互斥选项。开关
Switch
像电灯开关一样的滑动小控件，表示某个功能开启或关闭，拨动后通常立即生效。滑块
Slider
在一条横轨上拖动圆形滑块来选择数值或范围，适合音量、亮度、价格区间这类不要求精确的调节。日期选择器
Date Picker
点击输入框后弹出一个小日历，让用户点选日期或日期范围，避免手动输入格式不统一。上传
Upload
让用户从电脑或手机里选择文件、图片并传到服务器的控件，可以点按钮选择，也可以把文件拖进来。表单
Form
把多个输入控件、字段名、校验提示和提交按钮组织在一起，用来收集并提交用户填写的信息。搜索框
Search Box
带放大镜图标的输入框，输入关键词后按回车或点搜索按钮，在页面、列表或全站中查找内容。穿梭框
Transfer
左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。级联选择
Cascader
一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。评分
Rate
一排五颗星（或其他图标），点亮几颗表示几分，既能让用户打分，也能只读展示平均分。分段控制器
Segmented Control
几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。筛选栏
Filter Bar
放在列表或表格上方的一排查询条件，如关键字、状态、日期范围，用来缩小要看的数据范围。时间选择器
Time Picker
选一个具体时刻（几点几分）的输入控件，点开后在「时 / 分」几列里滚动选择，或者从一列按固定间隔排好的时刻里挑。颜色选择器
Color Picker
用来挑颜色的控件：平时是一个显示当前颜色的小色块，点开后在色盘和色相条上取色，也能直接输入色值或点预设颜色。验证码输入框
OTP Input
填短信或邮件验证码的一排小格子，每格一位数字，输完一格自动跳到下一格，常见于登录、注册和敏感操作前的二次验证。富文本编辑器
Rich Text Editor
像一个简易版 Word 的编辑区：上方一排工具按钮，能给文字加粗、设标题、插列表、链接和图片，所见即所得，保存的是带格式的内容。标签输入框
Tag Input
能输入多个短词的输入框：敲一个词按回车，它就变成框里的一个小标签，接着输入下一个，点标签上的 ✕ 就删掉。对话输入框
Chat Input
聊天和 AI 对话界面底部的输入区：一个随内容长高的文本框，加上附件、发送（生成时变成停止）等按钮，回车发送、Shift+回车换行。
导航
12顶部导航栏
Navbar
侧边菜单
Sidebar Menu
面包屑
Breadcrumb
标签页
Tabs
一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。分页
Pagination
把大量数据分成多页显示，用页码和上一页、下一页按钮在各页之间跳转。步骤条
Steps
用一排带编号的节点和连线，显示一个多步骤流程的全部步骤，以及用户当前做到了第几步。下拉菜单
Dropdown Menu
页脚
Footer
锚点导航
Anchor
列出当前页面各章节标题的小目录，点击跳到对应位置，滚动时自动高亮当前所在章节。命令面板
Command Palette
按快捷键（常见是 Ctrl+K 或 ⌘K）弹出的搜索框，输入关键字就能快速跳转页面或执行操作。底部标签栏
Bottom Tab Bar
手机应用和移动网页底部固定的一排 3~5 个图标加文字，用来在几个最主要的页面之间切换。菜单栏
Menubar
数据展示
13表格
Table
用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。列表
List
把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。卡片
Card
一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。头像
Avatar
用圆形或圆角方形的小图片代表一个人或一个账号，没有图片时显示姓名首字或默认图标。徽标
Badge
叠在图标、头像或按钮右上角的小红点或小数字，提醒用户这里有未读消息或新内容。标签
Tag
放在文字旁边的小块圆角标记，用几个字表示分类、状态或属性，例如「已发货」「前端」。轮播图
Carousel
在同一块区域里轮流展示多张图片或卡片，可以自动切换，也可以左右滑动或点圆点切换。树形控件
Tree
用可以逐级展开的缩进列表展示有上下级关系的数据，比如组织架构、文件夹目录、分类。统计数值
Statistic
用大号数字突出显示一个关键指标，上面是指标名称，常带单位、涨跌箭头和对比说明。图表
Chart
把数字画成折线、柱子、扇形等图形，用来展示趋势、对比和占比，让数据一眼就能看懂。代码块
Code Block
用等宽字体和语法高亮展示一段代码的区域，通常带语言标签、行号和一键复制按钮。日历
Calendar
按月或按周排成网格的日期视图，直接在格子里显示每天的日程、事件或数据。地图
Map
在页面里嵌入一块可以拖动、缩放的地图，用标记点显示门店、地址或配送位置，点击标记弹出详情。
反馈
11文字提示
Tooltip
鼠标悬停或键盘聚焦在某个元素上时，在旁边弹出的一小段深色说明文字，移开即消失。气泡卡片
Popover
点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。对话框
Modal
在页面正中弹出的窗口，背后加遮罩，用户必须处理完或关闭它才能继续操作页面。抽屉
Drawer
从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。轻提示
Toast
操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。警告提示
Alert
固定显示在页面或区块内的带色提示横条，用来说明当前状态、风险或需要注意的事项。通知提醒框
Notification
从屏幕角落（通常是右上角）弹出的消息卡片，带标题和正文，用来提醒新消息或后台任务结果。进度条
Progress
用一条逐渐填满的横条或圆环，显示任务完成了多少，让用户知道还要等多久。加载中
Spinner
一个不停旋转的小图标，表示正在处理或等待数据，但不知道具体还要多久。骨架屏
Skeleton
数据加载完成前，先用灰色块画出页面内容的大致轮廓，加载完再替换成真实内容。结果页
Result Page
付款、提交、注册这类操作完成后显示的整页反馈：一个大图标、一句结果标题、一行说明和「下一步」按钮，告诉用户成了没有、接下来做什么。
布局容器
03营销
09首屏横幅
Hero Section
落地页或官网最上面的一大块区域，用大标题、一句说明和主按钮，第一眼讲清产品是什么。特性网格
Feature Grid
官网上介绍产品功能的一块区域：一组图标、小标题和一两行说明，按两列或三列整齐排开，让访客快速扫完主要卖点。行动号召区
CTA Section
官网页面结尾（或中间）一块醒目的区域，一句标题加一个主按钮，在访客看完介绍后再推一把，让他注册、试用或联系销售。价格表
Pricing Table
官网上并排列出几档套餐的区域，每档写清价格、适合谁、包含哪些功能和一个购买按钮，常把推荐的一档突出显示。常见问题
FAQ Section
把访客最常问的问题和答案集中列出来的区域，官网上通常是一组可以点开的问题，放在价格表后面、页脚前面。客户评价
Testimonial
官网上展示真实客户原话的区域，每条是一段引用加上说话人的头像、姓名、职位和公司，用别人的口碑让新访客相信产品。Logo 墙
Logo Wall
官网上一排或几排客户、合作伙伴的公司标志，通常做成灰色，配一句「这些团队在用」，快速说明谁在用这个产品。数据亮点
Stats Band
官网上一整条横向区域，并排放三四个大号数字和一行说明（例如「正在营业的店铺」），用有来源的具体数字说明产品的规模或效果。步骤说明区
How It Works
官网上用 3~4 个编号步骤说明「怎么开始用」的区域，每步一个序号、小标题和一句说明，让访客知道上手要做哪几件事。
页头
01文字
04表单
01操作
02布局
01浮层
02账号
01消息
02体验优化
01图片
02社交
01键盘交互
01提醒
01内容展示
0103词典
概念词典
交互、样式、前端工程和 AI 编程里的常见说法，按拼音排序。
136 条
A 开头的术语
- Agent 智能体AI AgentAI 编程能自己拆解任务、调用工具、查看结果并决定下一步的 AI，而不只是一问一答地回复文字。
- AI 记忆AI MemoryAI 编程把跨多次对话仍要记住的偏好与事实存下来，下次对话自动带上，而不依赖你每次重新说明。
- AI 结对编程AI Pair ProgrammingAI 编程把 AI 当作结对同伴：一人专注写与试，一人（或 AI）负责提问、补测、盯风险，而不是把整件事全扔给模型。
- AI 评测AI EvaluationAI 编程用一组固定题目和评分标准，衡量模型或提示词改动后效果变好还是变差，而不是只凭感觉试两次。
- AI 自动补全AI AutocompleteAI 编程编辑器根据当前代码上下文，一边输入一边用灰色预览给出后续代码建议，按 Tab 即可接受。
- API KeyAI 编程调用大模型或第三方服务时用来识别身份和计费的一串密钥，相当于账户密码，泄露后别人就能花你的钱。
B 开头的术语
C 开头的术语
- 层级z-index样式与 CSS元素重叠时决定谁显示在上面的 CSS 属性，数值越大越靠前，常用于弹窗、下拉菜单和吸顶导航。
- 撤销Undo交互模式让用户把刚做的操作恢复回去，比如删除后在提示条里点「撤销」，或按 Ctrl+Z 回退编辑。
- 错误状态Error State交互模式请求失败、输入有误或页面出错时展示给用户的画面，要说明出了什么问题以及下一步怎么办。
- 重构RefactoringAI 编程在不改变功能和外观的前提下，调整代码的结构和写法，让它更清晰、更容易维护和继续修改。
- CDN前端工程把静态资源缓存在离用户更近的边缘节点，降低延迟、分担源站流量。
- CI/CD前端工程代码提交后自动跑检查与构建（CI），再自动或一键部署到环境（CD），减少手工发布差错。
- Claude CodeAI 编程Anthropic 推出的编程 Agent 工具，主要在终端里运行，能读懂整个项目、修改文件并执行命令。
- CSSCascading Style Sheets前端工程控制网页外观的样式语言，负责颜色、字体、间距、布局和动画，让 HTML 骨架变得好看、好用。
- CSS 变量CSS Custom Properties样式与 CSS在 CSS 里给一个值起名字、存起来反复使用，改一处就能全局生效，常用来管理颜色、间距和主题。
- CSS 单位CSS Units样式与 CSS表示长度的单位，常用的有固定像素 px、跟随字号的 rem 和 em、按窗口比例的 vw、vh，以及百分比。
- CursorAI 编程一款内置 AI 能力的代码编辑器，界面和用法接近 VS Code，可以在编辑器里和 AI 对话、让它直接修改项目代码。
D 开头的术语
- 打包产物Bundle前端工程构建工具把源码、依赖打包压缩后生成的、浏览器实际下载执行的文件集合。
- 大语言模型Large Language ModelAI 编程用海量文本训练出来、能理解和生成文字与代码的 AI 模型，是各类 AI 编程工具背后的「大脑」。
- 代码分割Code Splitting前端工程把打包结果拆成多个小文件，按路由或组件需要再加载，避免首屏下载整个应用的 JS。
- 代码检查器Linter前端工程不运行程序，仅靠静态规则扫描代码风格与常见错误，并在编辑器或 CI 里尽早提示。
- 代码库索引Codebase IndexingAI 编程AI 编辑器预先扫描并索引你的项目文件，问答和补全时能更快找到相关代码，而不必每次全盘重读。
- 单页应用Single Page Application前端工程只加载一次页面外壳，之后切换页面都由浏览器里的 JavaScript 完成、不整页刷新的网站形式。
- 单元测试Unit Test前端工程针对函数、组件或模块的小范围自动测试，运行快，用来锁定边界条件与回归。
- 迭代式提示Iterative PromptingAI 编程不指望一次说清所有要求，而是先让 AI 做出初版，再根据结果一轮轮补充和修正，逐步接近目标。
- 定位CSS Position样式与 CSS用 position 属性让元素脱离正常的排列顺序，按指定偏移量摆放，常用于角标、悬浮按钮和固定导航栏。
- 端到端测试End-to-End Test前端工程在真实或无头浏览器里模拟用户点击与跳转，验证整条链路是否通，而不只测单个函数。
- 断点Breakpoint样式与 CSS响应式布局里切换样式的屏幕宽度临界值，比如宽度小于 768px 时从两栏变成一栏。
- 对比度Color Contrast样式与 CSS文字颜色和背景颜色之间的明暗差异，差异太小会看不清，无障碍标准要求正文对比度至少 4.5:1。
- 对齐Alignment样式与 CSS让页面元素沿着同一条看不见的线排列，比如左对齐、居中、右对齐、垂直居中，让界面整齐有序。
- 多模态MultimodalAI 编程模型不只能处理文字，还能理解图片、截图、设计稿等多种类型的输入，有的还能生成图片或语音。
- 多文件编辑Multi-file EditAI 编程一次任务里让 AI 同时修改多个相关文件，并统一展示 Diff，而不是你在对话框里文件来回粘贴。
- Diff 差异DiffAI 编程两个版本代码之间的差异，通常用红色表示删除的行、绿色表示新增的行，方便快速看清改了什么。
- DOMDocument Object Model前端工程浏览器把 HTML 解析后在内存里生成的树形结构，JavaScript 通过它读取和修改页面内容。
E 开头的术语
F 开头的术语
G 开头的术语
- 工具调用Tool CallingAI 编程模型在回答过程中请求调用外部工具，如读文件、执行命令、搜索网页，再根据工具返回的结果继续工作。
- 构建Build前端工程把开发时写的源代码转换、压缩、合并成浏览器能直接运行的文件的过程，产物用于部署上线。
- 规格驱动开发Spec-Driven DevelopmentAI 编程先和 AI 一起把需求、设计和任务清单写成文档，确认之后再按清单逐项实现的开发方式。
- 规则文件Rules FileAI 编程放在项目里、每次对话都会自动提供给 AI 的长期约定，比如技术栈、代码风格和禁止事项。
- 过渡动画Transition交互模式元素状态变化时，让颜色、位置、大小等属性在一小段时间内平滑变化，而不是瞬间跳过去。
- Git前端工程记录代码每一次改动历史的版本管理工具，可以随时回到之前的版本，也方便多人协作。
- Grid 布局CSS Grid样式与 CSS把区域划分成由行和列组成的网格，再把元素放进格子里，适合行列都要对齐的二维布局。
H 开头的术语
- 盒模型Box Model样式与 CSS浏览器把每个元素都看成一个矩形盒子，由内到外依次是内容、内边距、边框和外边距四层。
- 环境变量Environment Variable前端工程放在代码之外、按运行环境区分的配置值，比如接口地址和密钥，避免把敏感信息写死在代码里。
- 缓存Cache前端工程把算过或取过的结果暂时存起来复用，包括浏览器缓存、CDN、服务端内存/Redis、应用内缓存等层级。
- 幻觉HallucinationAI 编程AI 生成看起来合理、实际上错误或不存在的内容，比如编造不存在的函数、接口字段或包名。
- 行高Line Height样式与 CSS一行文字所占的高度，决定多行文字之间的疏密，正文通常设为字号的 1.5 到 1.8 倍。
- 行内编辑Inline Edit交互模式直接在显示内容的位置点击修改，不用跳转页面或打开弹窗，改完按回车或点击外面即可保存。
- Hooks前端工程React 中以 use 开头的一类函数，让函数组件拥有状态、副作用等能力，也能用来封装可复用的逻辑。
- HTMLHyperText Markup Language前端工程描述网页结构和内容的标记语言，用标签告诉浏览器哪里是标题、段落、按钮、图片。
J 开头的术语
- 计划模式Plan ModeAI 编程让 AI 先输出改动计划、文件清单和风险，确认后再动手改代码，而不是一上来就改文件。
- 计算机使用Computer UseAI 编程让 AI 像人一样查看屏幕、移动指针、点击和输入，从而操作浏览器或桌面应用完成任务。
- 加载状态Loading State交互模式数据或操作还没完成时给用户的反馈，常见形式有转圈图标、骨架屏、进度条和按钮加载态。
- 检查点回滚CheckpointAI 编程AI 编程工具在每轮修改前自动保存的代码快照，改坏时可以一键回到这一轮之前的状态。
- 渐进式披露Progressive Disclosure交互模式先只展示最常用的内容和选项，更多细节或高级功能等用户需要时再展开，避免一次塞太多。
- 焦点状态Focus State交互模式元素被选中、准备接收输入时的样式，比如点击输入框后边框变深，按 Tab 键时按钮外出现描边。
- 接口Application Programming Interface前端工程前端向后端要数据、提交数据的约定入口，规定了访问哪个地址、传什么参数、返回什么格式。
- 节流Throttle交互模式事件连续触发时按固定时间间隔执行，比如每 200ms 最多执行一次，用于滚动、拖动等高频事件。
- 结构化输出Structured OutputAI 编程要求模型按约定的 JSON / Schema 返回结果，方便程序直接解析，而不是从自由文本里再抠字段。
- 截图生成代码Screenshot to CodeAI 编程把设计稿或网页截图发给 AI，让它识别其中的布局和组件，生成外观相近的前端代码。
- 禁用状态Disabled State交互模式元素暂时不能操作时的样式，通常颜色变浅、鼠标显示禁止符号，点击后没有任何反应。
- 静态站点生成Static Site Generation前端工程在构建时就把每个页面提前生成为 HTML 文件，访问时直接返回现成文件，速度快、部署简单。
- JavaScript前端工程让网页「动起来」的编程语言，负责点击响应、数据请求、页面更新等交互逻辑。
- JSONJavaScript Object Notation前端工程一种用花括号和键值对表示数据的文本格式，前后端传数据、项目配置文件大多使用它。
K 开头的术语
- 开发服务器Dev Server前端工程在自己电脑上临时运行项目的服务，用来边写边预览，通常在浏览器里通过 localhost 加端口号访问。
- 开发者工具Developer Tools前端工程浏览器内置的调试面板，按 F12 打开，可以查看页面结构、样式、报错信息和网络请求。
- 客户端渲染Client-Side Rendering前端工程浏览器先下载几乎空白的 HTML 和 JS，再在客户端请求数据并生成界面；首屏依赖 JS 执行完成。
- 跨域Cross-Origin Resource Sharing前端工程浏览器出于安全只默认允许请求同源地址，请求其他域名或端口的接口需要对方服务器明确允许，否则报跨域错误。
- 快捷键Keyboard Shortcut交互模式用键盘组合键直接触发操作，比如 Ctrl+S 保存、Ctrl+K 打开搜索，让熟练用户操作更快。
L 开头的术语
- 懒加载Lazy Loading交互模式图片、组件等资源先不加载，等用户快滚动到它或真正需要时才加载，用来加快首屏速度。
- 懒加载Lazy Loading前端工程资源或组件等到真正需要时（进入视口、打开路由、点开面板）再加载，减轻首屏负担。
- 乐观更新Optimistic Update交互模式用户操作后界面立即显示成功的结果，同时在后台发请求，如果请求失败再把界面改回来。
- 流式输出StreamingAI 编程模型一边生成一边把已有内容推送到界面，用户不用等整段完成才能开始阅读。
- 留白Whitespace样式与 CSS页面上刻意留出的空白区域，用来分隔内容、突出重点，让界面看起来不拥挤、更容易阅读。
- 路由Router前端工程决定「哪个网址显示哪个页面」的规则，负责在不同页面之间切换，并同步浏览器地址栏。
M 开头的术语
P 开头的术语
Q 开头的术语
R 开头的术语
S 开头的术语
- 沙箱执行Sandboxed ExecutionAI 编程在隔离环境里运行 AI 生成的代码或命令，限制网络、文件系统和密钥访问，降低误操作与供应链风险。
- 筛选与排序Filter & Sort交互模式筛选是按条件缩小数据范围，排序是调整数据的先后顺序，两者常一起出现在列表和表格上方。
- 上下文窗口Context WindowAI 编程模型在一次对话中能「看到」的全部内容的上限，按 Token 计算，超出的部分会被截断或压缩。
- 上下文工程Context EngineeringAI 编程有意识地选择、组织放进模型上下文的信息（代码、规则、检索结果、对话历史），让 AI 在有限窗口里做对事。
- 少样本示例Few-shot PromptingAI 编程在提示词里给 AI 一两个示例，让它照着示例的格式、风格或写法完成任务，比纯文字描述更准确。
- 设计令牌Design Token样式与 CSS把颜色、字号、间距、圆角、阴影等设计决定抽成有名字的变量，让设计稿和各端代码共用同一套规范。
- 深色模式Dark Mode样式与 CSS用深色背景搭配浅色文字的界面配色方案，可以跟随系统设置自动切换，也可以让用户手动选择。
- 视觉层级Visual Hierarchy样式与 CSS用大小、粗细、颜色、位置和留白区分信息的主次，让用户一眼看出先看什么、再看什么、该点哪里。
- 水合Hydration前端工程服务端先输出 HTML，浏览器再把 React 等框架的事件与状态接到这些 DOM 上，让页面从「能看」变成「能点」。
- Source Map前端工程把压缩、打包后的代码映射回原始源码行列，便于线上排错与本地调试。
T 开头的术语
- 提示词PromptAI 编程你发给 AI 的输入内容，包括需求、背景信息和要求，写得越清楚具体，AI 的输出越接近预期。
- 提示词注入Prompt InjectionAI 编程攻击者在用户输入或网页内容里夹带指令，试图让模型忽略原有规则、泄露系统提示或执行危险操作。
- 图标Icon样式与 CSS用简洁的小图形表示操作或含义，比如放大镜表示搜索、垃圾桶表示删除，通常来自统一风格的图标库。
- 拖放Drag and Drop交互模式把一个东西拖起来放到另一个区域，比如把文件拖进上传框、把卡片拖到看板的另一列。
- 拖拽排序Drag to Reorder交互模式按住列表项拖到新位置再松开就能调整顺序，常用于待办事项、菜单配置、图片顺序的调整。
- Tailwind CSS样式与 CSS工具类优先的 CSS 框架，直接在 class 里写 flex、p-4、text-lg 这样的短类名来完成样式。
- TokenAI 编程大模型读写文字的最小单位，模型能读多少内容、调用花多少钱，都按 Token 计算。
- Tree Shaking前端工程打包时去掉没有被引用到的导出代码，让最终产物更小；依赖 ES Module 的静态结构。
- TypeScript前端工程在 JavaScript 基础上加入类型标注的语言，能在代码运行前发现很多拼写和数据格式错误。
V 开头的术语
W 开头的术语
- 外边距与内边距Margin & Padding样式与 CSS内边距是边框以内、内容周围的空间，外边距是边框以外、这个元素和其他元素之间的距离。
- 微交互Micro-interaction交互模式围绕一个小操作的简短反馈动画，比如点赞时红心弹一下、开关圆点滑动、复制后图标变成对勾。
- 温度参数TemperatureAI 编程控制模型输出随机程度的参数，数值低时回答更稳定保守，数值高时更多样有创意，但也更容易跑偏。
- 无限滚动Infinite Scroll交互模式用户滚动到列表底部时自动加载下一批内容，不用手动翻页，列表看起来像没有尽头。
- WebSocket前端工程浏览器与服务器之间的长连接，双方都能主动推消息，适合协作光标、实时通知、对战类场景。
X 开头的术语
- 吸顶Sticky交互模式元素随页面滚动到顶部边缘时固定不动，比如导航栏、表格表头、分组标题滚动时停在顶部。
- 系统提示词System PromptAI 编程在对话开始前预先给模型设定的底层指令，规定它的角色、行为方式和规则，优先级通常高于普通消息。
- 限流Rate LimitAI 编程服务方限制你在一段时间内能发多少请求或用多少 Token，超出后会暂时拒绝，常见报错码是 429。
- 响应式Responsive Design样式与 CSS同一套页面根据屏幕宽度自动调整布局，在手机、平板和电脑上都能正常浏览和操作。
- 向量嵌入EmbeddingAI 编程把文本或代码变成一组数字向量，让语义相近的内容在空间里距离更近，便于检索和去重。
- 悬停状态Hover State交互模式鼠标移到元素上方时的样式变化，比如按钮变深、卡片浮起，用来提示用户这里可以点击。
Y 开头的术语
Z 开头的术语
- 增量静态再生成Incremental Static Regeneration前端工程页面仍以静态方式生成并缓存，但可在过期后在后台重新生成，兼顾静态速度与内容更新。
- 中间件Middleware前端工程夹在请求到达页面/接口之前的一层逻辑，常用于鉴权、重定向、改写 URL、注入头信息。
- 状态State前端工程组件自己记住、会随用户操作变化的数据，状态一变，页面对应的部分就会自动重新渲染。
- 字体排版Typography样式与 CSS对文字的字体、字号、字重、行高、间距和颜色做整体规划，让内容清晰易读、主次分明。
- 字重Font Weight样式与 CSS文字笔画的粗细程度，用 100 到 900 的数值表示，400 是常规，700 是粗体，用来区分信息主次。
- 自动补全Autocomplete交互模式用户输入时在输入框下方实时列出匹配的候选项，可以用鼠标或方向键选中，减少打字和输错。
- 组件Component前端工程把页面拆成可独立编写、可重复使用的小块，每块自带结构、样式和逻辑，像搭积木一样拼成页面。
- 组件库Component Library前端工程别人做好、可以直接安装使用的一整套界面组件，如按钮、表单、弹窗，风格统一，省去从零编写。