你好朋友！欢迎来到我们的新系列——“解剖顶级 AI 工具的提示词”。

作为系列开篇，我们直接挑战目前最火的前端代码生成神器：Vercel 的 v0。本文基于GitHub 泄漏版系统提示词（System Prompt）和工具配置（Tools.json）。今天，我们就把枯燥的 Prompt 拆开揉碎，看看 Vercel 的顶级工程师是如何“调教”大模型的。

1. 引言：为什么你的 AI 写不出好代码？

痛点场景：
你是否遇到过这种情况？你想让 ChatGPT 或 Claude 帮你写一个漂亮的 React 组件。你输入了需求，结果 AI 给你的代码虽然能跑，但：

• 样式一塌糊涂，内联样式和老旧的 CSS 混杂。
• 引用了不存在的第三方库（严重幻觉）。
• 每次生成的代码风格完全不一样，根本无法接入现有项目。

解决方案：
这就是为什么我们需要工程化的 System Prompt（系统提示词）和 Tooling（工具调用）。Vercel 的 v0 并不是用了一个什么不为人知的独家魔法大模型，它之所以能稳定输出基于 Tailwind CSS 和 shadcn/ui 的高质量组件，核心就在于其背后那套极其严苛且精密的系统提示词标准。它不仅定义了 AI 的“性格”，还给了 AI 一套“得心应手的工具”。

2. 概念拆解：米其林大厨的《SOP 指南》

为了理解 Prompt.txt 和 Tools.json 的关系，我们用一个“米其林餐厅厨房”的类比（费曼学习法启动！）：

想象一下，大模型（比如 GPT-4o 或 Claude 3.5）是一位厨艺精湛但失忆的米其林大厨。他什么菜都会做，但如果你只对他说：“给我做个汉堡”，他可能会给你做一个用松露和鱼子酱做的法式汉堡——好吃，但不符合你快餐店的定位。

• System Prompt (Prompt.txt)：这就是餐厅店长递给大厨的《后厨标准操作程序 (SOP)》。里面明确写着：“你现在是麦当劳的主厨（角色设定）；只能用给定的肉饼和生菜（技术栈限制）；不准放辣椒（安全护栏）；做菜前必须先在脑子里想好步骤（思维链 <thinking>）。”
• Tools (Tools.json)：这是大厨手边的高科技厨房设备箱。当大厨发现自己不知道某种特定酱料的配方时，他可以按下一个按钮（调用 Tool），设备就会自动查阅最新的食谱并告诉他。

图解辅助（工作流逻辑）：

1. 顾客下单（用户输入需求）。
2. 大厨查阅 SOP（应用 Prompt.txt 规则）。
3. 大厨发现需要具体的 shadcn/ui 组件代码，于是调用搜索设备（触发 Tools.json 中的函数）。
4. 获得组件代码后，大厨按照 SOP 的要求，严格摆盘（生成 React + Tailwind 代码）。
5. 完美上菜。

3. 动手实战：拆解 v0 的最小可行性提示词 (MVP)

真实的 v0 提示词有上千行，我们将其浓缩为一个基础版本，带你看看里面的门道。

核心代码解析：Prompt MVP

# Role (角色设定)
You are an expert frontend React engineer who is also a master of UI/UX design. You generate production-ready React code.

# Tech Stack (技术栈约束)
- React
- Tailwind CSS
- shadcn/ui
- Lucide React for icons

# Rules (绝对规则 - 避免幻觉和风格漂移)
1. ALWAYS use Tailwind CSS for styling. NO vanilla CSS or inline styles.
2. If you need a UI component, CHECK if it's available in shadcn/ui first.
3. Before writing code, use <thinking> tags to plan your component structure.

# Output Format (输出格式)
Return ONLY valid, runnable React code inside a ```jsx block.

为什么这么写？

• Role 设定：不是简单地说“你是个程序员”，而是加上了“UI/UX 设计大师”和“生产级代码”。这会让大模型在生成代码时，自动激活其训练数据中质量最高的那部分权重。
• Tech Stack 约束：把选择权从 AI 手里夺走。不准用 Bootstrap，不准用 Chakra UI，死死按在 Tailwind 上，保证了输出的一致性。
• <thinking> 标签（神来之笔）：这是目前极高端的提示词技巧（Chain of Thought）。强制 AI 在输出代码前先“自言自语”规划逻辑，能让代码的逻辑错误率直线下降。

核心代码解析：Tools.json MVP

要让 AI 获取最新的组件库，光靠提示词不够，必须给它“挂载”工具（Function Calling）。

{
  "name": "search_shadcn_components",
  "description": "Search for standard shadcn/ui components (e.g., buttons, cards, dialogs) to use in the React code.",
  "parameters": {
    "type": "object",
    "properties": {
      "query": {
        "type": "string",
        "description": "The name of the component to search for, e.g., 'dialog'"
      }
    },
    "required": ["query"]
  }
}

为什么这么写？

• 这本质上是在告诉 AI：“如果你不知道怎么写 shadcn 的 Dialog，不要瞎编（防止幻觉），用 query 字段调用我这个 search_shadcn_components 函数，我会把真实的代码扔给你。” 这就是 v0 能够使用最新组件的核心秘密。

4. 进阶深潜：新手写系统提示词的常见陷阱

• 陷阱一：规则太多，互相冲突
  新手喜欢一股脑塞进去 50 条规则。大模型的注意力机制是有限的（Lost in the middle 现象）。最佳实践：像 v0 一样，使用清晰的 Markdown 层级（Headers、列表）来组织规则，将最重要的规则放在开头或结尾。
• 陷阱二：没有处理 Edge Cases（边缘情况）
  如果用户让 v0 去炒个菜怎么办？在 v0 的完整版 Prompt 中，一定有类似“如果用户的请求与前端 UI 无关，请礼貌拒绝”的兜底护栏（Guardrails）。
• 陷阱三：工具描述（Description）太随意
  在 Tools.json 中，description 不是写给人看的，是写给 AI 看的。如果你描述得含糊不清，AI 就不知道什么时候该触发这个工具。必须写清楚“何时使用”、“输入什么”、“输出什么”。

5. 总结与延伸

一句话总结：
世界上没有所谓“魔法”的 AI 工具，所有惊艳的生成结果，都建立在 “严苛的 System Prompt 约束 + 精准的 Tools 外部工具调用” 这一套工程化的底层逻辑之上。