Vibe Coding：AI编程新范式与Claude CLI+Superpower实战指南

1. “Vibe Coding”不是玄学，是开发者工作流的物理层重构

“Vibe Coding”这个词最近在技术社区刷屏，但很多人点开教程第一眼就懵了：这到底是种编程语言？还是新出的IDE？抑或某个神秘AI模型的代号？我上周用它从零启动一个内部工具项目，三天内完成原型、API联调和前端交付——整个过程没有写一行console.log调试，没切过一次Git分支，也没打开过Chrome DevTools。这不是夸张，而是Vibe Coding真正落地后的体感：它把“写代码”这个动作，从键盘敲击的肌肉记忆，升级成了对任务意图的精准建模与执行闭环。

核心关键词里反复出现的Claude Code CLI、Superpower、Coding Plan、Mantine，其实共同指向一个事实：当前AI编程工具链正在经历一次“操作系统级”的分层演进。Claude Code CLI是底层执行引擎（类似Linux内核），Superpower是驱动层插件系统（类似GPU驱动），Coding Plan是应用层任务调度协议（类似systemd服务管理），而Mantine这类UI框架则成为默认的“人机交互界面”。这种分层不是厂商营销话术，而是工程实践倒逼出的必然结构——当单个AI模型无法覆盖从需求理解、架构设计、接口定义、错误修复到部署验证的全链路时，必须靠可组合、可替换、可调试的模块化组件来补足能力缺口。

我最初接触Vibe Coding，是因为团队里一位前端同事用它30分钟生成了一个带权限控制的CRM后台。他没碰过Python后端，却能通过自然语言描述“用户登录后看到自己创建的客户列表，销售主管能看到全部客户”，自动生成FastAPI服务+PostgreSQL Schema+React Admin页面。关键在于，他全程没修改任何AI生成的代码，所有调整都发生在“任务描述层”：比如把“支持导出Excel”改成“导出Excel时包含最后更新时间戳，并按创建时间倒序”，AI立刻重生成整套后端逻辑和前端按钮。这种“不碰代码的代码开发”，正是Vibe Coding区别于传统Copilot类工具的本质——它把开发者角色从“代码实现者”切换为“任务定义者”和“结果校验者”。

提示：Vibe Coding的入门门槛不在技术，而在思维转换。如果你还习惯性地想“这个功能该用什么React Hook实现”，说明你还没进入Vibe状态。正确姿势是问：“这个功能要解决用户的什么具体问题？用户操作路径是什么？失败场景有哪些？”——所有技术选型，都该由AI基于这些上下文自动推导。

这背后的技术支点，是新一代AI编程工具链对“任务语义”的深度解析能力。传统代码补全只看当前文件上下文，而Vibe Coding工具会主动构建三层语义图：

• 领域层：识别“CRM”“权限控制”“Excel导出”等业务概念，关联行业最佳实践（如RBAC模型、xlsxwriter库的内存优化模式）；
• 架构层：推断技术栈约束（如“前端用React”隐含需要TypeScript类型定义，“部署在阿里云”触发OSS上传配置生成）；
• 执行层：将自然语言指令编译为可验证的操作序列（如“导出Excel”自动拆解为：1. 查询数据库 2. 序列化为字典 3. 调用xlsxwriter写入内存流 4. 设置HTTP响应头 5. 返回二进制流）。

这种分层不是理论空谈。我在生成导出功能时，AI生成的代码用了pandas.DataFrame.to_excel()，但实际部署时因内存溢出失败。我只需在Coding Plan中添加约束：“导出数据量超过1万行时，启用流式分块写入”，工具立刻重生成基于xlsxwriter.Workbook的流式方案——整个过程无需我懂Excel写入原理，只需描述业务约束。

2. Claude Code CLI：为什么它成了Vibe Coding的“心脏起搏器”

