前端开发使用AI开发的姿势

---

前端开发逻辑

前端开发主要流程为：
产品需求 → 设计稿 → 界面交互 → 后端开发

---

1. 对于仅使用大语言模型进行对话的用户

• 在 Figma 中切换到 Dev 模式，然后在插件市场中搜索 “Figma to Code” 插件，生成对应的原始代码。
  ※ 注意：生成的代码可能包含绝对定位等样式，且代码风格较杂乱，这与设计师的图层排列有关。

• 将这些原始样式代码转换为项目实际需要的代码（根据项目的代码框架、CSS 格式，比如 CSS-in-JS 或其他方式进行调整）。

---

2. 对于使用 agent AI，例如 Codex 的用户

使用方法

• 将 Figma 中需要生成代码的部分复制为链接，如下图所示：

  

• 使用 Codex 生成对应代码。

配置 Codex 环境变量

如果你在使用支持 OpenAI API 的工具（例如 Codex），需要进行以下配置：

1. Codex 配置文件

在 ~/.codex/config.toml 开头添加以下配置：

model_provider = "crs"
model = "gpt-5-codex"
model_reasoning_effort = "high"
disable_response_storage = true
preferred_auth_method = "apikey"

[model_providers.crs]
name = "crs"
base_url = "xxx" # 你的 OpenAI 地址；如果购买的是第三方服务或使用自建代理，请写入对应链接
wire_api = "responses"
requires_openai_auth = true
env_key = "CRS_OAI_KEY"

在 ~/.codex/auth.json 中配置 API 密钥：

{
  "OPENAI_API_KEY": null
}

💡 注意：将 OPENAI_API_KEY 设置为 null，然后通过环境变量 CRS_OAI_KEY 设置你的 API 密钥（格式例如：cr_xxxxxxxxxx）。

2. 环境变量配置方法

• Windows:

  set CRS_OAI_KEY=cr_xxxxxxxxxx
  

---

3. 后端接口对接

（1）仅使用大模型用户

• 根据后端接口文档、Swagger 等形式的说明，结合你项目中 service 层代码的格式，将信息全部发送给大模型，生成符合项目风格的代码。

（2）使用 agent AI 用户

• 将接口文档、Figma 链接及需求文档等材料一并提供给 agent，由 agent 生成对应代码。

---