# 氛围编程 / Vibe Coders — full glossary

Source: https://vibe-coders.pages.dev
Terms: 27
License signal: public pages; search=yes, ai-train=yes, ai-input=yes

先会叫名字. 跟模型写代码，练的不是手速。练的是：把模糊愿望收成一个专有名词，再交给它。

Name the thing. Coding with a model does not train your hands. It trains this: fold a vague wish into a proper noun, then hand it over.

跟模型写代码，真正练的是提示词里的专有名词。本页回答：外行是怎么顺利 vibe coding 的。

## 界面怎么动 / How the interface moves
用户看得见的节奏。叫得出名字，模型就不会给你做一套「感觉不对」的交互。
The rhythm the user can see. Name it, and the model stops inventing a slightly wrong interaction.

### 防抖 Debounce / Debounce
id: debounce
definition_zh: 等动作停下来再执行。搜索框停键 300 毫秒后再请求，而不是每个字母打一次接口。
definition_en: Wait until the action pauses, then run it. A search box fetches 300ms after the last keystroke, not on every letter.
tell_the_model_zh: 搜索输入防抖 300ms，停键后再请求；加载中取消上一次未完成的请求。
tell_the_model_en: Debounce the search input by 300ms. Cancel the in-flight request when a new one starts.
if_unnamed_zh: 你会写成「打字的时候别一直转圈」，然后改五轮，模型仍可能每个按键都打接口。
if_unnamed_en: You write “don’t spin while I type,” spend five rounds, and still get a request per keystroke.

### 乐观更新 Optimistic update / Optimistic update
id: optimistic-update
definition_zh: 先改界面，再等服务器。点赞立刻变红；失败再弹回去。
definition_en: Change the UI first, wait for the server later. The like turns red immediately; it snaps back if the request fails.
tell_the_model_zh: 收藏用乐观更新：点了立刻变状态，失败则回滚并提示重试，不要等接口回来才变。
tell_the_model_en: Make favorites optimistic: flip the state on click, roll back and offer retry on failure. Don’t wait for the response to paint.
if_unnamed_zh: 每个按钮都转圈半秒。页面像在道歉。
if_unnamed_en: Every button spins for half a second. The page feels like it is apologising.

### 骨架屏 Skeleton / Skeleton screen
id: skeleton
definition_zh: 内容还没到，先用灰块占住版面，避免布局跳动。
definition_en: Grey blocks hold the layout while data loads, so the page does not jump.
tell_the_model_zh: 列表首屏用骨架屏，形状跟真实卡片一致；不要用居中大转圈。
tell_the_model_en: Use a skeleton that matches the card layout on first load. No centred spinner.
if_unnamed_zh: 模型给你一个会转的菊花，整页空白，加载完再「啪」一下出现。
if_unnamed_en: You get a spinner on a blank page, then the layout pops in.

### 模态框与抽屉 Modal / Drawer / Modal and drawer
id: modal-drawer
definition_zh: 模态框挡住整页，必须先处理；抽屉从边上滑出，背后的页面还在。
definition_en: A modal blocks the page until you deal with it. A drawer slides in from the edge and leaves the page behind it.
tell_the_model_zh: 编辑用右侧抽屉，不要全屏模态；Esc 和点遮罩可关，焦点锁在抽屉里。
tell_the_model_en: Edit in a right-hand drawer, not a full-screen modal. Escape and the overlay close it. Trap focus inside.
if_unnamed_zh: 所有确认、编辑、筛选都弹正中大窗，手机上关不掉。
if_unnamed_en: Every confirm, edit, and filter becomes a centred popup that is hard to dismiss on a phone.

### 空状态 Empty state / Empty state
id: empty-state
definition_zh: 还没有内容时的那一屏：说明为什么空，下一步按什么。
definition_en: The screen when there is nothing yet: why it is empty, and what to press next.
tell_the_model_zh: 项目列表空状态写「还没有项目」，下面一颗按钮「新建项目」，不要只显示空白表。
tell_the_model_en: Empty projects: the line “No projects yet,” one button “New project.” Do not render an empty table.
if_unnamed_zh: 用户打开应用，看见一张没字的白纸，以为坏了。
if_unnamed_en: The user opens the app, sees a blank sheet, and thinks it is broken.

