Codex + Figma：构建前端 UI全流程

效果图展示：​

​

​

从设计开始构建应用​

先打开计划用来构建应用的 Figma 文件。右键点击一个 frame，选择 “Copy as” “Copy link to selection”。​

除了提取设计信息之外，Figma MCP server 中还有许多其他有帮助的工具；务必查阅文档。​

​

​

​

​

50%

​

​

​

​

50%

​

​

从代码回到画布​

当你在代码中迭代了一段时间之后，你通常会希望把设计重新带回画布中，以便比较流程、探索不同方案，并验证自己的假设。​

借助 generate_figma_design 工具，你可以在几秒钟内将一个真实运行中的界面转换成完全可编辑的 Figma frame，以便做更深入的探索和协作。​

首先，你需要先把应用的 UI 渲染出来。这可以通过本地运行完成，也可以通过一个公开可访问的 Web 服务器来完成。然后，让 Codex 帮你生成一个新的 Figma 设计文件。​

接着，Codex 会引导你完成以下步骤：​

​

✅

•

选择创建一个新的 Figma 文件，或者使用一个现有文件。​

•

确定要把这个文件放到哪个 workspace 中。​

•

为应用设置 UI capture。​

•

打开一个新的浏览器会话来访问你的应用。​

​

​

​

​

​

​

​

​

​

​

​

​

​

当应用重新加载后，你会在页面顶部看到一个新的工具栏，其中包含以下选项：​

​

💡

•

Entire screen（整个屏幕）：捕获当前显示的整个屏幕渲染结果，并将其发送到 Figma 文件中。​

•

Select element（选择元素）：选择页面中的某个具体组件或元素进行捕获。​

•

Open file（打开文件）：打开 Figma 文件，检查你新生成的设计图层。​

​

当你完成了所有想要传输到 Figma 的内容之后，你可以选择打开该文件，或者返回 Codex。此时，Codex 会把对应的 Figma 文件 URL 准备好，等着你使用。​

​