Vibe Coding
可视化图鉴

会随操作或数据变化并影响界面结果的信息。

用户或浏览器发生某个动作时发出的可监听信号。

按钮执行当前页面动作，链接把用户带到另一个地址。

输入控件收集单项信息，表单组织并提交一组信息。

复选框可多选，单选框在一组中选一个，开关立即切换布尔设置。

Select 从有限选项中选择，AutoComplete 边输入边给候选。

在提交前后检查输入是否完整、格式是否正确、业务规则是否满足。

表格适合对齐比较，列表适合顺序浏览，卡片适合独立对象概览。

Modal 居中打断当前任务，Drawer 从边侧展开并保留更多页面上下文。

Toast 短暂提示即时结果，Notification 承载更重要或可追溯的消息。

Tooltip 解释简短标签，Popover 可承载少量操作或结构化内容。

导航帮助用户选择去向，路由把地址映射到对应页面或视图。

同一内容根据可用宽度调整布局，而不是简单缩小桌面页面。

界面必须说明正在等待、确实没有数据，还是请求失败。

让键盘、读屏和不同能力的用户都能理解并操作界面。

客户端渲染在浏览器组装页面，服务端渲染先生成 HTML 再交给浏览器。

触发一个明确动作的可点击控件。

把用户带到另一个页面、位置或资源的导航入口。

接收一行短文本、数字或密码的表单控件。

接收段落、说明和长文本的可伸缩输入区域。

允许用户独立选择零个、一个或多个选项。

从一组互斥选项中选择且只选择一个。

立即打开或关闭一个二元设置。

从预设列表中选择一个或多个值。

用户输入时根据关键词推荐可能的完整值。

用日历或时间面板选择规范化日期。

把本地文件传到服务器或对象存储。

说明一个输入控件在收集什么以及是否必填。

按行列展示可比较的结构化数据。

按相同结构连续展示一组同类项目。

把一个可独立理解的对象及其操作组织在有限区域内。

用短标签表达分类，用小徽标表达数量或状态提醒。

用人像、Logo 或首字母帮助识别用户或组织。

在同一上下文中切换少量并列内容视图。

按标题展开或收起补充内容，降低一次性信息密度。

在当前页面上方临时阻断流程，要求用户完成或取消一个任务。

从屏幕边缘滑出一个保持主页面上下文的辅助面板。

短暂显示操作结果，不要求用户立即回应。

承载较完整、可稍后处理的系统消息。

悬停或聚焦时解释一个简短控件或术语。

由某个控件触发、承载少量交互内容的浮层。

显示当前页面在信息层级中的位置及返回路径。

把大量结果切成稳定页次，允许定位与返回。

从按钮或导航项展开一组相关命令。

页面进入时用主标题、核心说明和主要操作建立第一印象。

引导用户完成页面最重要的下一步。

在页面顶部承载品牌、主导航和全局操作。

在页面末尾提供法律、联系与辅助导航信息。

沿一个主轴排列、分配和对齐一组元素的 CSS 布局方式。

用明确的行列轨道组织二维页面结构。

持续接收请求、运行程序并返回数据或页面的计算环境。

不同程序按照约定交换数据或调用能力的接口。

浏览器或程序发出请求，服务器用状态码、头和内容做出响应。

围绕资源和标准 HTTP 方法组织接口的一种常见风格。

用键、值、数组和对象表达结构化数据的文本格式。

数据库保存可查询的数据，数据结构规定字段、类型和关系。

创建、读取、更新和删除数据的四类基本操作。

认证确认你是谁，权限判断你能做什么。

Session 由服务端保存会话，Token 把可验证凭据交给客户端携带。

浏览器用跨源规则限制网页调用另一个域名的接口。

一个 API 对外提供具体能力的地址与方法组合。

用三位数字概括一次 HTTP 请求的处理结果。

当某个事件发生时，由服务端主动向另一个系统发送 HTTP 通知。

客户端与服务端保持双向连接，双方都能随时发送消息。

客户端按结构声明所需字段，由统一端点返回对应数据。

用机器可读文件描述 HTTP API 的路径、参数、模型和响应。

