从 Figma 到上架：使用 Codex 与 MCP 全流程实现 AI 聊天 App

1. 项目概述与核心流程

本文将详细拆解一个 AI 聊天移动应用从设计到实现的全过程。我们将遵循一个清晰、高效的现代开发流程，利用一系列强大的工具链，将想法快速转化为可运行的产品。核心流程如下：

定义与设计：完成后端 API 设计与 Figma 界面设计稿。
环境与配置：配置 Codex MCP（Model Context Protocol）并创建 Xcode 项目。
文档与引导：撰写详细的 AGENTS.md 文件，为 AI 助手提供完整的项目上下文。
AI 辅助实现：Codex 根据 Figma 设计稿与 API 文档自动生成 App 主体代码。
迭代与优化：进行功能迭代（如添加图片聊天）并完成性能调优。

这个流程的核心在于"人机协同"：开发者负责顶层设计、关键决策和复杂逻辑，而重复性、模式化的编码工作则交由 AI 高效完成。

2. 第一步：完成 AI 聊天 App 后端 API

在开始客户端开发前，一个定义清晰、稳定的后端 API 是项目的基石。我们设计一个典型的 AI 聊天后端，主要包含以下端点：

POST /api/chat/completions: 核心聊天接口，接收用户消息，调用大语言模型（如 GPT-4）并返回流式或非流式响应。
POST /api/chat/with-image: 支持多模态的聊天接口，允许用户上传图片并结合文本进行对话。
GET /api/models: 获取当前可用的模型列表。
WebSocket /ws/chat: 用于实现实时、低延迟的流式对话。

使用 OpenAPI (Swagger) 规范来编写 API 文档至关重要。这份文档不仅是前后端开发的契约，后续也将作为 Codex 理解项目功能的关键输入。

yaml 复制代码

# openapi.yaml 片段示例
paths:
  /api/chat/completions:
    post:
      summary: 发送聊天消息
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/ChatRequest'
      responses:
        '200':
          description: 成功
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ChatResponse'

3. 第二步：完成 Figma 设计稿

UI/UX 设计是产品的门面。在 Figma 中，我们需要创建出高保真的应用界面设计稿，这将成为 Codex 生成前端代码的"蓝图"。关键页面包括：

聊天列表页：展示历史对话。
聊天对话页：核心界面，包含消息气泡、输入框、发送按钮、模型切换器。
图片上传界面：用于"功能迭代"中提到的图片聊天功能，包含图片选择、预览区域。
设置页：用于配置 API 端点、模型参数等。

设计时需注意：

使用规范的命名（如 "ChatBubble_User", "InputBar_Primary"）以便 AI 理解组件。
标注好间距、颜色、字体等设计系统 Token。
导出设计稿时，确保开发模式下可以查看图层结构和样式代码。

最终，我们将得到一个完整的 Figma 文件链接，它和 API 文档一起，构成了项目的"需求说明书"。

4. 第三步：配置 Codex MCP (Model Context Protocol)

MCP 是连接 AI 模型（如 Claude Codex）与外部工具、数据的桥梁。为了让 Codex 能"看到"我们的设计稿和 API 文档，需要配置相应的 MCP 服务器。

核心配置步骤：

安装 MCP 客户端：在开发环境中安装 Claude Desktop 或配置支持 MCP 的 IDE 插件。
集成 Figma MCP 服务器：配置一个 MCP 服务器，使其能够通过 Figma API 读取我们设计稿的详细数据，包括图层、尺寸、颜色值等，并以结构化的方式提供给 Codex。
集成文件系统 MCP 服务器 ：配置另一个 MCP 服务器，让 Codex 能够读取项目目录下的 openapi.yaml、AGENTS.md 等文档。

配置成功后，Codex 就具备了"视觉"和"文档阅读"能力，可以直接基于真实的设计和 API 规范进行开发。

5. 第四步：使用 Xcode 创建项目

在 macOS 上使用 Xcode 创建一个新的 iOS 项目：