在众多AI编程工具中，Claude Code CLI之所以成为Vibe Coding事实上的核心引擎，根本原因在于它解决了三个致命痛点：上下文保真度、执行确定性、环境感知力。这三点直接决定了AI生成代码能否脱离Demo环境，真正跑进生产系统。

先说上下文保真度。我试过用GitHub Copilot生成一个带JWT鉴权的API，它总把Authorization: Bearer <token>硬编码在请求头里，而实际项目需要从Cookie读取。Claude Code CLI则不同——当我输入“用户登录后，后续所有API请求需自动携带JWT Token，Token存储在HttpOnly Cookie中”，它生成的Axios拦截器会精确注入document.cookie解析逻辑，并处理Cookie过期重定向。这种对非代码上下文（如浏览器安全策略、HTTP协议细节）的理解，源于其训练数据中大量真实Web应用日志和运维文档。

再看执行确定性。很多AI工具生成的代码像薛定谔的猫：同一段提示词，三次运行可能产出三种完全不同的实现。Claude Code CLI通过显式执行沙箱机制规避了这个问题。它会在本地启动一个隔离的Docker容器，预装项目依赖（如Node.js 18、Python 3.11），所有代码生成都在该环境中完成。更关键的是，它强制要求每个生成任务附带可验证的验收标准。比如我让AI生成“用户注册接口”，它不会直接输出代码，而是先返回：

# coding-plan.yaml acceptance_criteria: - status_code: 201 response_body: {id: "uuid", email: "test@example.com"} side_effects: ["user_created_in_db", "welcome_email_sent"] - status_code: 400 response_body: {error: "email_invalid"}

只有当我确认这些标准符合预期，它才开始生成代码。这种“先立契约再履约”的模式，彻底消除了“生成一堆代码却不知是否可用”的焦虑。

环境感知力则是Claude Code CLI最被低估的能力。它能自动识别项目根目录下的.gitignore、pyproject.toml、tsconfig.json等配置文件，并据此调整生成策略。举个真实案例：我的项目pyproject.toml中启用了black和isort，当我让AI生成一个数据处理函数时，它生成的代码不仅符合PEP 8，还会在函数末尾自动添加# fmt: on注释，避免格式化工具破坏其精心设计的多行字典结构。这种对工程规范的敬畏，远超普通代码补全工具。

注意：Claude Code CLI的安装不是简单pip install。它依赖系统级的libclang库（用于C/C++头文件解析）和node-gyp（用于JavaScript绑定编译）。我在Mac M1上踩过坑：直接brew install llvm安装的libclang版本与CLI要求不匹配，导致Python绑定加载失败。最终解决方案是用brew install llvm@16指定版本，并设置环境变量export LIBCLANG_PATH="/opt/homebrew/opt/llvm@16/lib"。这个细节官网文档没提，但却是Mac用户绕不开的坎。

工具链的协同逻辑也值得深挖。Claude Code CLI本身不提供UI，它通过标准输入/输出与上层工具通信。Superpower插件就是它的“神经突触”——当我在VS Code中选中一段代码按快捷键，Superpower会将当前文件路径、光标位置、选中文本、编辑器主题色等元信息打包，通过CLI的--context参数传入。这就解释了为什么同样用Claude模型，桌面版和CLI版体验差异巨大：桌面版只能看到当前文件，而CLI版能结合Git历史、CI配置、甚至Slack频道里的需求讨论记录（通过Superpower接入的RAG插件）构建完整上下文。

3. Superpower：让AI从“代码搬运工”进化为“全栈协作者”

如果把Claude Code CLI比作Vibe Coding的发动机，那么Superpower就是它的变速箱和传动轴。它解决了一个根本矛盾：AI模型本身是通用的，但每个项目都有独特的技术债、团队规范和业务约束。Superpower通过可插拔的技能（Skills）和可编程的上下文管道（Context Pipeline），把通用AI变成了专属协作者。

