V0 项目转换规范用于将 V0 生成的 Next.js 项目快速转换为本项目页面组件,在保持视觉效果和功能的前提下,使其符合本项目开发规范。核心目标包括:保持页面视觉一致性、移除 Next.js 特有实现、产出可在本项目中运行的页面组件。
使用方式分为两步。第一步运行预处理脚本:
node scripts/v0-converter.mjs <v0-project-dir> [output-name]
例如:
node scripts/v0-converter.mjs "temp/my-v0-project" my-page
脚本会自动完成:完整复制 V0 项目到 src/prototypes/[页面名]/;分析项目结构(路径别名、Next.js 代码等);生成 AI 工作文档 .v0-tasks.md;生成详细数据 .v0-analysis.json;不修改任何代码。
第二步按任务清单完成转换。脚本生成的 .v0-tasks.md 包含项目概况统计、6 个具体任务清单、路径别名转换参考表、依赖安装命令与验收测试步骤,需按任务清单与本规范示例执行转换。
转换要点方面,本项目页面组件规范为:默认先转换为普通 React 页面组件,仅在需求明确要求接入 Axhub / Axure 运行时能力时,才引入 forwardRef<AxureHandle, AxureProps>、useImperativeHandle 和 axure-types。默认格式为导出默认函数组件并引入 ./style.css;Axure 接入场景需参考 /rules/axure-api-guide.md 使用包装形式。
需移除所有 Next.js 特定实现,包括 "use client" 指令、next/navigation 的 useRouter、next/image、next/link、Metadata 类型与 Vercel Analytics,并分别替换为删除、使用 img 与 a 标签等。其中 "use client" 必须删除,否则会导致语法错误。
路径别名需从 @/ 转换为相对路径,脚本生成的分析报告会提供每个文件的具体转换参考。样式文件 style.css 必须以 @import "tailwindcss"; 开头,随后保留原 globals.css 内容并保持 Tailwind V4 语法不变,同时检查 CSS 变量完整性。依赖管理上,需排除 next 及所有 next-* 包、@vercel/* 包、react 和 react-dom;保留 class-variance-authority、clsx、tailwind-merge、@radix-ui/* 组件、lucide-react、recharts、date-fns 等,缺失依赖用 pnpm add 安装。
验收阶段运行 node scripts/check-app-ready.mjs /prototypes/[页面名],要求状态为 READY、页面正常渲染、无控制台错误、交互功能正常、样式显示正确。常见问题涵盖依赖缺失、路径错误、样式问题与 Next.js 残留,可参考 .v0-analysis.md 转换表及 /rules/development-guide.md、/rules/debugging-guide.md 等资源。