我在之前的视频里分享过 GPT Image 2 做 UI 设计的实际效果，当时的结论是：它生成的 UI 设计可落地性很强，审美也比直接让 AI 写 HTML 代码更好。
基于这个结论，我想进一步验证：GPT Image 2 能不能真正和项目结合，帮我设计新页面的 UI。这里有两个问题要解决：
- 创造力：如果 AI 生图的效果还没有直接用代码写的好，就没有使用的必要；
- 可控性：生图的可控性没有代码强，要保证生成的设计图和原有系统的整体风格一致。比如系统里已经有侧边栏和顶部栏，我希望它只修改某一个页面的设计，而不是每次生成都把整个框架打破。
为了解决这两个问题，我编写了一个 Skill 并完成了多轮测试。结果是：统一提示词无法稳定控制风格，系统参考图可以；参考图只保留外框时，还能给模型留下重新设计内容区的空间。
风格一致：提示词做不到，参考图可以
一致性方面我想了两种思路：一种是控制一段统一的提示词，观察每次生成的结果变化大不大；另一种是直接给模型一张参考图。
我先试了提示词。下面这两张图，左侧栏和顶部栏使用的提示词完全一致，但可以明显看出，两次生成的 UI 设计并不相同。通过提示词去限制风格，这条路走不通。
然后我试了参考图的方式。我给模型一张系统内的参考图，里面包含左侧栏和右侧的一些已有元素，这张图能提供的信息是左侧栏的设计，以及系统内大致的配色。
接下来我用不同的提示词生成了五次。这是其中一张，我让它重新设计 Dashboard 页面，可以看到左侧栏完全没有变化。也就是说，只要有系统里的参考图，模型可以做到保留一部分元素完全不变。这一点和 Nano Banana Pro 差不多，都已经非常稳定了。
不仅是左侧栏，生成结果里按钮和图标的选择、浅紫色的图标背景、线性图标、标签样式，都是直接参考已有图片的风格生成的。提示词本身可以很简单：保持侧边栏与参考图完全一致，再告诉它需要什么样的页面，它就能生成出来。
参考图只保留外框，把内容区留给模型
完整的参考图保证了稳定，但也带来一个问题：它限制了模型在 UI 上的发挥。我的系统本身设计比较素，我希望它能拿出更有设计感的方案。
于是我重新截了一张参考图：左侧的侧边栏保留，右侧完全没有任何内容，只要求它保持侧边栏一致，内容区全部交给它重新设计。
这一次生成的结果，右侧元素的风格可能和系统里原有的不同，但设计感马上就上来了，每一张都比之前更精致。
而且每一版的风格都特别不一样。这种创造力能给我带来灵感：我自己去想的话，很大概率会局限在现有的设计风格里面，跳出这个框架之后，模型能拿出更惊艳的方案。
比如这一版我自己就很满意：整个版面排得紧致但又不会过密，配色也舒服。这样的效果让我们自己手动调整，还是要花一些时间去磨的。
提示词的五个角度
一致性解决之后，下一个问题是提示词怎么写。如果让 AI 把页面布局、排版、配色都在提示词里写死，其实也很大程度上抑制了它的创造力。我一共试了五个角度：
- 叙事视角：把用户的使用过程写成一段旅程放进提示词，而不是罗列页面上要展示哪些信息。
- 内容清单：告诉它页面上需要展示哪些信息，比如需要展示原始的 TikTok 视频资源，但不指定排版，让它自己决定布局和内容组织。
- 类比参考：描述想要的风格像什么，比如像 Notion，或者像一个 Web 产品的风格。
- 用户目标：描述用户看完这个页面之后需要得到哪些结论。
- 情绪描述：只描述整个页面给人带来的情绪。
这些提示词都不需要我们手写，AI 会分析新页面的方向，自己生成提示词。
前四种角度生成的效果都不错。第五种就不太可用了：只描述情绪的时候，模型的幻觉比较严重，它把页面做成了一个海报式的落地页，但我们想要的其实是一个功能页面。
打包成 draw-ui Skill
我把验证过的四种提示词策略包装进了一个 Skill，放在 draw-ui 这个仓库里。
安装方式是把仓库链接发给 AI Agent，或者在终端里执行：
npx skills add oil-oil/draw-ui
安装之后还需要配置一个第三方提供商的 API Key。我用的是 ZenMux，设置为 ZENMUX_API_KEY 环境变量，也可以写在项目的 .env.local 里。想换成 OpenAI 官方或者其他第三方提供商，让 AI Agent 帮忙调整一下就可以。
有了这个 Skill 之后，我们不用自己操心怎么规范 UI 设计的风格，这些知识都已经写在 Skill 里面了：
- 它会先查看代码仓库里现成的设计资源；
- 如果有必要，它会让我们提供一张参考图，就像前面演示的那样，把系统里有代表性的页面截图给它，这种方式效果最好；
- 接下来它使用图生图的方式，结合参考图和对我们需求的分解，按照 Skill 里内置的提示词策略写出新的提示词，生成设计稿。
AI 会自己判断当前场景适合哪个提示词方向，如果我们觉得不满意，也可以让它重新调整。整个流程里最重要的还是让 AI 发挥 UI 设计的创意，落地这一步可以多花时间去磨。