要用 MiniMax Agent 把 React+TS 前端和 Supabase 后端打通，完成这个注册表单，基本要按五步来走：①先输入足够精准的提示词，里面要明确带上技术栈关键词；②再确认生成方案里已经覆盖 Supabase 初始化、数据库插入以及页面跳转逻辑；③接着下载工程，并通过 npm run dev 启动；④然后在 .env 中配置 Supabase URL 和 Anon Key；⑤最后测试表单提交，确认 users 表里已经成功写入数据。
想让MiniMax Agent帮你生成带表单提交功能的网页，不是只写个HTML空壳，而是包含前端验证、后端接收、数据库存入、成功跳转全流程的可用代码，必须明确指定技术栈和交互细节，否则Agent会默认输出静态页面。
第一步：在Agent平台输入精准提示词
打开 https://agent.minimax.io/ ，确保已登录账号，进入默认Agent模式。直接在输入框中粘贴以下提示词（复制整段，不可删减）：
「创建一个用户注册表单网页，含姓名、邮箱、密码三字段，前端用React + TypeScript实现，带实时校验（邮箱格式、密码长度≥6）、提交按钮禁用状态控制；后端用Supabase提供Auth认证与PostgreSQL存储，提交后跳转至/success页面并显示用户名；所有代码需分离src（前端）与supabase（后端配置）目录，一次npm run dev可启动完整服务」
【必须包含“Supabase”“React + TypeScript”“跳转至/success”等关键词】 缺少任一技术约束，Agent将退回生成纯HTML+JS静态页，无法真正提交数据。
第二步：确认任务拆解流程再执行
提交后，Agent会先展示High-level Plan，包括：项目结构设计→前端表单组件开发→Supabase Auth初始化→数据库表创建→API路由绑定→跨域配置→本地运行指令。此时页面会出现「确认执行」按钮。
点下确认之前，最好先把 Plan 迅速过一遍，重点看看里面有没有“Supabase client init”“INSERT INTO users”“redirect after submit”这几个关键字样。只要少了其中任何一项，就基本可以判断当前理解还没对齐，这时别急着往下生成，先立即点「重试」，把提示词补完整再继续。
这一步操作起来很简单，直接把文件拖进去就行。
第三步：下载工程包并安装依赖
生成完成后，点击「下载ZIP」获取完整工程。解压到本地文件夹，打开终端进入根目录：
执行：npm install → 等待所有依赖装完（含@supabase/supabase-js、react-router-dom等）→ 再执行：npm run dev
终端输出Local: http://localhost:5173/即表示服务启动成功。此时浏览器打开该地址，表单已可交互。
第四步：配置Supabase环境变量
打开解压后的supabase/.env文件，填入你在Supabase控制台项目设置里复制的URL和Anon Key：
SUPABASE_URL=https://xxx.supabase.coSUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
【SUPABASE_ANON_KEY必须是Anon Key，不是Service Role Key】 用错密钥会导致前端调用401错误，且无任何提示信息，只能重装项目。
第五步：测试提交并验证数据库写入
在本地表单填写测试数据（如姓名“张三”、邮箱“zhang@example.com”、密码“123456”）→ 点击提交 → 页面跳转至/success?name=张三 → 打开Supabase控制台 → 进入Table Editor → 切换到users表 → 确认新记录已存在，且email_confirmed_at为空（因未启用邮件验证）。
若跳转失败但控制台无报错，检查src/App.tsx中useNa vigate()是否被包裹在try/catch内——Agent生成的代码默认已处理，无需手动修改。