代码写好后看不到效果，常见原因不是 Claude 没写代码，而是服务没启动、打开了错误端口、环境变量缺失，或页面路由不对。预览要先确定项目自己的启动方式。
找出真实启动命令
让 Claude 只读 package.json、README 和框架配置，找出启动命令、端口和所需环境变量。先从 package.json 或项目文档确认真实启动命令，不要默认所有项目都是 npm run dev。
启动并保留终端输出
# 示例，实际以项目为准
npm ci
npm run dev记下终端显示的本地 URL。若端口被占用，不要随意结束陌生进程；先查进程归属或接受框架分配的新端口。
三层核对
- 可见结果：文字、布局和加载状态是否符合需求。
- 控制台：是否有 JavaScript 错误、资源 404 或跨域失败。
- 交互与尺寸：按钮、表单、键盘操作及窄屏是否可用。
预览至少检查可见结果、浏览器控制台和关键交互，并保存失败截图或报错。发现问题时把精确 URL、步骤、控制台错误交给 Claude，要求只修相关范围。
构建复核
本地开发服务器正常后，再运行项目已有的生产构建和测试命令。本地预览不代表生产构建、鉴权、缓存和真实接口都正常。
数据和路由也要检查
页面外观正常后，分别测试直接打开深层路由、刷新页面、空数据、接口失败和加载状态。使用假数据时在验收记录里注明，不能把占位返回当真实接口成功。若项目依赖登录，使用测试账号和隔离环境，禁止把生产令牌写进前端环境文件或截图。
资料与适用范围
启动与迭代方法参考 官方常用工作流，VS Code 使用参考 IDE 集成文档。示例未在你的项目运行，端口与命令需从仓库核实。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/30888.html
