figma-to-nextjs-migration

name

figma-to-nextjs-migration

description

把 Figma Make / v0.dev / Bolt / Lovable 等 UI 原型生成器产出的 Vite + React Router 项目， 搬家（迁移 / 搬运 / 换成 / migrate / port）到 Next.js 15 App Router 生产脚手架。覆盖路由 迁移（react-router → next/link + next/navigation）、样式系统合并（globals.css + @theme + @custom-variant dark）、字体切换（@import Google Fonts → next/font/google）、客户端组件 标注（"use client"）、Hydration mismatch 修复（seededRandom 替换 Math.random）、shadcn/ui 组件库复用、路径别名统一（~/ → @/）。典型触发场景：用户说"把 Figma Make 项目换成 Next.js"、 "v0.dev 出的代码怎么部署"、"Vite 项目跑不了流式 API / 服务端组件 / Edge Runtime"、 "React Router 搬家到 App Router"、"Bolt / Lovable 出的原型怎么改造成能上线的项目"。 Make sure to use this skill whenever the user mentions Figma Make, v0.dev, Bolt, Lovable, Vite, React Router, Next.js, App Router, 搬家, 迁移, migrate, port, 流式 API, 服务端组件, Edge Runtime, 部署, 即使用户没有明说"请用 figma-to-nextjs-migration skill"。 不处理反向迁移（Next.js → Remix / Next.js → Vite / App Router → Pages Router）。

figma-to-nextjs-migration — UI 原型到生产脚手架的工程化迁移

触发条件

这个 Skill 要在以下对话里被加载：

• 用户提到 Figma Make / v0.dev / Bolt / Lovable 等 UI 原型生成器，并希望把产物用到正式项目
• 用户手里有 Vite + React Router 的项目，想换成 Next.js 15 App Router
• 用户说"搬家"、"迁移"、"换成"、"migrate"、"port"、"改造"这类动作词
• 用户诉苦 Vite 项目"跑不了流式 API"、"做不了服务端组件"、"没法部署到 Vercel"、"Edge Runtime 不支持"
• 用户说"React Router 搬到 App Router 怎么弄"

不触发的场景：

• Next.js → Remix / Vite / Astro 等反向迁移
• Next.js 内部的 Pages Router → App Router 迁移（那是另一回事，不在本 Skill 覆盖范围）
• 纯 Tailwind 升级 / 纯 shadcn 组件替换等局部变更

---

核心心智模型（先讲清楚，再干活）

用户拿着 Figma Make / v0.dev 出的 Vite 项目过来的时候，心里常常有一个误解： "这是个能接着往下做的脚手架"——不是的。

• Figma Make / v0.dev / Bolt / Lovable 是"UI 原型生成器"，不是"脚手架生成器"
• 它们的定位是设计参考和视觉验证，不是生产项目的起点
• 所以"搬家"不是返工，不是因为工具做错了——这是工程化的必经之路
• 阶段一（UI 原型）的产出 ≠ 阶段二（工程化）的起点，两者是接力关系