筑基·基础概念Concepts

定义：你给 AI 的指令或问题，是模型生成回答的直接依据。它的质量（是否清晰、有上下文、有格式要求）直接决定输出质量——同一件事，笼统地说和说清楚，结果天差地别。

类比：像给厨师点菜：只说『来点吃的』和说清『少油、免辣、要快、两人份』，上桌的菜完全不同。

请扮演资深前端工程师，审查这段组件代码，指出可复用性问题并按优先级给出改进建议，用列表输出。

定义：预设给 AI 的长期角色与行为规则，在每次对话开始时自动生效，相当于给 AI 定的『岗位说明书』。它决定 AI 的语气、边界和默认工作方式，不随单轮对话改变。

类比：像员工入职手册：先定好岗位职责和行为准则，之后的工作都按这套来，不用每次重新交代。

你是一位严格的代码审查员，每次收到代码先检查安全隐患，再按优先级列出修改建议。

定义：模型读写文本的最小计量单位，大致对应『字』（约 0.75 个汉字或 0.3 个英文单词）。输入和输出都按 token 计费，且受『上下文窗口』上限约束——一次对话能处理的篇幅有限。

类比：像按重量计费的快递：字越多『重量』越大，超过车厢容量（上下文窗口）就装不下，得另开一车。

这份日志有 3 万字，请先概括异常分布，再告诉我最需要关注的一类错误。

定义：AI 在某一轮对话中『能看到』的全部信息，包括你提供的文件、对话历史、系统提示词和工具返回结果。上下文越相关、越完整，回答越准——它正是由一个个 token 组成的『可见窗口』。

类比：像会议白板：写在上面的信息 AI 才看得见，没写上去的它完全不知道。

请阅读 @src/utils/format.ts，然后解释这个格式化函数的时间复杂度。

定义：能自主完成任务的 AI 程序：不只问答，还能自己拆步骤、调用工具、写文件、运行命令，并在过程中检查与修正。你给目标，它自己想办法达成。

类比：像一位能独当一面的实习生：你交代目标，它自己拆步骤、干活、检查结果，做完再向你汇报。

帮我创建一个 React 项目，配好路由和状态管理，完成后告诉我如何启动。

定义：智能体的协作档位，决定两件事：一是按什么流程干活——Chat 只问答、Plan 先出计划等人确认、Spec 先用需求/设计/任务文档对齐再动手、Goal/Craft 类只给目标自主执行；二是被授予多大权限——从每步确认到完全放权。各家叫法不同：Claude Code 的 Plan Mode、CodeBuddy 的 Craft、Qoder 的 Quest（内含 Goal / Spec 开关）、Kiro 的 Spec / Vibe。

类比：像雇一位住家阿姨：先面聊问经验（Chat），大扫除前列清单给你过目（Plan），长期做饭先立好规矩菜谱（Spec），熟了以后只说『家里收拾一下』她自己安排（Goal / Craft）。至于家门密码给不给、给到哪一级，是另一件事——权限。

先进入 Plan 模式，为支付功能出一份实施方案，列出要改的文件、步骤和风险点，我确认后再开始编码。

定义：给 AI 加载的专业能力包，让它在特定领域（如前端设计、代码审查、测试）表现更专业。装上对应技能后，AI 会按该技能的规范与知识工作。常用技能可参考 SKILL.SH 热度榜（数据截至 2026-07）。

类比：像给手机装 App：装上相机 App 拍照更专业，装上导航 App 认路更准。

请先加载前端设计 Skill，再帮我设计一个登录页的视觉方案。

定义：AI 可以调用的外部能力，如读写文件、联网搜索、查数据库、发消息。MCP（模型上下文协议）是一套标准接口，让不同工具能被各种 AI 统一接入。

类比：像给助手配了工具箱：有了扳手它能拧螺丝，有了浏览器它能查资料，工具越多能做的事越广。

请读取当前目录的 package.json，查询 npm 上 React 的最新版本号，并告诉我两者相差多少。

定义：检索增强生成：先检索相关资料（文档、规范、知识库），再把资料连同问题一起交给 AI 作答。资料作为上下文，能显著降低编造、提升准确性。

类比：像开卷考试：先翻书找答案再作答，比闭卷瞎蒙准确得多。

请根据 docs/design-system.md 的规范，告诉我按钮主色的变量名和默认值。

定义：AI 一本正经地编造不存在的事实、API 或代码，看似合理实则错误。它源于模型『补全』而非『查证』的本能，对不确定的内容也会给出看似自信的答案。

类比：像记忆力好但会脑补的实习生：你没说过的事，他也能自信地补出细节，而且不觉得自己错了。

请检查这段配置里哪些 API 是真实存在的，列出你认为可能不存在的项并说明理由。

定义：存放项目全部代码文件及其完整改动历史的仓库，是版本管理的基本单位。

类比：像一本能翻回任何一页的日记本：文件夹只留今天，仓库把每一天都留着。

这个仓库是 Vue3 + TypeScript 项目，请先浏览目录结构，再告诉我入口文件在哪里。

定义：分布式版本控制工具：完整记录每一次代码改动，可随时回退，多人协作互不覆盖。

类比：像游戏存档：打 Boss 前先存档，打挂了读档重来，不用从头开始。

请把 src 目录下的改动按功能拆成两个提交，提交信息用英文动词开头。

