Web 开发

Codex 能与现有设计系统高效配合，并综合考虑约束条件和视觉输入，生成响应式 UI。 当您构建 Web 应用并需要迭代前端设计时，这些使用场景会很有帮助。

从构想到原型

使用 Codex 将初步构想转化为明确的视觉方向，并实现首个原型。

从想法到概念验证

结合使用 Codex 和 ImageGen，将粗略想法转化为视觉方向，实现最小可用原型，并在浏览器中验证该原型。

前端 工程

基于 Figma 构建

使用 Codex 从 Figma 获取设计上下文，并将其转化为遵循代码仓库现有组件、样式和设计系统的代码。

将 Figma 设计转化为代码

使用 Codex 从 Figma 获取设计上下文、资源和变体，将其转化为符合代码仓库设计系统规范的代码，然后使用 Playwright 将实现与 Figma...

前端 设计

迭代 UI

让 Codex 根据视觉输入或提示进行有针对性的更改，并在浏览器中验证所做的更改。

构建响应式前端界面

使用 Codex 将屏幕截图和设计简报转化为符合代码仓库设计系统的代码，然后使用 Playwright 在不同屏幕尺寸下将实现效果与参考素材进行比较，并持续迭代，直至视觉效果符合预期。

前端 设计

进行细粒度 UI 更改

使用 Codex 在现有应用中每次只进行一项小幅 UI 调整，在浏览器中验证，并将聊天窗口弹出到预览附近，以便快速持续迭代。

前端 设计

接手范围明确的 Slack 任务

出现功能请求或有人报告问题时，请在 Slack 中提及 Codex，以便它接手任务并在后台处理。

从 Slack 发起编码任务

在 Slack 中提及 `@Codex`，即可发起与正确的代码仓库和环境关联的聊天，然后返回该话题串或前往 Codex 云端审查结果。

集成 工作流程

部署预览版本

使用 Codex 构建或更新 Web 应用、通过 Vercel 进行部署，并获取一个可分享的在线 URL。

部署应用或网站

在 Codex 中使用 Build Web Apps 和 Vercel，将代码仓库、截图、设计稿或初步的应用构想转化为可正常运行且可供分享的预览部署。

前端 集成

更快交付变更

在 GitHub 中使用 Codex，确保更改可以安全合并，从而加快开发迭代。

审查 GitHub 中的 Pull Request

在 GitHub 中使用 Codex 代码审查，自动将回归、测试缺失和文档问题直接标在 Pull Request 上。

集成 工作流程