在日常做产品的过程中，从零新建一个页面只是很小一部分工作，更多时候我们面对的是一个已经上线的产品：要么需要打磨某个页面的视觉排版，要么需要调整一段不够顺手的交互流程，要么是在不破坏原有风格的前提下塞进一个新功能。
针对这类已有产品的改造场景，我用 GPT-6.1 Sol 模型配合 Oil UI Pro 跑了四个实际改版案例（开源版可见 Oil UI 仓库）。相比从零生成，已有产品的优化更依赖清晰的中间对比产物和受控的迭代边界。
场景一：优化已有落地页，从微调规范到多方向对比
第一个案例是我之前开发的 macOS 本地文件快速检索工具 Oil Find。它的线上落地页虽然已经能用，但我自己看久了觉得有两个问题：一是首屏的下载按钮不够突出，访客很难第一眼注意到下载入口；二是整体排版略显零碎。
我先在 Codex 里直接触发 Oil UI Pro，让它优化现有的落地页设计。这里有一个默认机制：当 Skill 检测到当前项目已经有成型的设计规范时，第一轮不会激进地推翻重来或派生五花八门的风格，而是顺着现有规范做克制的精修。
第一版改出来后，它把原本水平排布的部分文案改成了上下结构、放大了字号，给顶部区域加上了最大宽度限制，并稍微压扁了中间的演示框；往下滚动还能看到它在指标之间补了分隔线、调亮了背景色，并拉开了底部模块的呼吸间距。页面确实变得规整清爽了，但首屏下载按钮不够显眼的问题依然没有解决。
于是我继续在对话框里告诉 Agent：“现在下载的号召力不够明显，出几个不同的设计方向给我看看。”这时 Skill 就会启动多方案探索，并生成一个内置的同屏对比页。
在这个对比页里，第一张固定为原始页面，方便随时切回来对照；切到新生成的第一个方向（“原生发布·下载先行”）时，可以看到它把“下载 macOS 版”按钮放大并摆在了首屏正中央，再把搜索框演示往下移，恰好解决了我的痛点。而后面的两个方向，一个直接删掉了首屏产品演示，另一个把背景改成了纯黑色，改动破坏性太强。有了同屏对比页，我只需要在右侧选中第一个方向，发回给 Codex 即可落地。
场景二：打磨局部组件，把两个设计方向的优点拼在一起
第二个案例是优化 Oil UI 画廊首页的顶部栏和作品筛选栏。原本顶部堆着不同的模型分类标签和两个跳转链接，视觉上既杂乱又缺乏主次。因为画廊首屏卡片背后垫了一层油画质感的背景，我希望顶部栏也能往更有温度、更清新的方向靠拢，于是让 Agent 基于这个意向生成几版对比方案。
在生成的对比页里，切到“01 纸页”方向时，顶部按钮的视觉重量明显减轻了，原本抢眼的胶囊筛选框改成了带平滑滑动动效的下划线标签，整页背景也换成了与首屏油画卡片相呼应的暖白色，视觉重心自然沉到了下方的作品区域。再切到后续方向看，“02 池畔”偏向现代简约，而第三个方向则把顶部做得更轻，并将品牌 Logo 移到了正中间。
当几个候选方案的审美都在线时，就不必非此即彼。我直接把满意的两个方向编号发给 Agent，明确要求：“保留第一个方向的暖白配色，同时参考第三个方向把 Logo 移到中间。”Agent 很快就能按这两条具体指令合成出最终版本。
场景三：改写购买与安装卡片的传达流程
第三个案例是改造画廊首页的 Skill 安装与购买卡片。我原本不太确定这张卡片能不能让初次访问的用户看明白怎么安装、以及为什么要买 Pro 版，于是让 Agent 探索几种更清晰的传达方式。
对比页里给出了三种不同粒度的方案：第一种直接在原卡片上把复制命令的 CTA 按钮加深放大，并在底部补了一行常见疑问解答；第二种做成了左右分栏的完整工作台卡片，左侧按“1 买好 Pro → 2 发给 Agent → 3 确认安装”列出三步流程，右侧则列出 Pro 版相比开源版多出的“老项目改造、多方向评审、任务走查”等具体能力作为购买佐证。在对比页右侧开启“设计说明”开关后，还能直接看到 AI 事先梳理的设计意图、色板和字体层级，方便人随时介入判断。
场景四：在既有设计规范下新增功能并对比 UX 流程
第四个案例是在画廊的作品详情弹窗里加一个新功能。目前访客点开某件作品时，左侧能操作预览、右侧能看原始提示词，但看不到 AI Agent 是怎样一轮一轮把作品打磨出来的。我希望把这个迭代过程展示出来。
因为弹窗的 UI 规范已经固定，Skill 这次生成的三个方案主要在 UX 信息组织上做区分：
- 方案一（侧栏逐轮翻看）：在右侧说明栏顶部新增一个“打磨过程”标签页，按初稿、第 1 轮、第 2 轮、第 3 轮顺序列出每一轮觉得哪里不好、改了什么（例如第 3 轮将右上角原本黑色的进度条改为品牌黄色，并把小鸟移到答对反馈面板旁），点击任意一轮即可在左侧切换对应截图。
- 方案二：把优化轮次放在左侧导航，右侧集中展示修改原因。
- 方案三：考虑到不是所有访客都想看长篇过程，默认将打磨记录折叠起来，只展示最后一轮的改动摘要，并提供“上一轮 / 这一轮”的快捷切换按钮来对比前后差异。
当三个方案难分高下时，也可以先让 Agent 自己评估推荐哪一版。结合我自己的诉求——希望访客能最直观地翻看打磨过程——我最终选定了用标签页切分的第一种方案。
模型越来越强，为什么还需要设计 Skill？
每次分享设计相关的 Skill，都会有同学问两个问题。
第一个问题是：如果底层模型原生设计能力越来越强，这类 Skill 会不会很快就没用了？
如果现有的模型直接对话就能很好地解决你的问题，确实没有必要安装任何 Skill。但好的产品设计很少是一锤子买卖，它本身是一个需要反复比较和推进的流程。我在 Oil UI Pro 里做的大量工作并不是罗列“样式该怎么写”的静态知识，而是把设计过程固化成一套可执行的 SOP：怎么生成带原版对照的中间预览页、在界面上保留哪些设计说明方便人介入拍板、改版前先想清楚要向用户传达什么信息。不管底层模型本身的设计水平高低，这套结构化的对比与收口流程都能帮人更高效地做决定。
第二个问题是：现在的 Oil UI 和我之前开源的 draw-ui 该怎么取舍？
两者的实现路径完全不同：Oil UI 全程让模型直接写代码来做界面设计，不调用生图模型画静态设计稿，落地和后续修改都更直接；而早期的 draw-ui 是先调用图像生成能力较强的 GPT Image 画出视觉设计稿，再通过视觉识别写代码去还原。
对于目前大多数主流模型来说，直接写代码做 UI 的效果已经相当不错。但如果你手头使用的模型本身毫无设计美感，怎么换风格抽卡写出来的界面都很粗糙，那就不适合强行让它直接写代码搞创作。因此我在 Oil UI 里也保留了一条路由规则：当你在实际使用中反复尝试，发现当前模型始终做不出符合预期的设计风格时，它会主动建议你切换到 draw-ui，先借助生图模型补足创意视觉，再让编码模型只负责按图还原。