还原 Figma 设计稿
figma · OpenAI通过 Figma MCP 读取设计稿、截图、变量与素材，在现有项目中还原页面。
- 输出
- 项目中的 UI 代码
- 需要
- Figma MCP、文件权限与网页项目
作者独立许可
用途与边界
- 准备什么
- 具体 Figma 画板或图层的链接，以及可编辑的网页项目。
- 运行条件
- 已连接的 Figma MCP、设计文件访问权限，以及能读写项目的 AI 工具。
- 使用边界
- 用于实现已有设计稿，不直接创建新的 Figma 文件。需先确认 Figma 权限与工具连接，并遵循 Figma Developer Terms。
试一个设计任务
技能加载后，复制任务并替换为你的需求。
使用 figma，在当前项目中实现这个画板：[粘贴 Figma 画板链接]。先读取设计上下文和截图，再沿用项目组件、设计变量与原稿素材。完成后对照原稿检查桌面和手机布局；缺少的交互状态先向我确认，不要自行虚构。安装说明
按作者说明获取和安装，遵循 Figma Developer Terms。使用前连接 Figma MCP，并确认设计文件权限。
查看 Figma 连接与使用说明检查结果
- 读取的是指定画板和正确的组件状态。
- 字体、间距与素材和原稿对应。
- 实现后的交互与手机布局可用。