现在前端圈子里，v0.dev 能直接吐 UI 代码的工具确实挺火的。尤其是写单个卡片、表单或者按钮组的时候，大家基本都会顺手拿它来开个头。
可一旦项目变成多页面、带路由的那种中后台，光靠片段式地让 AI 生成组件，坑就慢慢冒出来了。我拿刚做完的一个“AI 知识库管理系统”当例子，讲讲这类工具到底能用到哪一步，以及怎么跟原型生成工具搭着用。

一、局部组件生成与完整项目开发的冲突

做小东西或者单页的时候，v0 确实爽，一句话扔进去，React+Tailwind 代码就出来了。但项目一旦膨胀到多个路由，例如一个知识库后台，既有数据看板、解析监控，又有对话沙盒、模型对比和 API 设置，麻烦就来了：

• 先说布局，每个页面都单独找 v0 生成，它可不管你这套系统里的导航栏是不是固定宽度、内容区的 padding 是不是统一。结果就是，有的页面左侧留白 24px，有的给 32px；卡片圆角有的用 rounded-lg，有的用 rounded-xl。光是为了把这些视觉细节对齐，就得去翻每个页面的 className，然后抽成统一的常量。
• 再说导航高亮。v0 生成的每个页面都是独立的，它不知道当前路由是哪个，导航栏的激活状态全是写死的。等把它们拼到一起，切换路由时导航高亮死活对不上，最后只能自己写个 useLocation 的 hook 去动态匹配。这本来应该是脚手架一开始就搞定的东西，结果因为每个页面分开生成，全得返工。
• 更烦的是业务字段。比如知识库卡片，有的页面叫 docCount，有的叫 fileNum，还有的直接写 total。等到后端接口给过来，字段名是 document_total，需要在好几个页面里做映射，改完一测，有个页面漏改了，导致数据展示为空。这种问题早期不统一，后面联调的时候特别消耗耐心，改完一个地方又要全局搜索还有没有别处用到了旧字段。

所以后来我意识到，代码动手之前，得先把页面骨架和基础的起手代码定下来，不能每个页面都从零让 AI 随机发挥。

二、先用偏前端的AI原型工具搭骨架

我们当时为了解决这个结构问题，试了试墨刀的 AI 生成原型功能。它好的一点是，给需求描述就能直接吐一整套后台原型，而且连带前端代码一起给。这次的知识库管理后台，就包含了仪表盘、解析监控、模型对比、API 设置这些模块。

在产品阶段，通过简单的需求描述，墨刀 AI 就自动生成了对应的导航结构和页面布局，连图标都给配好了。比如主控仪表盘长这样：

从图中能看出，它给的是标准的后台管理布局：左边深色导航栏固定，右边上半部分是统计卡片，下面是内容列表。顶部的搜索框和「新建知识库」按钮也都预留好了，整体结构挺规矩的。

而在确定了这套 UI 结构后，墨刀给的代码也还算能打，直接拿来当脚手架没问题。像 Dashboard 页面对应的 React 代码结构是这样的：

看代码会发现，Tailwind 的布局类名已经写好了，比如 grid grid-cols-1 md:grid-cols-3，Lucide 图标和基础 UI 组件也都引了。省得自己再去搭一遍栅格、配一遍图标库，挺省事的。

三、多页面怎么协同，代码如何落地？

在一个完整的后台项目中，除了主面板，参数配置、多模型对比这些交互一个都不能少。

例如在模型对比和 API 设置模块中，要处理文本域输入、图表渲染以及密钥列表的渲染。墨刀 AI 也都给生成好了对应的页面结构：

实际开发的时候，我们就直接拿这些生成好的基础代码作底子。光是静态布局和调样式，至少省了一大半时间。

有了这套代码之后，剩下的事就比较好办了：

• 检查组件与路由：看 Dashboard、ModelCompare、ApiSettings 这些文件是不是符合我们自己的项目规范。比如我们习惯把每个页面放在 pages/ 下，公共组件放 components/ui/，墨刀生成的也是类似结构，基本不用大改。
• 替换 Mock 数据接入状态管理：把静态数据换成真实接口，挂上 Zustand。这里有个细节，我们在原型阶段就拿着墨刀生成的界面去和后端对齐过，所以后端的接口设计也参考了页面字段，两边一对照，改动量很小。如果当时直接让 v0 乱生成，字段早就飞了。另外，在 API 设置页面，墨刀生成的示例数据直接放进了 Recharts 的面积图里，我们只需要替换成真实请求就好，连图表配置都不用再调。
• 精细化局部组件：针对某些交互复杂的子组件，比如模型对比页里的打分评价，还有 API 设置里的密钥列表（带复制、删除、隐藏显示），这些逻辑性强的部分，我们再拿 v0 或 Cursor 去精细打磨。比如打分评价那块要动态渲染星星和文字反馈，我就用 v0 生成一个独立的评分组件，再嵌入到墨刀给的页面框架里，配合得很好。

靠着这套流程，这个项目三个人就搞定了。墨刀生成的 UI 原型直接拿给产品确认功能漏没漏，后端根据原型上的字段名去设计接口（避免前端自己编字段）。前端直接把生成的骨架代码放进 git 仓库，每个人拉下来就能看到全局的结构，开发不同模块时也能保持规范统一。整体算下来，开发周期比预估缩短了将近一周。

总结

最后想说，现在的开发环境下，没有一个 AI 工具能包办所有。最好是把它们串起来用：前期用墨刀 AI 把全局原型和代码骨架敲定，解决界面长啥样和全局规范的问题；后期用 v0 或 Cursor 在已有结构上修细节、补逻辑。这样搭配下来，重复劳动少很多，人也能腾出精力去搞真正的业务和架构。另外，不管用哪个工具，一定要先让产品和后端介入确认页面字段，否则生成的代码再漂亮，数据对不上也是白搭。工具只是辅助，真正的效率来自于流程上的合理分工。