浏览器按域名保存并随请求发送的小段状态数据。

把计算或获取过的结果暂存起来，减少重复工作与等待。

限制单位时间内允许的请求数量，保护服务资源。

把图片、文档等二进制内容存到文件系统或对象存储，并在数据库记录引用。

用于查询和修改关系型数据库的结构化语言。

不以传统关系表为唯一模型的一类数据库方案。

用表、行、列和关系约束组织结构化数据。

为常用查询建立额外的数据结构，减少扫描范围。

把多次数据操作作为一个不可分割的整体提交或回滚。

用可版本化脚本逐步改变数据库结构或基础数据。

把耗时或可异步处理的工作排队，由独立执行器消费。

由服务端只查询并返回当前一页数据，而不是把全部记录交给浏览器。

完成一个产品所使用的语言、框架、运行时、数据库和部署工具组合。

库由代码主动调用，框架规定整体组织方式并在合适时机调用代码。

真正执行程序并提供文件、网络、计时器等基础能力的环境。

负责下载、锁定、升级和运行项目依赖的工具。

当前项目运行或开发时需要的外部代码包。

终端是输入命令的界面，CLI 是通过命令和参数操作的软件。

为本地开发提供页面、热更新和调试信息的临时服务。

把源代码、样式和资源转换成浏览器或服务器可发布产物。

由运行环境注入、用来区分配置而不写死在源码里的键值。

部署把可发布产物交付到运行环境，托管负责持续提供访问。

在 JavaScript 上增加静态类型检查，帮助更早发现接口和数据错误。

把代码拆成可导入、可导出的独立单元并管理依赖关系。

在一个版本库中管理多个应用或共享包。

记录依赖解析后的精确版本，保证不同环境安装结果一致。

用主版本、次版本和修订号表达兼容性与变更范围。

用自动规则检查潜在代码问题，并统一排版风格。

把应用和运行依赖封装成可重复启动的隔离环境。

用于构建、分发和运行容器镜像的一套工具与运行方式。

每次改动自动执行检查、构建，并按规则发布到目标环境。

域名是易读地址，DNS 负责把它解析到服务器或服务节点。

把静态内容缓存到离用户更近的节点，降低延迟和源站压力。

由入口服务器接收请求，再转发到内部应用或静态资源。

日志记录事件细节，监控聚合指标并在异常时告警。

用配置控制功能是否对某环境或用户群开放，而不重新改代码。

根据已有上下文预测并生成文本或结构化输出的模型。

模型是能力本身，服务商负责提供接口、计费、限额和运行保障。

给模型的任务说明、上下文、约束和输出要求。

由应用放在更高优先级、规定角色和长期行为边界的指令。

模型单次能够共同处理的指令、历史和资料总量。

模型读取和生成文字时使用的计量片段，不等同于字或字符。

同一模型或流程能够处理文字、图片、音频等多种输入。

围绕目标自行规划步骤、调用工具并检查结果的执行流程。

模型按结构化参数请求外部程序执行查询或操作。

让 AI 应用用统一协议发现并调用外部工具、资源和提示模板。

Embedding 把内容映射成可比较向量，RAG 先检索资料再让模型基于资料回答。

幻觉是模型生成了看似合理但无依据的内容，评估用于系统检查质量。

控制模型从候选词中选择结果时的随机程度，而不是控制事实正确率。

让模型按预先定义的 JSON 结构返回数据，便于程序可靠读取。

在提示中给出少量输入输出示例，让模型模仿格式和判断口径。

在回答前投入更多计算处理多步骤问题的模型类型。

Agent 在观察、计划、行动和检查之间循环，直到完成或需要人工介入。

把跨轮次有价值的信息保存为可检索状态，减少反复说明。

在模型输入、工具权限和输出结果周围设置可执行的限制与检查。

外部内容试图改变 Agent 原有指令、窃取信息或诱导执行越权动作。

按语义向量的距离检索相似内容，而不只匹配相同关键词。

把长文档切成可检索且保留语义的较小片段。

在初次召回后，用更精细模型重新判断候选与问题的相关性。

