# Web 开发
根据设计稿和提示词构建响应式 UI。
Codex 非常适合与现有设计系统配合使用,能够结合约束条件和视觉输入生成响应式 UI。 当你在构建 Web 应用并需要迭代前端设计时,这些用例会很有帮助。
从想法到原型
使用 Codex 将一个粗略想法转化为可视化方向,并实现第一个原型。
- https://developers.openai.com/codex/use-cases/idea-to-proof-of-concept
根据 Figma 构建
使用 Codex 从 Figma 提取设计上下文,并将其转化为遵循仓库组件、样式和设计系统的代码。
- https://developers.openai.com/codex/use-cases/figma-designs-to-code
迭代 UI
利用 Codex 根据视觉输入或提示词进行有针对性的更改,并让它在浏览器中验证其工作结果。
- https://developers.openai.com/codex/use-cases/frontend-designs
- https://developers.openai.com/codex/use-cases/make-granular-ui-changes
承接范围明确的 Slack 任务
当有功能请求或已上报的问题时,在 Slack 中标记 Codex,这样它就能接手该任务并在后台处理。
- https://developers.openai.com/codex/use-cases/slack-coding-tasks
部署预览
使用 Codex 构建或更新 Web 应用,借助 Vercel 部署,并返回一个可分享的在线 URL。
- https://developers.openai.com/codex/use-cases/deploy-app-or-website
更快交付更改
在 GitHub 中使用 Codex,确保更改可以安全合并,从而加快开发迭代循环。
- https://developers.openai.com/codex/use-cases/github-code-reviews
本合集中的使用场景

从想法到概念验证
使用 ImageGen 以可视化方式探索概念,并构建你的想法的第一个版本。
前端工程

将 Figma 设计转成代码
将 Figma 选区转化为精致的 UI,并结合结构化设计上下文和视觉检查。
前端设计

构建响应式前端设计
将截图和视觉参考转化为响应式 UI,并通过视觉检查进行验证。
前端设计

进行细粒度 UI 调整
在现有应用中使用 Codex-Spark 进行快速、聚焦的 UI 迭代。
前端设计

从 Slack 发起编码任务
将 Slack 线程转化为范围明确的云端任务。
集成工作流

部署应用或网站
构建或更新 Web 应用,部署预览版本,并获取在线 URL。
前端集成

审查 GitHub pull request
在人类审查之前发现回归和潜在问题。
集成工作流