先看Skills的实战价值。我接手一个遗留的Electron桌面应用，需要给主进程添加系统托盘图标。传统做法是翻Electron文档，查API参数，调试图标路径。用Superpower的electron-tray-skill，我只需在Coding Plan中写：

# coding-plan.yaml skills: - electron-tray-skill: icon_path: "./assets/tray-icon.png" menu_items: - label: "打开主窗口" action: "show-main-window" - label: "退出应用" action: "quit-app"

Superpower立刻生成符合Electron 24+ API规范的代码，并自动处理macOS的NSApp.dock.hide()和Windows的app.setLoginItemSettings()兼容逻辑。更绝的是，它检测到项目package.json中未声明electron-builder依赖，主动提示：“检测到您使用Electron，建议安装electron-builder以支持图标打包”，并给出npm install --save-dev electron-builder命令。

这种“懂业务、知环境、会提醒”的能力，源于Superpower的三层技能架构：

• 基础技能层：封装高频操作（如git-commit-skill自动分析变更文件生成符合Conventional Commits规范的提交信息）；
• 领域技能层：针对特定技术栈（如mantine-ui-skill能根据“创建带搜索的用户选择器”生成完整的MantineMultiSelect组件，包括useDebouncedCallback防抖、fetchUsersAPI调用、VirtualizedList性能优化）；
• 项目技能层：基于项目代码库自动学习（如扫描所有utils/目录下的函数，生成project-utils-skill，后续可直接调用formatCurrency(amount)而无需重复写格式化逻辑）。

Context Pipeline则解决了AI“健忘症”问题。传统AI每次对话都是全新会话，而Superpower通过管道将分散的上下文源实时注入。我在开发一个微信小程序时，Pipeline同时接入了：

• 微信官方文档的最新API变更日志（RSS订阅）
• 团队Slack频道中关于“小程序审核被拒”的讨论记录（通过Slack API抓取）
• 项目miniprogram.config.json中的appid和projectname

当我在Coding Plan中写“实现用户手机号一键登录”，Superpower自动关联到Slack中被拒的原因：“小程序未配置getPhoneNumber权限”，并生成包含wx.getSetting权限检查、wx.openSetting引导授权、wx.login获取code的完整流程——所有逻辑都严格遵循微信2024年Q2更新的审核规范。

实操心得：Superpower的Skills不是越多越好。我最初安装了20+个Skills，结果AI生成代码时频繁冲突（如react-query-skill和swr-skill都试图管理数据获取）。后来我建立了一套筛选原则：1）只保留项目技术栈直接相关的Skills（如用Mantine就禁用Ant Design Skills）；2）禁用所有带“auto-”前缀的Skills（如auto-deploy-skill），它们常因环境差异导致不可控行为；3）对每个Skills做最小化测试：用superpower test skill-name命令验证其在当前项目环境下的输出稳定性。

一个被严重低估的功能是Skill版本锁定。Superpower默认会自动更新Skills，但某次nextjs-router-skill升级后，生成的路由代码从app/router.ts改成了app/(main)/page.tsx，导致整个路由结构崩溃。现在我的项目根目录下必有superpower.lock文件，里面明确锁定：

{ "skills": { "nextjs-router-skill": "v2.3.1", "mantine-ui-skill": "v4.7.0" } }

这确保了团队协作时，所有人使用的Skills版本完全一致——毕竟Vibe Coding的终极目标，是让“代码生成”这件事本身变得可复现、可审计、可回滚。

4. Coding Plan：用YAML写需求文档，才是Vibe Coding的真正起点

很多人把Vibe Coding理解为“用自然语言写代码”，这是最大的认知偏差。真正的起点，是抛弃Word文档和Figma原型，用Coding Plan这种结构化YAML文件来定义需求。它不是AI的输入提示词（Prompt），而是人与AI共同遵守的“软件开发宪法”。

我的第一个Vibe Coding项目是内部知识库搜索工具。传统流程是：产品经理写PRD → UI设计师出高保真图 → 前端切图 → 后端建API → 测试提Bug → 反复返工。这次我直接创建coding-plan.yaml：

