3天内用自然语言驱动全栈开发族谱系统：Cursor自动生成React+TypeScript+Vite前端与Flask+SQLite后端结构；AI生成带约束的数据模型与CRUD接口；React Query封装API调用并处理错误；D3.js渲染可缩放族谱图；Vercel托管前端、Railway部署后端并挂载SQLite数据库。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想用自然语言驱动全栈开发，3天内从零做出一个可运行、可部署的族谱管理系统，而不是卡在环境配置或接口联调上。
先搭骨架：用Cursor一句话生成项目结构
新建空文件夹 → 在Cursor中打开该文件夹 → 按 Cmd+K（Mac）或 Ctrl+K（Win）唤出Composer → 输入：“用React+TypeScript+Vite搭建族谱管理App前端，用Flask+Python 3.11做后端API，数据库用SQLite，要求所有接口返回JSON，支持CORS，前端路由按成员列表/添加成员/族谱图三页组织。”
等待约90秒，Cursor会自动生成完整目录：src/、backend/、pyproject.toml、vite.config.ts等全部就位，【不需要手动npm init或pip install】。这一步若手动建，至少耗掉2小时且容易漏配Vite别名或Flask静态路径。
定义数据模型：让AI写出带约束的Schema
方法一：在Composer中继续输入：“根据族谱业务，生成Prisma schema（如果用PostgreSQL）或SQLite表结构SQL（如果用本地SQLite）。字段必须包含：id、name、gender、birth_date、death_date、father_id、mother_id、spouse_id、notes。要求father_id/mother_id/spouse_id均为可空外键，birth_date为TEXT格式（ISO8601），并加注释说明每个字段用途。”
方法二：直接在backend/app.py同级新建models.py，对AI说：“写一个Python类Member，用dataclass实现，含上述全部字段，birth_date和death_date类型为Optional[str]，所有ID字段类型为Optional[int]，加type hints和__repr__。”
注意：不要跳过字段注释——后续AI生成CRUD逻辑时，会依赖这些语义信息判断“mother_id是否允许为0”或“notes要不要做XSS过滤”，漏写注释会导致接口返回空字符串却不报错。
连通前后端：自动补全API调用与错误处理
第一步：在前端src/lib/api.ts中，对AI说：“生成一个useMembers hook，用React Query v5，包含getMembers()、addMember()、updateMember(id)三个函数。addMember接收{name, gender, birth_date}对象，自动序列化为JSON并POST到/backend/members；失败时toast提示具体错误信息，不是笼统的‘请求失败’。”
第二步：在backend/main.py中，对AI说：“写一个POST /members接口，接收JSON body，校验name非空、birth_date符合YYYY-MM-DD格式，插入SQLite后返回201和新member对象。若校验失败，返回400和{'error': 'xxx'}。”
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
第三步：回到前端，在addMember成功回调里加一句：navigate(`/member/${data.id}`)。这一步不能省——否则用户点击“添加”后页面没反应，会以为功能坏了。
渲染族谱图：用D3.js轻量集成
在src/components/FamilyTree.tsx中，对AI说：“用D3.js v7渲染树状族谱图，数据源来自useMembers返回的members数组，节点显示name和birth_date，连线用斜线，支持缩放和平移。不用力扣式复杂交互，只要能看清三代以内直系关系。”
AI会生成带useEffect + useRef的组件，但关键要改一处：把d3.select('#tree-container')改成d3.select(containerRef.current)，否则热更新时SVG元素残留导致重绘错乱。
最后在App.tsx里加
一键部署：本地打包+Vercel托管+SQLite只读挂载
执行 npm run build → 进入dist/文件夹 → 把整个dist内容拖进Vercel Dashboard新建项目 → 选择Framework Preset为“Vanilla” → 点击Deploy。
后端部署另走一路：用Railway.app新建Python项目 → 上传backend/全部文件 → 在Settings里把启动命令改为gunicorn -b :8000 main:app → 在Volumes中挂载128MB磁盘，路径设为./db/ → 启动后访问Railway分配的URL，确认GET /members返回[]。
前端通过Vercel环境变量NEXT_PUBLIC_API_BASE设置为Railway后端地址，【不要在代码里写死http://localhost:5000】，否则上线后所有请求404。