定义：一次代码改动的快照，附带说明这次改了什么、为什么改。

类比：像拍照发朋友圈：每张照片记下当时的改动，配文说明是为什么拍。

请把刚才修改的文件提交，信息写明『修复移动端菜单无法关闭的问题』。

定义：项目运行的软件与配置，如系统、语言版本、依赖、环境变量。

类比：像厨房的灶台：同样的菜谱，不同火力、锅具做出来味道完全不同。

我在 Windows 11 + Node 20 上跑这个脚本报错，请根据这个环境帮我定位原因。

定义：把源代码转换成生产环境可直接运行的产物的过程：编译、压缩、打包、优化都在这一步完成，产物（如 dist 目录）才是真正拿去部署的东西。

类比：像把手稿印成书：手稿方便作者涂改，印刷装订后的书才方便读者阅读携带。

请运行项目构建，如有报错先归类是语法、依赖还是配置问题，再逐个修复并重新构建。

定义：用自动化脚本验证代码行为是否符合预期：改动之后跑一遍测试，就能立刻知道有没有改坏已有的功能。

类比：像给家里装的烟雾报警器：平时安静不显眼，真出事第一时间响——不用等到浓烟滚滚才发现。

为这个导出函数写三个测试：正常数据、空数据、非法输入各一个，写完跑给我看结果。

定义：程序不符合预期的行为，以及定位、修复它的过程。

类比：像家里水管漏水：先看哪里漏、再逐段排查，最后才动手补漏。

点击导出按钮页面卡死，控制台报错 X，期望导出 Excel 文件，请帮我排查。

定义：不改变功能的前提下，改进代码结构与可读性的过程。

类比：像整理房间：东西一样没丢，但摆放整齐后找起来更快。

请重构这个函数，保持输入输出完全不变，把它拆成三个职责单一的小函数。

定义：把代码发布到线上环境，让用户能访问到最新版本。

类比：像新店开业：装修测试完，开门营业才有人进得来。

请把 main 分支部署到预发环境，完成后返回访问地址并说明如何回滚。

定义：网页的三个基础层：HTML 定结构——页面上有什么内容；CSS 定样式——内容长什么样；JavaScript 定行为——操作后发生什么反应。所有前端框架和组件，最终都会生成这三样东西交给浏览器。

类比：像盖房子：HTML 是毛坯框架，隔出客厅卧室；CSS 是装修，刷墙铺地板定风格；JavaScript 是水电开关——按一下，灯真的会亮。

做一个个人主页：左侧头像加一段自我介绍（内容），暖色卡片式排版（样式），点『复制邮箱』按钮就把地址复制到剪贴板（行为）。

定义：可复用的界面单元，把结构、样式与行为封装在一起，通过属性（props）接收数据、对外暴露交互事件。

类比：像乐高积木：标准件拼在一起能搭出各种造型，不必每次都从零造。

请实现一个可复用的日期选择组件，支持禁用日期和范围选择两种模式。

定义：页面随屏幕尺寸自动调整布局，手机、平板、桌面都能用。

类比：像水倒进不同的杯子：页面内容是水，手机、平板、桌面是不同的杯子，水总能贴着容器排出合适的形状。

请让这个导航栏在手机端变成汉堡菜单，在桌面端保持横向排列。

定义：决定『访问哪个地址显示哪个页面』的机制：地址变化时，路由按规则找到对应页面来渲染；现代单页应用靠它切换视图而不用整页刷新，流畅感就来自这里。

类比：像写字楼的前台导览：你说要找哪家公司（网址），导览图（路由）告诉你去几楼几号房，不用每次都从大门重新进来。

搭好路由：/ 首页、/articles 列表、/articles/:id 详情、/settings 设置；未登录访问 /settings 时跳转到 /login。

定义：界面上会随操作变化的数据：输入框里的字、是否已登录、购物车里的商品都是状态。状态一变，页面跟着更新——管理好『谁存它、谁能改它』，是前端稳定不乱的关键。

类比：像餐厅后厨的白板订单：服务员写上去，后厨抬头可见，划掉一道菜全员同步。白板只有一块、写的人有规矩，才不会出错——状态同理，要定好唯一来源和修改权限。

登录成功后顶部显示头像：请把用户信息做成全局状态，登录页和顶栏共用，退出登录时一并清空。

定义：前端是用户在浏览器里看到、点到的那部分，负责界面与交互；后端跑在服务器上，负责数据存取与业务逻辑；两边通过接口通信。

类比：像餐厅：前厅点菜上菜（前端），后厨做菜（后端），菜单是双方约定的接口。

请为登录页实现前端表单校验，并给我一个接收账号密码的后端接口设计。

定义：程序之间约定的数据交换契约：用哪种 HTTP 方法、传什么参数、返回什么格式的数据（如今多为 JSON），说清楚就能互相对话。

类比：像餐厅菜单：顾客按菜单点菜，后厨按菜单出菜，两边都认同一套规则。

请设计一个用户登录 API，POST /api/login，返回 token 或 401 错误。

定义：持久化存储数据的系统：程序重启数据也不丢，支持增删改查与数据之间的关联；关系型数据库用 SQL 操作。

类比：像图书馆书库：书按编号摆放，借书还书都有登记，才能管好上万册书。

请为待办事项设计三张表：用户、任务、标签，并说明它们之间的关系。