### 分页与无限滚动 / Pagination vs infinite scroll
id: pagination
definition_zh: 分页有页码，能跳、能分享第 3 页；无限滚动一直往下，适合刷，不适合找回刚才那条。
definition_en: Pagination has pages you can jump to and share. Infinite scroll is for browsing, not for finding the thing you just saw.
tell_the_model_zh: 管理后台用分页，每页 20 条；信息流用无限滚动，保留回到顶部。
tell_the_model_en: Use pagination, 20 rows per page, in the admin table. Use infinite scroll on the feed, with a back-to-top control.
if_unnamed_zh: 后台表格被做成抖音式下拉，想改第 87 条时已经找不到了。
if_unnamed_en: The admin table becomes a TikTok-style feed, and row 87 is gone.

## 状态怎么写 / How to write a state
同一块界面在等、在错、在成的时候，长得不应该一样。
The same surface should not look identical while it waits, fails, or succeeds.

### 八态 Default to success / The eight UI states
id: ui-states
definition_zh: 默认、悬停、焦点、按下、禁用、加载、错误、成功。少画一态，线上就缺一块。
definition_en: Default, hover, focus, pressed, disabled, loading, error, success. Skip one, and production is missing a piece.
tell_the_model_zh: 每个按钮补齐默认、hover、focus-visible、active、disabled、loading、error、success，焦点环不要动画。
tell_the_model_en: Every button needs default, hover, focus-visible, active, disabled, loading, error, and success. Do not animate the focus ring.
if_unnamed_zh: 只有默认和悬停。键盘用户看不见焦点，提交中还能连点三次。
if_unnamed_en: You get default and hover. Keyboard users see no focus, and submit can be clicked three times.

### 校验 Validation / Validation
id: validation
definition_zh: 失焦后再检查，不要每个字母都骂人；错误要说清错了什么、怎么改。
definition_en: Check after blur, not on every letter. An error names what broke and how to fix it.
tell_the_model_zh: 邮箱失焦后再校验；错误文案：「这不是邮箱格式，需要带 @。」不要只把框变红。
tell_the_model_en: Validate the email on blur. Error copy: “This is not an email; it needs an @.” Do not turn the box red and stop there.
if_unnamed_zh: 一打字就全红，用户还没写完就被打断。
if_unnamed_en: The field goes red mid-word and interrupts the person still typing.

### 幂等 Idempotent / Idempotent
id: idempotent
definition_zh: 同一请求做两次，结果跟做一次一样。支付、创建订单尤其要。
definition_en: Doing the request twice has the same result as doing it once. Payments and order creation need this.
tell_the_model_zh: 创建订单带幂等键，连点提交只生成一单；按钮提交中禁用。
tell_the_model_en: Create-order carries an idempotency key. Double-submit makes one order. Disable the button while in flight.
if_unnamed_zh: 网一卡，用户连点，库里两笔相同的单。
if_unnamed_en: The network hiccups, the user clicks twice, and the database holds two identical orders.

### 竞态 Race / Race condition
id: race
definition_zh: 后发的请求先回来，屏幕显示成旧结果。搜索尤其常见。
definition_en: A later request returns first, and the screen shows a stale result. Search hits this constantly.
tell_the_model_zh: 搜索请求要可取消；只采用最后一次输入对应的结果。
tell_the_model_en: Search requests must be cancellable. Only the response for the latest query may render.
if_unnamed_zh: 你搜「猫」再搜「猫粮」，页面先出猫粮再跳回猫。
if_unnamed_en: You search “cat”, then “cat food”, and the page flashes food then jumps back to cat.

## 数据放哪、谁能看 / Where data lives, who may see it
外行最容易漏的一层：不是界面，是记录和权限。
The layer outsiders skip: not the interface, the records and who is allowed to touch them.

