VIBE CODING 方法论 · 第 8 节

把环境事实写进 Rule

每次新开对话，AI 都不知道该调哪个模型、超时设多少、项目用什么框架。把这些环境事实一次性写死在 Rule 里，相当于给 AI 一份预填好的 .env 说明书，每轮对话自动带入。本页两个演示都可以真实操作。

为什么是 Rule：把配置写在 .env 里让 AI 自己读，它不一定每次都主动读；写在对话里，对话一长就被截断遗忘。Rule 在每轮对话开始前就被加载进上下文，是最稳的注入方式。

交互体验一 · isComposing，用中文输入法亲自试

中文输入法确认候选词时会触发 Enter，只判断 e.key === 'Enter' 的输入框会把半段内容直接发出去。AI 训练数据里 isComposing 覆盖率不高，不写进 Rule 就一定会忘。切换到中文输入法，在下面的输入框里打几个字试试。

真实体验区
isComposing：false（输入法组合中会变为 true）
按键记录会出现在这里。先打一段拼音按回车选词，再直接按一次回车，对比两次的判定结果。英文键盘用户可以直接打字回车，观察 false 的情况。
标准写法
const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey
      && !e.nativeEvent.isComposing) {
    e.preventDefault()
    handleSend()
  }
}
  • isComposing 为 true：输入法正在组合中，回车只确认候选词，不触发发送
  • isComposing 为 false：普通键盘直接输入，回车正常发送
  • 规则原文：禁止只判断 e.key === 'Enter' 而不检查 isComposing
交互练习二 · 这个场景该用什么格式

数据格式三分法：三种格式各管一个领域，互不混用。点击场景，再选一个你认为合适的格式。

❌ JSON 的 escape hell：字符串里再套 JSON
{
  "tool": "send_message",
  "arguments": "{\"channel\": \"dev\",
    \"payload\": \"{\\\"title\\\":
      \\\"发布提醒\\\", \\\"body\\\":
      \\\"v1.4 已上线\\\"}\"}"
}
✅ 同样的内容，XML 版本
<tool_call name="send_message">
  <channel>dev</channel>
  <payload>
    <title>发布提醒</title>
    <body>v1.4 已上线</body>
  </payload>
</tool_call>

JSON 版每层嵌套翻一倍反斜杠，LLM 逐 token 生成时极易配错括号和引号。XML 标签闭合直观，模型出错率更低。

进度：0 / 3 个场景

模型配置：一次写死，轮轮生效
超时

图像生成至少 120-180 秒

图像 API 经常因为默认 30 秒超时失败，AI 还会反复尝试相同的错误配置。HTTP 客户端的超时值写进 Rule，一次解决。

代理回退

网络失败先挂代理重试

网络请求失败时必须尝试代理重试（默认 127.0.0.1:7890），仍失败才向用户报告，禁止跳过代理直接报错。

流式

前端可见响应必须流式

前端可见的所有大模型响应必须用 Streaming 返回，后端内部调用才允许非流式。

技术栈锁定与品味规则

选型是人的决策

  • 后端 FastAPI、前端 React + Tailwind + Vite、数据库 SQLite、向量库 Chroma
  • 一旦定了就不再讨论替代方案，AI 的职责是在确定的栈内把代码写好
  • 端口避开 5000，从 8000-9000 随机分配，多项目同开也不冲突

图标与细节规范

  • 禁止用 emoji 做按钮图标，图标必须用 SVG
  • 看产品调性选图标集：SaaS 用 Lucide，温暖调性用 Tabler Icons
  • 图标直接下载到本地使用，不依赖 CDN

补充说明：只用 GPT 系列的项目可以把工具调用改回 JSON，它的 function calling 原生就是 JSON。「Agent 用 XML」是多模型混用场景的最大公约数选择，Claude 系模型在 XML 格式上表现更稳定。

课堂练习 · 20 分钟

提交物：Rule 的环境配置章节。① 列出你项目的环境事实：模型、API 服务商、超时、代理、技术栈、数据库；② 写成 Rule 章节，敏感的 Key 放独立的 secrets 文件并加入 .gitignore；③ 新开一个对话验证：不做任何交代，AI 能否直接说出你的技术栈和模型配置。

素材来源：开源仓库 itshen/xs_vibe_rules 中 rule-opensource.mdc 第一章「模型配置」、第四章「文档与设计规范」、第五章「数据格式规范」、第六章「技术栈与框架」。