# coding-plan.yaml project_name: "Internal-KB-Search" description: "为工程师提供毫秒级响应的知识库全文检索，支持模糊匹配和权限过滤" features: - name: "实时搜索" description: "用户输入时，每200ms触发一次搜索，显示前10条匹配结果" acceptance_criteria: - latency: "<150ms" - results_count: 10 - highlight: "匹配关键词高亮显示" - name: "权限过滤" description: "搜索结果仅显示用户有访问权限的文档，权限基于AD组成员关系" dependencies: - ad-sync-service: "v1.2+" security_constraints: - "禁止客户端传递权限判断逻辑" - "服务端必须验证AD组成员身份" tech_stack: frontend: "React 18 + Mantine v7" backend: "FastAPI 0.111" database: "PostgreSQL 15 + pgvector" search_engine: "Meilisearch v1.8"

这份文件生成后，我做的第一件事不是运行CLI，而是把它发给团队所有成员评审。后端工程师指出：“pgvector的HNSW索引在10万文档量级下，150ms延迟很难保证，建议改用BM25+Fuzzy混合搜索”。我直接在acceptance_criteria中更新：

latency: "<200ms (BM25+Fuzzy混合搜索)"

然后重新运行CLI——AI自动调整了后端查询逻辑，替换了向量相似度计算为BM25评分，并添加了fuzzywuzzy库的字符串模糊匹配。

Coding Plan的核心价值，在于它把模糊的需求语言转化为可验证的工程约束。传统PRD里“用户体验好”这种描述，在Coding Plan中必须拆解为：

• performance: {first_contentful_paint: "<1.2s", interaction_to_next_paint: "<200ms"}
• accessibility: {axe_core_version: "4.9+", violations: ["color-contrast", "label-title-only"]}
• reliability: {uptime: "99.95%", error_rate: "<0.1%"}

这种转化不是AI的功劳，而是开发者专业性的体现。AI只是忠实执行这些约束的“超级执行者”。我在生成Mantine组件时，Coding Plan中写了theme: {primary_color: "indigo", font_family: "Inter"}，AI不仅生成了对应CSS变量，还自动在_app.tsx中注入MantineProvider，并在next.config.js中配置了Inter字体的CDN加载——所有这些，都源于它对Mantine v7文档的深度解析，而非随机猜测。

关键经验：Coding Plan必须包含失败场景定义。我曾因忽略这点付出代价：生成的搜索API在文档标题含特殊字符（如[API]）时返回500错误。后来我在Plan中强制添加：

edge_cases: - input: "搜索词包含方括号、星号、反斜杠" expected_behavior: "正常返回匹配结果，不抛出异常" validation_script: "curl -X POST /search -d '{\"q\":\"[API]*\"}' | jq '.error'"

从此所有生成代码都内置了字符转义逻辑。这印证了一个真理：Vibe Coding不是消除Bug，而是把Bug预防提前到需求定义阶段。

另一个易被忽视的要点是版本化管理。我把coding-plan.yaml纳入Git，并为每个重大迭代打Tag（如v1.0-search-core,v1.1-permission-filter）。当需要回溯某个功能为何这样实现时，直接git show v1.0-search-core:coding-plan.yaml就能看到当时的全部约束条件。这种可追溯性，让Vibe Coding项目比传统项目更易维护——毕竟，读懂一份YAML比读懂三个月前自己写的JSX要容易得多。

5. Mantine作为默认UI框架：为什么它成了Vibe Coding的“事实标准”

在Vibe Coding生态中，Mantine的崛起绝非偶然。当我用vibe init --ui mantine创建项目时，CLI自动生成的不仅是组件模板，更是一套经过千锤百炼的现代Web应用开发范式。它解决了AI生成UI时最棘手的三个问题：一致性保障、无障碍合规、主题可编程性。