让模型结论建立在给定资料上，并保留可核验的来源位置。

根据任务类型、风险、成本和速度选择不同模型或处理链。

用一组有期望结果和评分规则的代表性任务持续衡量 AI 质量。

Git 在本地记录版本，GitHub 托管仓库并提供协作流程。

保存项目文件、版本历史和 Git 配置的工作目录。

工作区是正在编辑的文件，暂存区是准备进入下一次提交的改动。

把一组有明确目的的暂存改动保存成带说明的版本节点。

指向一条提交历史的可移动分支，用来隔离不同工作。

Merge 保留分叉并产生合并结果，Rebase 把提交重新放到新基线后。

Fetch 只获取远程信息，Pull 获取并整合，Push 把本地提交发送到远程。

冲突需要人工决定两边改动如何共存，回退让项目恢复到已知状态。

把远程仓库的历史、分支和工作文件复制到本地。

Remote 是远程仓库别名，origin 通常是克隆时自动创建的默认别名。

声明哪些未跟踪文件不应进入 Git 版本历史。

逐行显示两个版本、提交或工作状态之间的变化。

把尚未提交的本地改动临时收起，稍后再恢复。

Tag 固定指向一个历史版本，Release 在此基础上附加说明和制品。

把一个分支的改动提交给团队讨论、检查并合并。

由他人或自动工具检查改动的正确性、风险和可维护性。

用大小、位置、颜色和对比度告诉用户先看什么、再看什么。

留白是让内容呼吸的空区域，间距用稳定规律表达元素关系。

网格提供稳定列和基线，对齐让不同元素形成可扫描的秩序。

通过字体、字号、行高、字重和行长组织阅读体验。

颜色表达品牌和状态，对比度确保文字与控件看得清。

设计系统用共享规则、组件和变量保持产品在不同页面表现一致。

可供性让用户看得出能怎么操作，反馈说明操作是否发生和结果如何。

不同屏幕应重新安排内容密度和操作方式，而不是机械缩放。

用命名变量集中表达颜色、间距、字号和圆角等设计决策。

用一致的图形语言表达常见对象、状态和动作。

控制元素边角弧度，影响组件边界和整体气质。

用明暗和模糊模拟元素层级或悬浮关系。

控制元素整体与背景混合的程度。

在两个或多个颜色停靠点之间平滑过渡。

用有限的一组间距值控制组件内外留白，形成稳定节奏。

分别表示指针悬停、正在按下或选中，以及键盘焦点所在状态。

表示当前控件不可操作，并说明需要满足什么条件。

用短暂动画解释元素从一个状态到另一个状态的变化。

决定动画在开始、中间和结束阶段的速度变化。

按钮、提示、错误和空状态中的短文字，帮助用户理解下一步。

当没有数据时解释原因，并提供合理的下一步。

先展示最常用信息，需要时再展开高级细节。

用“谁、为什么、要做什么”描述用户需要获得的结果。

从用户要完成的进步或任务出发，而不是从产品功能出发。

基于真实研究总结的一类典型用户及其目标、能力和限制。

描述用户从入口到完成目标经过的页面、动作和分支。

用低细节结构草图确定页面信息和操作位置。

用可点击或可运行的模型模拟关键流程和状态。

用最小完整范围验证核心价值，而不是发布一个残缺页面。

用可观察、可重复的条件定义一个需求何时算完成。

Roadmap 表达阶段目标，Backlog 保存按优先级排列的候选工作。

按统一名称记录用户在产品中的关键动作及必要上下文。

隔离验证一个函数、类或小组件在给定输入下的行为。

验证多个模块、数据库或服务连接在一起时是否正确协作。

从用户入口出发，在真实浏览器中验证完整业务流程。

在修改后重新验证曾经正常或曾经出错的功能没有退化。

用加载、交互和布局稳定性指标衡量网页真实用户体验。

XSS 注入恶意脚本，CSRF 借已登录身份诱导浏览器发送非预期请求。

安全保存、分发、轮换 API Key、密码和证书等敏感配置。

用自动检查与键盘、读屏人工验证界面是否可被不同用户使用。