装上Superdesign，立刻让 Codex 变成设计专家

我自己平时做项目，现在主力一直用 Codex 了，因为它的客户端体验很不错。但不知道你有没有也遇到过一个特别尴尬的场景：

当你让 Agent 帮你顺手撸一个好看点的 UI，往往出来的效果让你觉得很不舒服。

经典的深色大卡片、毫无呼吸感的留白，甚至连自己项目原本的主题色和 Logo 都对不上，反正就是感觉非常别扭。

你可能会说："给 Agent 塞点 frontend design 之类的 Skill 不就行了吗？"

我之前也这么以为。但实测下来发现真没那么简单：设计 UI 根本不是纯靠 Prompt 就能搞定的，它深度依赖专门的视觉模型能力、上下文设计资产沉淀，以及反复的微调、对比。

而 Codex 默认的对话框，天生就不是用来做视觉设计的。

直到前几天，我看到了 Superdesign 在 Codex（ChatGPT）里面上架了官方插件。我们之前的文章介绍过 Superdesign，不过都是 Web 平台的形态，没想到这么快就集成到 Codex 里面来了。

官网上一句话总结它的定位：Turn CodeX into a design agent。

我试了一下，把 UI 生成的工作流在我的机器上跑通了。今天就结合我的实测案例，顺便聊聊我对 AI Design 这件事的几点思考。

为什么直接在 Agent 里做 UI 总是做不好？

在看具体怎么用之前，我们先琢磨琢磨这背后的根本问题。

如果你用过各种 Coding Agent 画页面，你一定会发现有几个天然的痛点，如果直接放在 Codex 纯对话流里去做，基本是不可能做好的：

1. 设计资产的沉淀与继承问题

做过正式产品的同学都知道，不管是做 Web 落地页，还是做一些通用的宣传物料、社媒海报，设计从来不是凭空生成的。

它高度依赖你产品现有的设计资产（Design Assets）——比如团队的 Logo、配色规范、排版字体、间距规范、各个 Design Token，甚至是交互动效风格。

普通的 Agent 很难做到这点，你每次都要在 prompt 里费劲吧啦地告诉它"我的主色调是 #xxx，Logo 路径在 public/logo.svg，别给我用紫色渐变"。只要稍微漏了一点，基本就会自己随便发挥，导致效果不理想。

2. UI 的"可探索性"

写代码的逻辑往往是非黑即白的，代码跑通了就是跑通了。

但设计完全不是这么回事，设计是极其主观和强依赖探索的。

面对同一个需求，你通常想看两到三个不同风格的变体（Variant），比如极简风、深色科技风、扁平插画风。看完之后，可能觉得 A 变体的排版好，但 B 变体的 Hero 区域更有冲击力，你想基于某个页面继续微调迭代。

你想想看，如果让 Agent 在本地代码库里去做这种多变体探索，得多麻烦？

你只能让它一遍遍改本地文件，或者用那种极其繁琐的 Git Worktree 切来切去，看效果还得一次次启动本地 dev server，而且去对比不同的效果也很麻烦。

实测：把 Superdesign 接入 Codex

既然 Superdesign 上了 Codex 插件市场，那集成起来就极其省事了，完全不需要在本地折腾什么复杂的环境。

第一步：在插件商店一键启用

打开 Codex 的插件中心，搜 superdesign：

Codex 插件市场搜索 Superdesign

找到 01 Superdesign，点击进入详情页，直接点右上角的「立即试用」：

Superdesign 插件详情

点完之后，Codex 会自动弹出一个浏览器授权窗口，我们在浏览器里点一下授权，整个绑定就完成了。

第二步：双屏联动，右侧画布流式渲染

你在 Codex 左侧对话框里输入你的设计需求（比如"给我现有的项目做一个落地页"）。

这时候 Codex 界面右侧会自动弹出一个内置的 Superdesign 设计画布。

而且它生成的时候是流式实时渲染的，所见即所得。你不用傻等它把所有代码写完再去本地 run build，在画布里就能眼睁睁看着整个页面的布局、排版、卡片一点一点渲染出来。

Codex 与 Superdesign 画布实时流式生成

在生成过程中，我注意到一个非常惊艳的细节：

我全程没有主动交代我的 Logo 放在哪，也没有发过任何配色规范。

但 Superdesign 会在生成之前，自动去扫描和读取代码库里的 UI 资产与品牌风格，把原生的 Logo、调性直接抓取并精准融入到了设计稿里。出来的第一版，整体质感和我们原来的产品风格就是严丝合缝的。

而且从左侧的执行日志可以看到，它直接调用了专用的视觉生成模型（比如 Gemini 3.1 Pro 等），保证了整体版式和代码展示的高水准。

第三步：Agent 自我质检与自动二次迭代

很多生成工具生成完第一版就算交差了，好坏全靠运气。但 Superdesign 的这个插件非常聪明：生成第一版之后，它会让 Agent 自己对生成质量做一次完整的 Code Review 与视觉审查。

你看左侧对话框里的真实记录：

Agent 自检并流式追加更多细节

它自己发现了第一版缺少接入步骤、模型列表和页脚，于是在完全没有人工干预的情况下，自动发起了第二轮优化！

优化后的效果非常显著：补齐了完整的代码演示区域、开发者接入步骤、多模型选择 tab 以及 FAQ，信息层级和细节更加丰富了，最后的页面比较长，在这里就不展开演示了。

第四步：在画布自由微调，一键应用回代码库

当页面在画布里渲染出来之后，它本质上是一个自由节点。

你可以在画布里直接进行多种视觉探索：基于当前节点分叉出不同的设计变体、微调局部文案和组件样式。

等你选定了最满意的那一版，直接在 Codex 里告诉它："就用 xxx 这版，应用到代码库。"

它就会自动把画布里确定的最终代码和样式落到你的本地项目中，整个工作流就全部闭环掉了。

关于 AI Design，我的一些看法

首先，我觉得「设计资产的沉淀」是走向生产环境的必经之路。

很多玩具级的生成工具之所以无法在真实业务落地，就是因为它们是"无状态"的，每次生成对无法感知到业务上下文。

真正的工程级设计工具，第一件事一定是资产感知：你的品牌资产、设计系统、组件库在哪，它就该去哪读。现在比较流行的 impeccable skill 也在朝这个方向在发展。

其次，在设计场景下，画布（Canvas）比对话流更合适。

对话流是线性的，而设计是网状和并行的，各种分支、变体在所难免。如果给 Agent 配备一个无限画布，把各种变体平铺开来供人来直观筛选和审视，这种协作模式对于设计场景来说无疑是体验更好的。

还有，专业的事交给专业工具，不需要所有的事情都交给通用 Agent。

Codex 不需要把自己变成 Figma，Superdesign 也不需要去重写一个底层的 Coding Agent。

通过官方插件系统，把最强的设计模型、画布体验和资产管理能力，无缝嫁接到开发者每天都在用的 Codex / ChatGPT 工作流里。

如果你平时也在用 Codex 写代码，但经常被写前端 UI、做各种页面折磨，强烈建议去 ChatGPT 插件中心装上试一下。直接在 Codex / ChatGPT 插件市场搜索 Superdesign 即可。

你平时用 Agent 写前端，最头疼的是哪个环节？可以来评论区一起聊聊 :）

文章来自于微信公众号 “三元同学”，作者 “三元同学”