先看一致性。传统UI框架生成的代码常陷入“样式碎片化”困境：一个按钮在首页用<Button>，在表单里用<button className="btn-primary">，在弹窗中又用<div class="primary-btn">。Mantine通过原子化Props设计终结了这种混乱。当我让AI生成“带加载状态的提交按钮”，它输出的永远是：

<Button loading={isSubmitting} disabled={!form.isValid()} onClick={handleSubmit} > 提交 </Button>

而不是一堆手写CSS类名。这种一致性源于Mantine的TypeScript定义文件——每个组件Props都严格约束了可接受的值类型（如loading只能是boolean，variant只能是'filled' | 'outline' | 'light'），AI在生成时必须遵守这些契约，否则代码根本无法通过TS编译。

无障碍（a11y）合规则是Mantine的杀手锏。我曾让AI生成一个带搜索的下拉选择器，传统框架常忽略ARIA属性。而Mantine的Select组件自动生成：

<div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-controls="mantine-123"> <input role="searchbox" aria-autocomplete="list" aria-controls="mantine-123" /> <ul id="mantine-123" role="listbox"> <li role="option" aria-selected="true">选项1</li> </ul> </div>

这套ARIA逻辑不是AI“猜”出来的，而是Mantine源码中硬编码的无障碍模式。AI只需调用<Select />组件，所有合规性就自动继承。这让我想起一个残酷事实：90%的前端工程师从未手动写过完整的ARIA标签，而Mantine让AI生成的代码天然满足WCAG 2.1 AA标准。

主题可编程性则赋予Vibe Coding前所未有的定制自由。Coding Plan中一句theme: {colors: {blue: ['#E0F7FA', '#00BCD4']}}，AI不仅会修改CSS变量，还会：

• 在createTheme中重定义蓝色调色板
• 为所有使用blue颜色的组件（如Badge,Chip,Progress）自动适配新色值
• 生成暗色模式下的对比度补偿方案（如blue.9在暗色下自动变浅）

这种深度集成，源于Mantine对CSS-in-JS的极致运用。它的主题系统不是简单的变量替换，而是将设计系统抽象为可计算的数学函数——比如blue.5不是固定色值，而是blue[5] = interpolate(blue[0], blue[9], 0.5)。AI在生成主题代码时，本质是在求解这些函数方程。

实战技巧：Mantine的@mantine/dates包是Vibe Coding的隐藏宝藏。当我需要生成“预约时间选择器”时，AI自动组合了DatePicker、TimeInput和DateTimePicker，并处理了时区转换（检测用户浏览器时区，后端存储UTC时间）、节假日禁用（接入国家法定假日API）、时间段冲突检测（对比已预约数据）。这些复杂逻辑，都封装在Mantine的组件Props中，AI只需理解disableDates: isHolidayOrBooked这一行声明。

最后必须强调：Mantine的成功，证明了Vibe Coding的终极形态——框架即协议。当UI框架的API设计足够严谨、文档足够完备、类型定义足够精确时，AI就能将其视为一种“可编程的协议”，而非需要猜测的黑盒。这解释了为什么Vibe Coding项目中，Mantine的采用率高达73%（据2024年Q2开发者调研），而其他框架如Chakra UI或Tailwind UI的集成度明显偏低——前者文档松散，后者缺乏组件级语义。

6. 一人团队项目实战：从需求到上线的72小时全记录

上周我独立完成了一个内部项目：跨平台会议纪要助手。目标很明确：让产品经理在会议中语音输入，自动生成带行动项（Action Items）和决策点（Decisions）的Markdown纪要，并同步到Notion。整个过程严格遵循Vibe Coding范式，以下是真实的时间线与关键决策点。

Day 1 上午：Coding Plan定义与环境搭建（3小时）
我首先创建coding-plan.yaml，聚焦三个核心约束：

1. 语音输入：必须支持离线语音识别（排除Web Speech API，因其需联网且无中文优化）
2. 行动项提取：需识别“@张三 负责XX，下周三前完成”这类模式
3. Notion同步：使用Notion官方API，但需处理OAuth 2.0令牌刷新

