今天分享一个Codex与Figma设计用法

近真实工作场景的方法：直接把UI图喂给Codex，让它利用Figma还原成页面。

整体流程三步，先有个全局感

装Figma插件并授权账号，整理好Figma文件，把链接扔给Codex让它还原静态页面。

第一步，把Figma接进Codex

打开Codex，找到左上角的Plugins入口，搜索 Figma，安装，按提示授权Figma账号。

有一个细节值得提前说：授权页面不一定在安装完就弹出来，很可能在你后续让Codex读取Figma文件的时候才出现。如果后面Codex读不到你的文件，第一件事就是确认Figma授权有没有走通，这是最常见的卡点。

第二步，整理Figma文件

生成数字人的Saas后台的界面。

生成下面的UI图。

第三步，UI生成网页

复制要还原的那个画板的链接，回到Codex，用这个提示词开始：

@Figma
请根据这张 UI 截图生成一个尽可能像素级接近的单页 HTML。要求：使用 HTML + CSS，不依赖外部 UI 框架固定画布尺寸为 1440x1024尽量匹配字体大小、颜色、间距、圆角、阴影所有图标用内联 SVG 或 CSS 近似实现文案必须与截图一致输出完整可运行的 index.html

运行结果：

Codex做到一件有实际价值的事：把UI图变成网页，而且整个过程不需要你写一行代码。

以上，既然看到这里了，相信是有所共鸣。随手点个赞、在看、转发三连，想第一时间看到新内容，给我个星标⭐即可。感谢陪伴，文字因你而完整，下次见。