打开 Xcode，选择 "Create New Project"。
选择 "App" 模板，设置产品名（如 "AIChatApp"），组织标识符，并选择 SwiftUI 作为界面框架（推荐，因其声明式语法更利于 AI 理解和生成）。
选择存储项目的目录，完成创建。

此时，我们得到了一个包含 App.swift、ContentView.swift 等基础文件的项目骨架。这个干净的项目将作为 Codex 施展拳脚的画布。

6. 第五步：撰写 AGENTS.md

AGENTS.md 是本流程的"灵魂"文件。它是一份写给 AI 助手（Codex）的详细项目指南，包含了所有必要的上下文、指令和约束。

AGENTS.md 应包含：

项目简介：这是一个什么样的 AI 聊天 App。
核心目标：实现基于设计稿和 API 的完整功能。
技术栈：SwiftUI, Swift Concurrency, 网络层使用 URLSession 或 Alamofire。
设计资源：Figma 设计稿的链接或嵌入方式，并说明如何解读。
API 规范 ：指向 openapi.yaml 文件，并概括关键接口。
代码规范：命名约定、文件结构、错误处理方式等。
任务清单：将"实现 App"这个大任务分解为具体的子任务（如：创建数据模型、实现网络层、构建聊天列表视图、实现聊天对话视图等）。

一份清晰的 AGENTS.md 能极大提升 Codex 生成代码的准确性和效率。

7. 第六步：Codex 根据 Figma 设计稿与 API 文档实现 App

这是最具魔力的环节。在配置好 MCP 并准备好 AGENTS.md 后，我们可以向 Claude Codex 发出如下指令：

"请依据本项目根目录下的 AGENTS.md 文件指引，读取提供的 Figma 设计稿和 OpenAPI 文档，为这个 AI 聊天 App 生成完整的 SwiftUI 代码。请按照 AGENTS.md 中的任务清单逐步完成。"

Codex 将会：

读取 AGENTS.md 理解整体上下文。
通过 Figma MCP 服务器获取设计稿的细节，生成对应的 SwiftUI 视图组件（如 ChatBubbleView, MessageInputView）。
通过文件系统 MCP 服务器读取 openapi.yaml，生成对应的数据模型（如 ChatMessage, ChatRequest）和网络请求层代码。
按照 SwiftUI 的生命周期和最佳实践，组合这些组件，构建出完整的页面和导航流。
生成必要的单元测试或 UI 测试骨架。

开发者在此过程中的角色是"审核者"和"连接者"，负责运行代码、调试 AI 可能忽略的边缘情况，并将 AI 生成的模块有机整合。

8. 第七步：功能迭代（聊天添加图片）与调优

基础版本完成后，我们进入迭代阶段。以"添加图片聊天功能"为例：

更新设计稿：在 Figma 中为输入框添加图片附件按钮和图片预览区域。
更新 API 文档 ：确保 openapi.yaml 中包含了 /api/chat/with-image 端点的明确定义。
更新 AGENTS.md：在任务清单中添加"实现图片选择与上传功能"子任务，并描述交互逻辑。
指示 Codex 迭代 ：再次请求 Codex，让其根据更新后的设计稿和文档，修改或新增代码以实现图片功能。Codex 可能会生成图片选择器（PHPickerViewController 封装）、多部分表单上传逻辑以及支持图片显示的消息气泡。
性能调优：功能实现后，进行性能分析。可能包括：优化图片缓存、减少主线程阻塞、优化聊天列表滚动性能、压缩上传图片等。可以指示 Codex 审查代码并提出优化建议，或直接生成优化后的代码片段。

9. 总结

通过"设计先行、文档驱动、AI 编码、人机协同"的流程，我们极大地提升了从概念到产品的开发速度。Figma 和 OpenAPI 文档作为"单一事实来源"，确保了设计与实现的一致性。Codex 结合 MCP 扮演了强大的执行者角色，将静态资源转化为动态代码。而开发者则专注于更高层次的架构设计、逻辑审查和体验优化。

这一模式不仅适用于 AI 聊天 App，也可被复制到许多前端密集型或 CRUD 类应用的开发中，标志着软件工程向更智能、更高效协作方式演进的重要一步。