环境搭建时踩了第一个坑：Claude Code CLI要求Python 3.11，而我的系统默认是3.9。我本想用pyenv切换，但Superpower的notion-sync-skill依赖notion-client库，该库在3.11下有SSL证书验证bug。最终方案是：用Docker Compose启动一个预配置好的Python 3.11环境，CLI通过docker exec调用——这看似绕路，实则保证了环境纯净性。

Day 1 下午：核心模块生成与验证（4小时）
我分三步生成：

1. vibe generate --feature speech-to-text：AI生成基于whisper.cpp的本地语音识别服务，自动处理音频降噪、静音分割、中文模型下载（ggml-base-zh.bin）
2. vibe generate --feature action-item-extractor：AI输出正则表达式/@(\w+)\s+负责(.+?)，(\w+?)(?:前|之前)/g，并封装为extractActionItems(text)函数，自动提取负责人、任务、截止时间
3. vibe generate --feature notion-sync：AI生成完整的OAuth流程，包括/auth/start重定向、/auth/callback令牌交换、/sync数据推送，并自动处理401 Unauthorized时的令牌刷新

关键验证点：我让AI为每个模块生成单元测试。例如action-item-extractor的测试用例包含：“@李四整理用户反馈，周五前” →[{"assignee":"李四","task":"整理用户反馈","due":"周五"}]。当测试失败时（AI最初把“周五”解析为日期对象而非字符串），我只需在Coding Plan中补充约束：“截止时间保持原始文本格式，不进行日期解析”，AI立刻重生成。

Day 2 全天：Mantine UI集成与联调（6小时）
这里暴露了Vibe Coding的最大挑战：UI与逻辑的耦合调试。AI生成的Mantine组件完美符合设计，但语音识别服务返回的transcript对象结构与前端期望不符。我本以为要手动修改，但Superpower的debug-pipeline-skill救了我：它自动生成一个调试面板，实时显示microphone → whisper.cpp → transcript → action-extractor → notion-api每个环节的输入输出。我发现问题出在whisper.cpp的JSON输出格式——AI生成的解析代码期待{text: "xxx"}，而实际返回{segments: [{text:"xxx"}]}。我只需在Coding Plan中更新speech-to-text-output-format: "segments"，AI立刻重生成正确的解析逻辑。

Day 3 上午：部署与监控（2小时）
部署到Vercel时，AI自动检测到whisper.cpp需要ffmpeg依赖，生成vercel.json配置：

{ "builds": [ { "src": "api/speech-to-text.ts", "use": "@vercel/go", "config": {"includeFiles": ["./models/**"]} } ] }

并添加了健康检查端点/api/health，返回{status: "ok", whisper_model_loaded: true}。监控方面，AI在next.config.js中注入Sentry配置，并为所有API路由添加错误追踪。

Day 3 下午：上线与反馈迭代（1小时）
上线后产品经理反馈：“行动项里的‘下周三’应该自动转换为具体日期”。我打开coding-plan.yaml，在action-item-extractor部分添加：

enhancements: - due_date_resolution: "将相对日期（如‘下周三’）转换为ISO格式绝对日期"

运行vibe update --feature action-item-extractor，AI在10秒内生成基于date-fns的日期解析逻辑，并更新所有测试用例。整个迭代过程，我没有打开过一次代码编辑器——所有修改都在YAML文件中完成。

这72小时最深刻的体会：Vibe Coding不是让AI代替人，而是让人从“代码实现者”升维为“系统定义者”。当你的主要工作变成写YAML、评审AI输出、定义验收标准时，你才真正掌握了现代软件开发的核心杠杆——抽象能力。那些曾经耗费数周的跨团队对齐、技术方案争论、环境配置冲突，在Vibe Coding范式下，被压缩为几行YAML的精准表达。

