把 Figma 设计变成代码
本页根据 OpenAI 官方
Codex use cases页面重新整理，核对时间为2026-03-30。这里保留原文的任务边界、推荐技能和工作流重点，但改写成更适合课程、工作坊和机构授课的中文版本。
官方原始定位
- 官方标题：
把 Figma 设计变成代码 - 官方难度：
Intermediate - 官方预估时长：
1h - 官方核心说明：让 Codex 先从 Figma 里拉取结构化设计上下文、素材和变体，再按仓库设计系统实现，并用 Playwright 回看结果。
这节课最适合哪些人
- 在已有代码库里实现已经定稿的 Figma 页面或流程
- 希望 Codex 基于结构化设计上下文工作，而不是只看一张截图的团队
- 想把 Figma handoff 讲成稳定工作流的前端训练课
课上应该带学员理解什么
- 这类任务最重要的是“先拿对上下文”，不是“先写代码”
- 官方强烈建议：先
get_design_context，必要时再get_metadata缩小范围，再get_screenshot确认变体 - 如果 Figma 返回本地 SVG 或图片源，优先直接用，不要新造占位图标
官方强调的工作流
- 从精确节点或 frame 开始，先拿结构化设计上下文
- 如果响应太大或页面太复杂，先用 metadata 做结构映射，再只拉需要的节点
- 对目标变体跑 screenshot，再开始实现
- 实现时优先复用设计系统组件和 token，并用 Playwright 与 Figma 继续对照
课堂演示顺序
- 先演示“只给截图”和“给精确节点”的差异
- 再让学员跟着走一遍
上下文 -> 截图 -> 实现 -> 浏览器回看 - 挑一个细节状态让 Codex 修，例如变体、断点或 hover
- 最后总结 Figma 文件该如何准备，才能让 AI 接手得更稳
推荐技能与插件
- Figma：读取节点、上下文、变量、素材、变体，并生成 Code Connect 映射
- Playwright：在真实浏览器里检查响应式行为和最终视觉还原
- 设计系统：把 Figma 输出翻译成仓库已有组件和 token，而不是另起一套实现
课堂版起手提示词
text
请用 Figma 技能把这个节点实现到当前项目里。
要求：
1. 先对精确节点运行 get_design_context
2. 如果响应过大，先用 get_metadata 缩小范围，再只拉需要的节点
3. 开始编码前先对目标变体运行 get_screenshot
4. 复用当前仓库已有的设计系统组件和 token
5. 把 Figma 输出翻译成仓库模式，不要另造平行系统
6. 如果返回 localhost 的图片或 SVG，直接使用，不要新造占位素材
7. 完成后用浏览器对照 Figma 继续迭代课堂验收与交付物
- 一份基于精确节点的页面或组件实现
- 一份设计上下文摘要
- 一份浏览器对照验证清单
讲师讲这节课时最容易踩的坑
- 这页最适合和 Figma MCP、设计系统、组件库课放在一起
- 讲师最好准备一个“脏 Figma 文件”反例，再准备一个“结构清晰”的正例
- 要明确告诉学员：图层命名、变量、auto layout 会直接影响 Codex 结果