摘要
1) 一句话总结
仅凭完整的系统提示词无法复制 v0 产品，其真正的核心竞争力在于消息预处理、流式数据解析以及复杂的在线代码编辑与实时渲染等底层工程架构。
2) 关键要点
- 核心竞争力：v0 的技术壁垒不在于提示词（仅为冰山一角），而在于其背后的工程实现细节。
- 消息预处理：系统会自动对用户输入的 URL 进行截屏以辅助 AI 理解，并根据情况提取相关的历史消息和项目代码。
- 提示词组合：最终发送给 AI 的提示词包含三部分：1万 Tokens 的系统提示词、用户消息（含附件/截屏）、历史消息与代码上下文。
- 流式数据处理：Claude 3.5 Sonnet 返回的 XML + MDX 格式数据会通过流式传输，由 v0 服务端实时解析为结构化 JSON，再通过 JSON Patch 协议输出至客户端进行渲染。
- 输出解析结构：AI 返回的数据被精准解析为三类：项目结构与代码文件、文件操作指令（如删除、移动
<MoveFile>）、以及解释性文本消息。 - 实时运行环境：系统需在在线代码编辑器中提供运行环境，支持 React、Shadcn、Tailwind 等前端库，将 AI 生成的代码实时组合并渲染成网页。
3) 风险与缺口
- 在线编辑器与实时预览的技术门槛：构建在线代码编辑器和实时预览环境是一个“大坑”，不仅需要搭建复杂的运行环境和支持局部更新操作，还必须具备容错机制（直接修复 AI 返回的简单代码错误），否则会导致极差的用户体验。
正文
上次在我发的《v0 提示词解析说明》https://baoyu.io/blog/v0-prompt-explaination 有人问：有了 v0 的完整提示词，是不是就能做一个 v0出来了？ 很遗憾，v0 这样的产品核心竞争力不在于提示词，提示词只是技术实现的一个重要环节，就像冰山一角，底下还有很多看不见的重要技术。 在这里以“帮我实现一个像 http://taobao.com 这样的网站” 为例来解释一下它是如何工作的。
当用户通过聊天窗口发送一条消息：“帮我实现一个像 taobao 这样的网站”，首先 v0 要对消息进行预处理：
-
如果包含 url，需要对 URL 进行截屏，以帮助 AI 更好的理解 URL 对应的网页内容、样式
-
如果之前已经有历史消息和项目代码，要选取相关的代码和历史消息
最终发送给 AI 的提示器要包含至少三部分：
-
系统提示词，也就是原来破解过的1万Tokens v0 系统提示词
-
用户发送的消息，包括用户自己提交的附件（例如截图），以及v0客户端帮助从URL抓取的截屏
-
历史消息和代码，如果是第一条消息不需要，但是当你对已有项目进行修改时，就需要把历史消息和代码一起发过去了
当然系统提示词起的作用是非常重要，它相当于给 AI 的一个说明书，告诉了 AI 输入的内容什么，期望得到什么样的输出！
如果你看过前面 v0 的系统提示词和我的解析，就大概能知道 Claude 3.5 Sonnet 返回的结果是 XML + MDX (Markdown的变种)格式。 以淘宝网站这个为例，返回的数据内容大概如下：
<ReactProject id="taobao-clone">
First, let's create the header component:
```tsx file="components/site-header.tsx"
import Link from "next/link"
import { Search } from 'lucide-react'
...
Now, let’s create the category sidebar component:
export function PromoBanner() {
...
...
</ReactProject>
This implementation creates a simplified version of Taobao's homepage with the following features
...（注意 Claude 是流式返回结果，Claude 、v0 服务端 和 v0 客户端之间建立了一根管道，数据先从 Claude 流向 v0 服务端，服务端实时解析成结构化的JSON数据，再将解析后JSON数据用JSON Patch这样的协议实时输出到 v0 客户端，v0 客户端直接解析JSON并渲染）
Claude 返回的数据被解析后大概如图所示：
Claude 返回的数据主要分成三部分：
-
项目结构和代码文件，就是之前示例中的
```tsx file=“components/site-header.tsx” 这样的内容，可以解析出文件路径和文件内容 -
文件操作，对现有项目文件的操作，删除、移动等，例如：
-
消息内容，就是代码之外的内容，通常 Claude 会有一些解释性的文本，比如：
This implementation creates a simplified version of Taobao's homepage with the following features:
1. A responsive header with navigation links and search functionality
2. A category sidebar with hover effects to show subcategories
3. A promotional banner carousel
4. A grid of product cards
5. Proper styling using Tailwind CSS with Taobao's orange color scheme
6. Mobile-responsive layout
当消息解析完后，就需要去将文件内容渲染到在线代码编辑器中，并且 Claude 返回的代码，它会引用各种前端库，比如 React、Shadcn、Tailwind 这样的，要有一个运行环境，能实时将 Claude 返回的前端代码，组合在一起，渲染成一个正常的网页！
在线代码编辑器和实时预览是个大坑，不仅要搭建一个运行环境，还要支持局部更新修改等复杂的操作，同时还需要有容错机制，能将 AI 返回代码中的简单错误直接修复，不影响运行，否则用户体验会很糟糕。
总结一下，有了 v0 dev 的系统提示词，不代表就能山寨一个 v0 dev 这样的产品出来，里面有很多工程细节，需要对用户输入的消息进行预处理，将历史消息、项目文件和系统提示词一起发送给 Claude，在 Claude 返回结果后，要实时将 Claude 返回的消息解析成结构化的数据，并实时输出成代码渲染成网页。
相关文档
- v0 提示词解析说明；关联理由：引用；说明：本文开头直接引用该文，并在其基础上展开“提示词之外的工程实现”。