挺久没更新了，分享一下最近使用v0、bolt、replit、mgx这种一句话生成前端的工具。如何高效节省使用次数生成优质UI，实现零成本部署前后端。 如果你cursor账号可以用claude4，这篇可以不用看了。
平时使用Cursor普遍都是将想法喂给chatgpt生成提示词，这种前端生成页面与cursor不同，尽量不要给过多的提示词，提示词越简单生成的内容越准确。
如果只是轻量项目或者学习，建议使用v0.dve v0默认调用的是Next.js，bolt上限后可以将项目导入v0、cursor或者windsurf哪怕是trae的deepseek也可以快速优化项目。
bolt和replit每天的token有限，提示词过长可能一两条就没了，虽然v0也有限制但一个账号100条信息。当然取决于你的项目需求bolt支持挺多框架的react、vue、angular等。
下面是零成本方案，不需要购买服务器
v0.dve部署流程：
v0.dve→vercel + supabase
bolt.new部署流程：
bolt.new→GitHub→vercel + supabase
v0生成前端页面，部署到vercel，添加域名即可访问，如果项目有前后端分离需求，可以让v0配置supabase或者firebase，v0默认supabase，前端的登录注册我用的是谷歌的firebase，supabase需要自己配置邮箱。
使用AI生成前端的一点小技巧：
- 生成前端一定要把风格先确定下来，UI风格生成出来再去喂功能是最高效的。选项好风格后。再考虑加内容，不要像cursor一次喂满，后面修改只会浪费token。
- 1，UI风格选择
- 2，是否需要登录注册或者后端服务
- 3，页面功能优化
因为v0账号全用空了，整篇实操用的都是bolt，bolt是根据行数消耗token，项目大可能几次就用完了，但是每天有免费使用次数。可以拿来练手再去v0
写一个Plastic U风格页面
写一个Plastic U风格页面，页面文字使用中文。
同一个提示词加不加中文UI的效果其实差不多，不加后端修改页面和按钮基本就可以部署了，如果不想浪费token可以手动到Code里手动改页面。
关于supabase后端配置：
SUPABASE_URL=https://jclooklookakanytay.supabase.co
SUPABASE_ANON_KEY=你的匿名公钥（Anon Key）
URL | anon public
只需要URl和公钥,密钥不要放在前端。
提示词：
创建一个完整的注册登录页面
- 注册登录按钮放置顶栏右上角
- 注册登录按钮交互UI风格与主页保持一致
配置好Supabase（ SUPABASE_URL 和 SUPABASE_ANON_KEY）
SUPABASE_URL=
SUPABASE_ANON_KEY=
灵活添加提示词：
- 第二次生成页面的没有登录，加一个提示词让它将登录放置右上角
- 注册登录按钮放置顶栏右上角
- 用户输入邮箱密码提交后完成注册
- 注册完成后跳转登录账号
用户注册账号后，端有记录证明已经配置完成，优化前端页面部署GitHub或者vercel配置域名整个前后端流程就走完了。
- 复杂一点的项目比如添加图片、链接、评论留言等，告诉AI配置好后根据它的提示，将规则手动添加到supabase，v0是可以帮你配置好的但是bolt不确定。
- Supabase可以通过cloudflare配置cdn脚本，当然也可以用国内的后端，自己有服务器是最优解。
UI风格选择：
Neumorphism | 新拟态 |
Glassmorphism | 玻璃态 |
Glassmorphism | 粘土态 |
Skeuomorphism | 拟物态 |
Futuristic Minimal | 未来简约 |
Monochrome Minimal | 极简黑白 |
关于图标库：
1. Cyberpunk+react-icons、
2. UI+图标库
react-icons | 收集众多图标库 | 适合杂合项目 |
lucide-react | 极简线性风格 | 开箱即用 |
heroicons/reac | Tailwind官方图标 | Dashboard风格 |
phosphor-react | 风格图标风格多 | 适合设计要求较高的项目 |
tabler-icons-react | 类似 lucide | 轮廓风格也很优秀 |
图标库其实可以不用选，自己添加图标库或者使用AI给的提示词，需要自己判断图标库没有cdn加速。
关于元素删除页面内容修改：
不要使用复杂的提示词，越简单越高效，选择需要输入修改的区域，
1，
删除不想要的内容
：delete/删除/移动
2，修改文本图片内容输入对应内容，txt,icon,png,jpg
3，修改容器和布局，container，wrapper，layout
修改添加内容：越简短生成内容越准确
最近深度参与了几个项目，接口调用模型训练，卷完发现好像没什么必要。huggingface上模型更新频率迭代速度太快了。