### 增删改查 CRUD / CRUD
id: crud
definition_zh: 创建、读取、更新、删除。大多数「小工具」其实就是一张表的这四件事。
definition_en: Create, read, update, delete. Most “little tools” are these four verbs on one table.
tell_the_model_zh: 这是一个任务的 CRUD：列表、详情、新建、编辑、删除；删除要可撤销。
tell_the_model_en: This is CRUD for tasks: list, detail, create, edit, delete. Delete must be undoable.
if_unnamed_zh: 你会描述「能加点东西，还能改，不要了就去掉」，模型猜五张互不相干的表。
if_unnamed_en: You say “add stuff, change it, take it away,” and the model invents five unrelated tables.

### 数据模型 Schema / Schema
id: schema
definition_zh: 有哪些对象、字段叫什么、彼此怎么连。先画这个，再画页面。
definition_en: Which objects exist, what the fields are called, how they join. Draw this before the screens.
tell_the_model_zh: 对象：用户、工作区、项目、任务。任务属于项目，项目属于工作区。任务有标题、状态、负责人、截止日期。
tell_the_model_en: Objects: user, workspace, project, task. Tasks belong to projects, projects to workspaces. A task has title, status, owner, due date.
if_unnamed_zh: 每加一个功能就多一张表，同名字段三种拼写。
if_unnamed_en: Each feature adds a table, and the same field is spelled three ways.

### 登录态 Session / Auth / Auth and session
id: auth-session
definition_zh: 系统怎么认出你，认出之后记住多久。注册、登录、退出、忘记密码是一套，不是四个彩蛋。
definition_en: How the system recognises you, and for how long. Sign-up, sign-in, sign-out, and reset are one set, not four extras.
tell_the_model_zh: 邮箱密码登录，会话 30 天，退出清 cookie；未登录访问 /app 跳到 /login，回来时回到原地址。
tell_the_model_en: Email-and-password auth, 30-day session, sign-out clears the cookie. Unauthenticated /app redirects to /login and returns to the original URL.
if_unnamed_zh: 模型做了注册页，忘记登录；或者登录了，刷新就丢。
if_unnamed_en: You get a sign-up page and no sign-in, or a session that dies on refresh.

### 权限与行级安全 / Permissions and row-level security
id: permissions
definition_zh: 不是「有没有登录」，是「这条记录是不是你的」。只藏按钮不够，接口也得拒。
definition_en: Not “are you signed in,” but “is this row yours.” Hiding a button is not enough; the API must refuse.
tell_the_model_zh: 用户只能读写自己工作区的项目。直接改 URL 里的 id 也不能读别人的。数据库加行级权限。
tell_the_model_en: A user may only read and write projects in their workspace. Changing the id in the URL must not leak another row. Enforce it in the database.
if_unnamed_zh: 列表里看不到别人的，把地址栏数字改一下就能看见。这是真事故。
if_unnamed_en: The list hides other people’s rows; editing the number in the URL shows them. That is a real incident.

### Webhook / Webhook
id: webhook
definition_zh: 别人的系统在事件发生时来敲你的门：支付成功、邮件点开、仓库推送。
definition_en: Another system knocks when something happens: payment succeeded, email opened, repository pushed.
tell_the_model_zh: Stripe 支付成功用 webhook 写订单已付，不要只信浏览器跳回；校验签名。
tell_the_model_en: Mark the order paid from the Stripe webhook, not from the browser return. Verify the signature.
if_unnamed_zh: 用户付完钱关了页面，订单一直待支付。
if_unnamed_en: The user pays, closes the tab, and the order stays unpaid.

### 缓存 Cache / Cache
id: cache
definition_zh: 把算过的结果先放着。快，但会脏。要说清谁失效、何时失效。
definition_en: Keep a computed result nearby. Fast, and stale. Say who invalidates it, and when.
tell_the_model_zh: 公开文章页缓存 60 秒；后台一点「发布」，立刻清这一页的缓存。
tell_the_model_en: Cache the public article for 60 seconds. Publishing must purge that page immediately.
if_unnamed_zh: 改了标题，网上还是旧的，你以为没保存。
if_unnamed_en: You change the title, the public page stays old, and you think save failed.