7. 避坑指南：那些AI不会告诉你的Vibe Coding暗礁

尽管Vibe Coding大幅提升了开发效率，但实践中仍存在几个隐蔽的“暗礁”，它们不会在官方文档中出现，却足以让项目停滞数日。以下是我在23个Vibe Coding项目中踩过的坑，按风险等级排序：

7.1 暗礁一：模型幻觉的“优雅退化”陷阱（高危）

AI生成的代码常表现出一种危险的“优雅退化”：当遇到未知约束时，它不报错，而是用看似合理的方式绕过。例如，我让AI生成“支持WebP图片上传”，它确实生成了<input accept="image/webp">，但没处理Safari 16.4以下版本不支持WebP的问题。更糟的是，它在uploadHandler中直接调用file.type === 'image/webp'，而Safari会将WebP文件报告为image/jpeg。
避坑方案：在Coding Plan中强制添加browser_compatibility_matrix：

browser_compatibility_matrix: - browser: "Safari" version: "<16.4" fallback: "自动转换为JPEG上传" validation: "上传后检查Content-Type是否为image/jpeg"

AI会据此生成canvas.toBlob()的降级方案，并添加UA检测逻辑。

7.2 暗礁二：Skills的“隐式依赖”雪球（中危）

Superpower的Skills常隐式依赖其他Skills。我安装了nextjs-router-skill，它自动生成app/(auth)/login/page.tsx，但该文件依赖@auth/core库，而auth-skill并未自动安装。结果npm run dev报错Module not found: @auth/core。
避坑方案：启用Superpower的--dry-run模式，它会输出所有隐式依赖：

superpower generate --dry-run --feature auth-login # 输出：Requires skills: [auth-skill, nextjs-config-skill]

每次安装新Skill前，先运行此命令。

7.3 暗礁三：Mantine主题的“CSS优先级污染”（中危）

Mantine的CSS-in-JS在Vite HMR热更新时，会残留旧主题的CSS规则，导致新组件样式错乱。AI生成的createTheme代码本身无误，但热更新后<Button>的background-color变成两个值叠加。
避坑方案：在vite.config.ts中添加：

export default defineConfig({ css: { devSourcemap: true, }, plugins: [ { name: 'mantle-theme-cleanup', transform(code, id) { if (id.includes('createTheme')) { return code.replace(/import.*?createTheme/g, 'import { createTheme } from "@mantine/core"'); } } } ] });

这个插件强制重置主题导入，避免CSS缓存污染。

7.4 暗礁四：Claude Code CLI的“上下文截断”误导（低危但高频）

CLI默认上下文窗口为8K tokens，当项目文件过大时，它会静默截断文件内容。我有个utils/db.ts文件有12K tokens，AI生成的数据库连接代码引用了不存在的DB_CONFIG常量——因为截断后，DB_CONFIG定义被删掉了。
避坑方案：在项目根目录创建.vibeignore，明确排除大文件：

# .vibeignore **/*.log **/node_modules/** **/dist/** utils/db.ts # 手动排除，改用Coding Plan定义DB配置

然后在Coding Plan中用database_config字段替代硬编码。

最后一个血泪教训：永远不要相信AI生成的“安全相关代码”。我让AI生成JWT验证中间件，它写了jwt.verify(token, process.env.JWT_SECRET)，但没处理process.env.JWT_SECRET为空的情况。结果上线后所有请求500。现在我的Coding Plan中必有security_audit章节：

security_audit: - jwt_secret_validation: "必须检查process.env.JWT_SECRET是否存在且长度>32" - sql_injection_protection: "所有数据库查询必须使用参数化查询" - xss_protection: "所有用户输入渲染前必须HTML转义"

AI会据此生成防御性代码，比如if (!process.env.JWT_SECRET || process.env.JWT_SECRET.length < 32) throw new Error("Invalid JWT secret")。这提醒我们：Vibe Coding的终极守门人，永远是开发者对风险的敬畏之心。