不知道做什么、
回答两题就开工
KICKOFF RADAR
学 vibe coding 最难的不是写代码,是「做什么」和「卡住了怎么办」。回答 2-3 个问题,我替你挑 1 个今天能做完的项目,把分阶段的现成 prompt、「做到什么算完成」和「你会在哪卡住」一次给你——粘贴第一段,AI 就开始建。
11
套开工套件
33
段现成 prompt
15
条卡坑急救
30s
帮你挑
答 2-3 题,我替你定 1 个 —— 不让你在一堆里挑花眼① 你想做点什么
② 你的经验
③ 你有多少时间
先选上面任意一项
ALL
自己挑
11 个都在这,点开就是整套开工套件SOS
卡住急救
新手最常撞的 15 个坑 · 症状 → 解法💡 元技能:静默失败是常态。先打开浏览器 Console,判断是哪一层崩了(构建 / 运行时 / 部署 / 数据),再让 AI 修——这一个习惯能解掉下面一半的坑。
部署后白屏,啥也不显示(本地正常)
JS 运行时报错中断了渲染,或子路径部署 base 路径错 → 开 DevTools Console 看真错;子路径在 vite.config 设 base(根用 /)
Tailwind 样式完全不生效
v4 用了 v3 老配法(缺 @tailwindcss/vite,或还在用 @tailwind 指令) → 装 @tailwindcss/vite 加进 plugins;CSS 写 @import "tailwindcss";
Next.js 报 window is not defined
服务端渲染时用了浏览器专属 API → 移进 useEffect,或 typeof window !== 'undefined' 守卫,或标 'use client'
Hydration mismatch 报错
服务端与客户端渲染不一致(Date.now / 随机 / 插件改 DOM) → 让渲染确定化或推迟到 useEffect;改完出现就 rm -rf .next && 重启
环境变量上线后 undefined(本地正常)
host 没配这些变量,且 Vercel 加变量不会自动重部署 → 在 host dashboard 加全部变量再 Redeploy;前端变量要带 NEXT_PUBLIC_ / VITE_ 前缀
收到「密钥泄露」邮件,或 key 出现在网页源码里
key 硬编码进前端,或 .env 在写 .gitignore 前就被提交 → 立刻吊销 key(git 历史永久留存),密钥移到后端 env,先建 .gitignore + .env.example
Supabase 查询成功但返回空数组 []
RLS 静默拒绝(开了 RLS 没匹配的 SELECT 策略) → 加正确 RLS 策略(读用 USING / 写用 WITH CHECK);新表默认全拒直到加策略
Supabase 401 / 报 No API key
用错/缺 anon key,或在浏览器用了 service_role key → 客户端用 project URL + anon(public)key;service_role 只在服务端用
报 CORS policy blocked
前端跨源调 API,对方没返回 Access-Control-Allow-Origin → dev 用 Vite server.proxy;或经自己后端转发(server-to-server 无 CORS)
刷新 / 直链页面给 404(应用内跳转正常)
host 做服务端路由,该路径无对应文件 → Netlify 加 public/_redirects:/* /index.html 200;Vercel 加 rewrite 到 /index.html
手机打不开本地开发服务器(电脑能开)
Vite 默认只绑 localhost → npm run dev -- --host;手机连同一 WiFi 开 http://<电脑局域网IP>:5173(关 VPN)
报 Port already in use / EADDRINUSE
上一个 dev server 进程没关(关标签页 ≠ 关进程) → npx kill-port 5173,或 lsof -i :5173 再 kill -9 <PID>,或换端口
报 Module not found / Cannot find module
AI 幻觉了一个不存在/改名的 npm 包,或没装 → 装前先在 npm 上确认包真实存在;npm install <pkg>;不存在让 AI 给真实包名
页面卡死、Console 刷屏、风扇狂转
useEffect 更新了自己依赖里的 state(自触发),或渲染中 setState → 修依赖数组 / 把更新移出渲染路径,使其不自触发
调 LLM API 报 429 / insufficient_quota
没充值 / 没开 billing(insufficient_quota,区别于限速) → 在 provider dashboard 充值 / 开 billing(新账号最长约 24h 生效);限速则加 retry/backoff