## 产品常见块 / Common product pieces
这些不是技术黑话，是产品经理每天在用的名词。外行最常「感觉到了，叫不出」。
Not deep engineering — the nouns product people use daily. Outsiders feel them and cannot name them.

### 新手引导 Onboarding / Onboarding
id: onboarding
definition_zh: 第一次进来之后，怎么让人做出第一个有效动作，而不是逛一圈就走。
definition_en: After the first visit, how you get someone to take one useful action instead of wandering off.
tell_the_model_zh: 注册后三步：建工作区、邀请一位成员、创建第一条任务。可跳过，进度条可回退。
tell_the_model_en: After sign-up, three steps: create a workspace, invite one person, create one task. Skippable, with a back control.
if_unnamed_zh: 模型做五屏轮播「欢迎来到我们的宇宙」，没有一个按钮能干活。
if_unnamed_en: You get five slides titled “welcome to our universe,” and no button that does work.

### 付费墙 Paywall / Paywall
id: paywall
definition_zh: 免费能走多远，哪一步必须付钱。要写清，不要做到一半才拦。
definition_en: How far free goes, and which step requires money. Write it down; do not intercept halfway by accident.
tell_the_model_zh: 免费可建 3 个项目；第 4 个弹出付费墙，文案写清升级后能做什么，关闭后留在原页。
tell_the_model_en: Free accounts get three projects. The fourth opens a paywall that names what paid unlocks. Closing it leaves you on the same page.
if_unnamed_zh: 要么永远免费，要么一进门就要信用卡，没有中间态。
if_unnamed_en: It is either forever free or a credit card on the doorstep. No middle.

### 功能开关 Feature flag / Feature flag
id: feature-flag
definition_zh: 代码已经在，只对一部分人打开。出问题能立刻关上，不必回滚整站。
definition_en: The code is shipped, but only some people see it. If it breaks, you can shut the door without rolling back the site.
tell_the_model_zh: 新编辑器用功能开关，默认关，内部账号打开；出 bug 只关开关，不回滚。
tell_the_model_en: The new editor sits behind a flag, off by default, on for internal accounts. A bug turns the flag off; it does not roll back the site.
if_unnamed_zh: 新功能一上全员倒霉，修要重新部署二十分钟。
if_unnamed_en: The new feature hits everyone at once, and a fix is a twenty-minute redeploy.

### SSR / SSG / SPA / SSR, SSG, and SPA
id: ssr-ssg
definition_zh: 页面是服务器现拼、构建时拼好，还是到浏览器再拼。影响首屏、SEO、登录后的数据。
definition_en: Is the page assembled on the server, at build time, or in the browser? This changes first paint, search, and logged-in data.
tell_the_model_zh: 营销页 SSG；文章页 SSR 以便 SEO；登录后的 /app 用客户端渲染。
tell_the_model_en: Marketing pages are SSG. Articles are SSR for search. The signed-in /app is client-rendered.
if_unnamed_zh: 整站做成单页应用，搜索引擎只能看见「请开启 JavaScript」。
if_unnamed_en: The whole site becomes a single-page app, and search engines see “please enable JavaScript.”

### 最小可用 MVP / MVP
id: mvp
definition_zh: 能验证那一个假设的最小版本，不是「功能少一点的完整产品」。
definition_en: The smallest version that tests one hypothesis — not a complete product with fewer buttons.
tell_the_model_zh: 第一版只做：注册、建一个项目、加任务、勾完成。不要通知、不要看板、不要积分。
tell_the_model_en: Version one: sign up, one project, add tasks, mark done. No notifications, no board, no points.
if_unnamed_zh: 你说「先简单点」，模型仍然做了设置中心、团队权限和暗色模式。
if_unnamed_en: You say “keep it simple,” and the model still builds settings, team roles, and dark mode.

## 跟模型怎么说 / How to talk to the model
氛围编程本身的名词。把这一层说清楚，循环会短一截。
The nouns of vibe coding itself. Name this layer, and the loop gets shorter.

