第一节 将Figma设计转为代码
设置您的Figma项目
您的Figma文件越整洁，首次实现的效果就越好。为提升交接效率：
•
尽可能使用变量或设计令牌，尤其是在颜色、字体排版和间距方面
•
为可重用的 UI 元素创建组件，而非重复使用孤立的图层
•
保持框架和图层命名清晰，使主界面、状态及变体一目了然
准备设计系统
🔔
Codex 在目标代码库已具备清晰的组件层级时效果最佳。Codex 可以自动复用您现有的组件与设计系统，而无需从头重新构建。
如果您认为有必要，请向 Codex 明确说明要复用哪些原子组件、您的令牌存放位置
56%
44%
代码块
YAML
请将 Figma MCP 的输出——它往往看起来像是 React 加上 Tailwind——视为一种结构参考，而非最终的代码风格。请让 Codex 将该输出转化为项目中实际使用的工具函数、组件封装、颜色体系、字体排版尺度、间距令牌、路由方案、状态管理以及数据获取模式。
工作流
从Figma选区入手
请复制指向您希望实现的 Figma 精确帧、组件或变体的链接。Figma MCP 流程基于链接，因此该链接必须指向您所需的精确节点，而非附近的父级框架。
提示Codex使用Figma
应由Figma主导首次迭代。请Codex在开始实施前遵循Figma的MCP流程。
提示中应包含的内容：
代码块
Markdown
1. 首先对目标节点或框架运行 `get_design_context`。
2. 如果响应过大或被截断，可先运行 `get_metadata` 以映射文件，然后仅针对所需节点重新运行 `get_design_context`。
3. 对正在实现的特定变体运行 `get_screenshot`。
4. 只有在设计上下文和确切的变体均已就绪后，才下载所需资源并开始实现。
5. 将结果转化为代码库的规范：尽可能复用现有组件，用项目自身的系统组件替代原始的工具类，并确保间距、层级结构及响应式行为与设计保持一致。
6. 如果 Figma 返回的是本地主机图像或 SVG 源文件，请直接使用。当资源已存在于有效负载中时，切勿创建占位符或添加新的图标包。
提示词模板
代码块
Markdown
请使用 Figma 技能在当前项目中实现此 Figma 设计。
需求：
- 从 `get_design_context` 开始，获取指定的节点或画板。
- 如果响应被截断，请使用 `get_metadata` 获取文件映射信息，然后通过 `get_design_context` 仅重新获取所需节点。
- 在开始编码前，先为指定的变体调用 `get_screenshot`。
- 复用现有的设计系统组件和原子设计令牌。
- 将 Figma 输出转化为本仓库的实用工具与组件模式，而非另行构建一套平行体系。
- 在间距、布局、层级结构及响应式行为等方面尽量保持一致。
- 遵守本仓库的路由、状态管理及数据获取规范。
- 确保页面在桌面端和移动端均具备良好的响应式表现。
- 若 Figma 返回的是本地地址的图片或 SVG 资源，请直接使用，切勿创建占位符或新增图标资源包。
验证：
- 对比最终实现的 UI 与 Figma 原型，在外观与行为两方面均保持一致。