有了 v0 的完整提示词，是不是就能做一个 v0出来了？

有了 v0 的完整提示词，是不是就能做一个 v0出来了？

上次在我发的《v0 提示词解析说明》https://baoyu.io/blog/v0-prompt-explaination 有人问：有了 v0 的完整提示词，是不是就能做一个 v0出来了？ 很遗憾，v0 这样的产品核心竞争力不在于提示词，提示词只是技术实现的一个重要环节，就像冰山一角，底下还有很多看不见的重要技术。 在这里以“帮我实现一个像 http://taobao.com 这样的网站” 为例来解释一下它是如何工作的。

当用户通过聊天窗口发送一条消息：“帮我实现一个像 taobao 这样的网站”，首先 v0 要对消息进行预处理：

  1. 如果包含 url，需要对 URL 进行截屏，以帮助 AI 更好的理解 URL 对应的网页内容、样式

  2. 如果之前已经有历史消息和项目代码，要选取相关的代码和历史消息

最终发送给 AI 的提示器要包含至少三部分：

  1. 系统提示词，也就是原来破解过的1万Tokens v0 系统提示词

  2. 用户发送的消息，包括用户自己提交的附件（例如截图），以及v0客户端帮助从URL抓取的截屏

  3. 历史消息和代码，如果是第一条消息不需要，但是当你对已有项目进行修改时，就需要把历史消息和代码一起发过去了

当然系统提示词起的作用是非常重要，它相当于给 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:

```typescriptreact
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并渲染） &#x20;

Claude 返回的数据被解析后大概如图所示：

Claude 返回的数据主要分成三部分：

  1. 项目结构和代码文件，就是之前示例中的<ReactProject id="taobao-clone"> ```tsx file="components/site-header.tsx" 这样的内容，可以解析出文件路径和文件内容

  2. 文件操作，对现有项目文件的操作，删除、移动等，例如：<DeleteFile file="app/settings/page.tsx" /> <MoveFile from="app/settings/page.tsx" to="app/settings/dashboard.tsx" />

  3. 消息内容，就是代码之外的内容，通常 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 返回的消息解析成结构化的数据，并实时输出成代码渲染成网页。


See all posts