### 提示词 Prompt / Prompt
id: prompt
definition_zh: 你写给模型的说明书。好的提示词像工单：对象、约束、验收，而不是心情。
definition_en: The brief you give the model. A good prompt is a ticket: object, constraints, acceptance — not a mood.
tell_the_model_zh: 不要写「做漂亮一点」。写「主按钮对比度 ≥ 4.5:1，不要紫色渐变，移动端 320 不横滚」。
tell_the_model_en: Do not write “make it nicer.” Write “primary button contrast ≥ 4.5:1, no purple gradient, no horizontal scroll at 320.”
if_unnamed_zh: 模型只能猜你的审美，猜错了你还说不清错在哪。
if_unnamed_en: The model guesses your taste, guesses wrong, and you still cannot say what failed.

### 上下文 Context / Context
id: context
definition_zh: 模型此刻能看见的材料：文件、报错、对话。不是「记忆」，是桌上摊开的纸。
definition_en: What the model can see right now: files, errors, the thread. Not memory — papers on the table.
tell_the_model_zh: 只打开相关的三个文件，把报错全文贴上；不要把整个仓库塞进对话。
tell_the_model_en: Open the three relevant files and paste the full error. Do not pour the whole repository into the thread.
if_unnamed_zh: 上下文被无关文件挤满，模型改错文件，还很有自信。
if_unnamed_en: Irrelevant files crowd the window. The model edits the wrong one, confidently.

### 幻觉 Hallucination / Hallucination
id: hallucination
definition_zh: 模型把不存在的函数、库、配置说得像真的。语气越稳，越要去跑。
definition_en: The model speaks a missing function, library, or config as if it were real. The calmer the tone, the more you should run it.
tell_the_model_zh: 不要发明不存在的 API。先读本仓库已有的函数再调用；不确定就说不确定。
tell_the_model_en: Do not invent APIs. Read the functions already in this repo before calling them. If unsure, say so.
if_unnamed_zh: 你安装了一个 npm 上根本没有的包，还怪自己网不行。
if_unnamed_en: You install a package that is not on npm, then blame the network.

### 代理与工具调用 Agent / Tool call / Agent and tool call
id: agent
definition_zh: 模型不但说话，还会去跑命令、改文件、点浏览器。每一步都可能走偏。
definition_en: The model does not only talk — it runs commands, edits files, clicks a browser. Each step can drift.
tell_the_model_zh: 先给计划再改文件；改完跑类型检查。不要一次改十二个文件。
tell_the_model_en: Plan first, then edit. After edits, run the type checker. Do not touch twelve files in one pass.
if_unnamed_zh: 代理「好心」重构了半个项目，你回不到刚才能跑的那一版。
if_unnamed_en: The agent helpfully refactors half the project, and you cannot get back to the version that ran.

### 差异 Diff / 拉取请求 PR / Diff and pull request
id: diff
definition_zh: 改动的对照。看 diff 比看整文件便宜，也是你当审稿人的位置。
definition_en: The contrast of the change. Reading a diff is cheaper than reading the file, and it is where you act as editor.
tell_the_model_zh: 这次只改登录页，PR 不要夹带格式化整个仓库。
tell_the_model_en: This change is the sign-in page only. The PR must not reformat the repository.
if_unnamed_zh: 你以为改了一行文案，实际一千行空白被重排。
if_unnamed_en: You thought it was one line of copy. A thousand lines of whitespace moved.

### 检查器与类型错误 / Linter and type error
id: linter
definition_zh: 机器先读一遍你的代码。红字不是羞辱，是便宜的验收。
definition_en: A machine reads the code first. The red text is not an insult; it is cheap acceptance.
tell_the_model_zh: 改完跑 lint 和 typecheck，按报错修，不要关检查来「先让它过」。
tell_the_model_en: After edits, run lint and typecheck. Fix from the errors. Do not disable checks to “make it pass.”
if_unnamed_zh: 页面白屏，控制台一条红字，你只能把整段错误丢回给模型。其实那就是验收标准。
if_unnamed_en: White screen, one red line in the console. You paste the whole error back. That error was the spec.