VIBE CODING
术语
按开发环节理解 AI 编程中的常见概念。前端
用户直接看到并操作的界面，以及浏览器中的交互逻辑。
查看图解Component组件
可独立复用的界面单元，例如按钮、导航栏或文章卡片。
DOM文档对象模型
浏览器把 HTML 页面表示成的树状结构，JavaScript 可以读取和修改它。
State状态
决定界面当前如何显示的数据，例如菜单是否展开或用户是否登录。
Props组件属性
父组件传给子组件的数据，用来配置组件的内容和行为。
Responsive Design响应式设计
让同一页面根据屏幕宽度自动适配桌面、平板和手机。
Hydration水合
在浏览器中为服务端生成的静态 HTML 接上 JavaScript 交互能力。
Event事件
用户操作或浏览器变化发出的信号，代码监听它来做出反应。
Routing路由
把网址和页面对应起来的规则，决定访问某个地址时看到什么。
SSR服务端渲染
在服务器上先把页面拼装成 HTML 再发给浏览器，第一眼就能看到内容。
Browser Storage浏览器存储
把少量数据存在用户浏览器里，刷新或下次再来时还能读到。
后端
处理业务逻辑、权限和数据请求的服务器端能力。
查看图解AI
理解 AI 编码工具如何接收上下文、调用工具并完成任务。
查看图解Vibe Coding氛围编程
通过自然语言描述意图，让 AI 生成和修改代码，再根据运行结果持续反馈的开发方式。
Prompt提示词
交给 AI 的任务说明。清晰的提示词通常包含目标、上下文、约束和验收标准。
Context Window上下文窗口
模型此刻能看到的全部内容和它的容量上限。窗口装满后，较早的细节可能被压缩或移出。
Token词元
模型切分和处理文本的最小单位，并非每个字就是一个词元：英文约 4 个字符合一个词元，中文一个字通常要占一到两个，视模型而定。上下文窗口容量和调用费用都按词元数计算。
RAG检索增强生成
回答前先从知识库检索相关资料，连同问题一起交给模型，让回答有据可依。
Agent智能体
能够围绕目标读取文件、调用工具、修改代码并验证结果的 AI 执行单元。
Harness智能体运行框架
连接模型、工具、权限、状态和执行循环的框架，决定 Agent 如何真正完成工作。
MCP模型上下文协议
让 AI 应用以统一方式连接外部工具和数据源的开放协议。
Skill技能
封装特定任务的方法、约束、脚本和素材，让 Agent 稳定复用一套工作流程。
数据与存储
保存、组织和读取应用数据时常见的基础概念。
查看图解工程与协作
管理代码变化、团队协作和安全回退的常用方法。
查看图解Git版本控制系统
记录代码的每次变化，让开发者可以比较、协作和回退。
Diff代码差异
代码修改前后的差异，是检查 AI 实际改了什么的最直接依据。
Commit提交
把一组相关代码变化保存为带说明的版本节点。
Branch分支
与主线隔离的开发路径，适合独立完成和验证一项修改。
Worktree工作树
让同一个仓库的多条分支各占一个独立目录，可以同时打开、并行修改。
Fork复刻
把别人的仓库完整复制到自己名下自由修改，再通过 PR 把改进送回上游。
Pull Request合并请求
请求团队审查一组代码修改，并在确认后合并到目标分支。
Checkpoint检查点
可回退的阶段性状态，通常通过 Git 提交或工具快照保存。
部署与运行
把本地代码变成线上服务，并持续观察运行状态。
查看图解界面图鉴
屏幕上每一块的通用名字——认得它，才能让 AI 精确地改它。
查看图解布局骨架
HeroHero 区
首屏最上方那块用大标题和行动按钮定调的区域，整个页面的开场白。
Navbar导航栏
固定在页面顶部的横条，放站点标志和主要入口，负责「你在哪、能去哪」。
Footer页脚
页面底部的收尾区，放次要链接、版权和联系方式，是页面的「片尾字幕」。
Card卡片
把一条内容装进带边界的小方块，成组排列，方便扫视和点击。
Table数据表
把同类数据一行一条、一列一项摆成网格，能排序能筛选，是后台页面的主角。
Sidebar侧边栏
占住左侧一列的竖向导航，把更深的目录常驻在屏幕上。
Section区块
页面的段落：一个通栏讲一件事，一个接一个摞出整个页面。
Accordion折叠面板
一排可以逐个展开收起的标题，把长内容折起来，只在需要时打开一段。