原文核对：2026-10-13 · 中文正文 · 英文提示词与演示
场景定位
结合 Build Web Apps 和 Vercel，把仓库、截图、设计或初步想法转成可分享的可运行预览。
- 难度
- 中级
- 时间跨度
- 30 分钟
适合用于
- 把截图、地图、设计说明或初步应用想法变成 Web 预览。
- 无需手动编排 Vercel 命令即可部署分支或本地应用。
- 构建并验证部署后分享线上 URL。
相关工具
根据 React、UI、部署、支付和数据库指南构建、审阅并准备 Web 应用。
Build Web Apps ↗部署预览、检查部署、阅读构建日志和管理 Vercel 项目设置。
Vercel ↗起步提示词
英文原文 · 可复制后按实际材料修改
Use @build-web-apps to turn [repo, screenshot, design, or rough app idea] into a working website.
Then use @vercel to deploy a preview and hand me the live URL.
Context:
- [what the site should do]
- [source data, API, docs, or assets to use]
- [style or product constraints]
- [anything not to change]
Before you hand it back, run the local build and verify the deployment is ready.明确站点和部署目标
Codex 可以构建或更新网站及应用，执行项目检查，通过 Vercel 部署并返回 URL。
提供具体材料：仓库、截图、地图、设计说明、产品笔记、API 文档或数据来源。修改前应先检查项目，默认通过 Vercel 插件部署预览。
构建或完善应用时使用 @build-web-apps；部署、检查部署或阅读 Vercel 构建日志时使用 @vercel。
官方提示词
英文原文 · 可复制后按实际材料修改
Use @build-web-apps to turn [repo, screenshot, design, or rough app idea] into a working website.
Then use @vercel to deploy a preview and hand me the live URL.
Context:
- [what the site should do]
- [source data, API, docs, or assets to use]
- [style or product constraints]
- [anything not to change]
Before you hand it back, run the local build and verify the deployment is ready.分享前检查结果
Codex 应说明修改内容、构建命令和 Vercel 部署是否就绪。如果仍需环境变量、团队选择、域名设置或登录，应明确指出，不能声称已经完成。
生产环境变更需要明确提出。默认是预览部署，确实需要时再要求生产发布。
从线上 URL 继续迭代
预览生成后继续使用同一对话，让 Codex 打开链接、修复布局、更新文案、接入缺失数据，或在失败时读取 Vercel 日志。对话已经保留仓库、部署和构建背景。
后续要求应具体：
- “移动端布局太拥挤，修复后重新部署预览。”
- “使用同一个项目，加入 [来源] 的最新数据。”
- “读取失败的构建日志并修复部署。”
展开英文原文对照
Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app idea into a working preview deployment you can share.
Start with the site and the deploy target
Codex can build or update a website or app, run the project checks, deploy it with Vercel, and return the URL.
The useful handoff is concrete: a repo, screenshot, map, design brief, product note, API doc, or data source. Codex should inspect the project before changing it, then use the Vercel plugin to deploy a preview by default.
Use @build-web-apps when Codex needs to build or polish the app. Use @vercel when it should deploy, inspect the deployment, or read Vercel build logs.
官方提示词
英文原文 · 可复制后按实际材料修改
Use @build-web-apps to turn [repo, screenshot, design, or rough app idea] into a working website.
Then use @vercel to deploy a preview and hand me the live URL.
Context:
- [what the site should do]
- [source data, API, docs, or assets to use]
- [style or product constraints]
- [anything not to change]
Before you hand it back, run the local build and verify the deployment is ready.Check the result before you share it
Codex should tell you what it changed, which command it used to build the project, and whether the Vercel deployment is ready. If the deploy needs an environment variable, team choice, domain setting, or login step, Codex should call that out instead of pretending the site is finished.
Keep production changes explicit. A preview deployment is the default; ask for production only when you mean it.
Iterate from the live URL
Once you have the preview, keep the same chat open. Ask Codex to open the URL, fix layout issues, update copy, wire missing data, or read Vercel logs if the deploy fails. The chat already has the repo, deployment, and build context.
Good follow-ups are specific:
- “The mobile layout is cramped. Fix it and redeploy the preview.”
- “Use the same project and add the latest data from [source].”
- “Read the failed build logs and fix the deploy.”