Codex x Figma MCP: 读懂设计稿

适合谁

适合根据设计稿生成页面、检查样式还原或提取设计规范的人。

准备输入

  • Figma 文件链接。
  • 节点 ID。
  • 目标页面或组件。
  • 技术栈。

提示词

请通过 Figma MCP 读取这个登录页设计稿，提取颜色、字体、间距和组件结构。
然后在现有前端项目里实现页面，并用截图对比。

Codex 应该做什么

  • 读取设计节点。
  • 提取 tokens。
  • 实现页面。
  • 用浏览器截图检查。

验证

  • 布局和设计稿一致。
  • 字体、间距、颜色接近。
  • 移动端不溢出。

风险

  • 没有授权。
  • 只实现大概布局。
  • 忽略响应式状态。