Codex+Figma+image 生图转前端（含提示词模板）
一、Codex生图并绘制
当自己还没有任何UI的时候，直接利用Codex里已有的image2生图功能再转前端也可以的
已经还原度很高了，然后更新了一下提示词（就是下面超长的这个）
还是把第一张样本图贴给它
50%
50%
代码块
Plain Text
请你在当前项目中，完整复刻我给的参考图（三个手机界面，治愈系冥想 App 风格），并直接落地到代码与可预览页面。
目标：
复刻对象是我上传的那张三联屏参考图（Home / Discover / Profile），不是随意发挥。
要求高还原：布局结构、留白节奏、圆角、阴影、配色、字体气质、卡片层级、底部导航都要尽量贴近。
参考图中的“荷花主视觉”必须复刻，不要用纯占位色块。你可以使用你自带的 gptimage2 生成所需插画/素材（荷花、水面、花草等），并接入页面。
做成“可交互版本”，不是静态海报。
交互要求（至少实现）：
- 底部 Tab 可切换 3 个页面（Home / Discover / Profile）；
- 主要按钮有点击反馈（如 Start Session、See all、Log Out）；
- 进度图表和关键卡片有基础动画（首屏进入动画或数值过渡）；
- 响应式：桌面与移动端都能正常显示。
技术与产出要求：
先分析现有项目结构，再改代码，不要新建无关项目。
优先复用已有组件；样式统一管理，避免重复 CSS。
视觉素材（包含荷花）如用内置的gptimage2 生成，请保存到项目可访问路径并在页面真实引用。
完成后运行本地预览，并做一次自检（布局、交互、样式一致性）。
给我最终结果时请包含：
- 改动文件清单
- 关键实现说明
- 本地预览地址/打开方式
- 与参考图仍有差异的点（如有）
执行风格：
- 直接动手实现，不要只给方案。
- 不需要再问我“要不要开始”，直接做到可预览为止。
然后我让它自己用playwright -interactive做校验
简单理解：如果你用样本图/Figma 负责提供设计上下文，Playwright 负责验证实现效果。
代码块
Plain Text
50%
50%
这个东西它的作用是
代码块
Plain Text
先写前端复刻代码（结构+样式+交互）
它又自己补充去了
它会直接进行校验，对没对齐的地方再次对齐。
等于说让AI真的趴到浏览器里核对。
他发现自己的素材只是svg不是真实图片后又用gptimage2进行生成
然后它自己又开始抠这些组件自己融入到项目里
最终效果如下
横向对比一下已经很像了。
第一张是原图，第二张是它复现的，已经把图片元素融入进去了。
二、塞进figma里进行修改
然后我们把它发送到figma里进一步修改
代码块
Plain Text
把页面推送到Figma中，遵守自动布局，统一文字、间距、圆角等规范：（Figma文件link）
带上figma地址https://www.figma.com/design/ACM32qe0A3BIjTKkf2rYqw/Untitled?node-id=0-1&t=UcaBjeWXzuh70hqx-1
我这边限额厉害，没法给大家演示了，大家可以自己试试。
三、Figma设计文件通过mcp复刻为网页
核心思路很简单：
先让 Codex 读取 Figma 设计上下文，再生成代码，最后用 Playwright 在浏览器里校验效果。
1.准备工作
打开codex，找到设计相关mcp
都点一下安装，一会儿就会用上
后面使用的时候他会让你关联下，直接下一步就行了。
你有哪里不清楚的直接让它解释就行了
可以看到figma mcp这里对它自己的功能的解释。总结起来就是这几样。
回到figma，拿链接
在 Figma 里选中目标 Frame/组件，复制链接
53%
47%
把 Figma 链接发给 Codex，并明确告诉它下面要求
代码块
Plain Text
要求：
先调用 get_design_context 获取该节点设计上下文；
如果内容过大或被截断，先调用 get_metadata 查看结构，再只提取需要节点；
然后调用 get_screenshot 获取准确截图；
完成第一版实现后，使用 Playwright 打开页面进行验证。
这也是当前 Figma MCP Server 在设计到代码工作流推荐的实践流程
第一张是它复刻的，第二张是原图
52%
48%
总体上看在codex直接调用figma的时候最好还能注意到下面几项！