https://vincent-blog.top/tags/codex/Recent content in Codex on 文森的科技小站Hugo -- gohugo.iozh-cnvincentshajing@gmail.com (文森的科技小站)vincentshajing@gmail.com (文森的科技小站)© 2026 文森的科技小站Sat, 28 Feb 2026 00:00:00 +0000https://vincent-blog.top/posts/codex-figma/Sat, 28 Feb 2026 00:00:00 +0000vincentshajing@gmail.com (文森的科技小站)https://vincent-blog.top/posts/codex-figma/<h1 class="relative group">使用 Codex 与 Figma 构建前端界面 <div id="使用-codex-与-figma-构建前端界面" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e4%bd%bf%e7%94%a8-codex-%e4%b8%8e-figma-%e6%9e%84%e5%bb%ba%e5%89%8d%e7%ab%af%e7%95%8c%e9%9d%a2" aria-label="锚点">#</a> </span> </h1> <figure><img class="my-0 rounded-md" loading="lazy" decoding="async" fetchpriority="low" alt="Building frontend UIs with Codex and Figma" src="http://developers.openai.com/images/blog/building-frontend-uis-with-codex-and-figma.png" ></figure> <h2 class="relative group">简介 <div id="简介" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e7%ae%80%e4%bb%8b" aria-label="锚点">#</a> </span> </h2> <p>从今天起，你可以通过 Figma MCP server 从 Codex 直接生成 Figma 设计文件。MCP server 支持双向流动：把可运行的界面带到 Figma 画布上，或把画布上的设计语境带回 Codex 以生成或更新代码。这个往返流程让从原型到生产应用的迭代比以往更顺畅。</p> <p>为什么要把 Codex 和 Figma 连接起来？</p> <ul> <li>在设计与开发之间建立单向或双向的自动化桥梁，减少手工重建界面的成本。</li> <li>利用 Figma 的画布做探索与协作，将高保真设计/交互直接映射为可运行的前端界面。</li> <li>实现“从任意位置开始构建”的灵活工作流：设计 -&gt; 代码 -&gt; 画布 -&gt; 代码。</li> </ul> <h2 class="relative group">准备工作与前提 <div id="准备工作与前提" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c%e4%b8%8e%e5%89%8d%e6%8f%90" aria-label="锚点">#</a> </span> </h2> <ul> <li>在本地或线上能运行你要捕获的应用界面（本地 dev server 或公网上的 URL）。</li> <li>在 Codex 桌面应用中安装并配置 Figma MCP server（详情见下方文档链接）。</li> <li>在 Figma 中拥有要采集的文件（Design、Make、FigJam 均支持）。</li> </ul> <h2 class="relative group">从设计开始构建应用（Design → Code） <div id="从设计开始构建应用design--code" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e4%bb%8e%e8%ae%be%e8%ae%a1%e5%bc%80%e5%a7%8b%e6%9e%84%e5%bb%ba%e5%ba%94%e7%94%a8design--code" aria-label="锚点">#</a> </span> </h2> <p>Figma MCP server 的常见用例之一是从 Figma 文件提取上下文并将其用于代码生成。MCP server 能捕获 Figma Design、Make、FigJam 文件中的布局、样式与组件信息，并把这些信息传给 Codex 作为生成代码时的重要上下文。</p>