找到喜欢的UI模板,怎么让Codex一直按这个风格稳定出图?

上一篇文章里，我分享了怎么通过UI设计Skill，提高Codex设计界面的还原度和稳定性。具体可以看这篇文章：

给了参考图，Codex设计的UI为什么还是很丑？

这篇我们讲一件事：有了自己喜欢的UI模板，怎么让Codex把它变成一个专门设计这种风格的Skill，并且能高质量地稳定出图，不用反复修改。

大家分享一个设计网站，叫即时设计，地址是：https://js.design/workspace

即时设计的资源广场里有很多Web、小程序和App设计模板。可以先根据自己的产品类型搜索，再找一套页面比较完整、设计风格也符合自己需求的模板。

进入设计文件以后，点击左上角菜单，选择“导出——导出所有切片”，切片里有图片、图标和装饰素材

资料准备好以后，把下面这段提示词复制给Codex，并把里面的路径和项目名称换成自己的。

请使用Skill Creator，为我创建一个专门复用这套视觉风格的UI设计Skill。我会提供以下资料：- 完整页面参考图：[填写绝对路径]- 切片、图标和插画资源包：[填写绝对路径]- Skill保存目录：[填写绝对路径]- Skill名称：[填写名称]- 目标平台：[Web / 微信小程序 / App]- 目标画布尺寸：[填写尺寸]这个Skill只负责生成UI设计图和视觉预览，不负责开发正式产品。请先检查全部资料，区分完整页面、UI组件、图标、插画、照片和装饰素材，再直接创建Skill。不要只写一份说明文档。Skill中至少要建立以下内容：1. 设计变量从参考图中提取颜色、字体、字号、行高、间距、圆角、描边、阴影、画布尺寸和安全区。后续页面优先使用这些变量，不要为每个页面临时猜数值。2. 组件库识别多个页面反复出现的顶部导航、按钮、底部常驻操作区、标签栏、内容卡片、输入控件、下拉选择、底部抽屉、弹窗和底部导航等结构，把它们建立成可复用组件。3. 组件状态为每个组件定义尺寸、结构、使用规则、可变内容和状态。例如按钮的正常、禁用、加载状态，下拉选择的未选择、已选择、展开状态，抽屉的列表、表单和操作菜单状态。4. 页面输入格式把页面内容和视觉样式分开。为新页面定义结构化输入格式，用来描述页面名称、内容、数据、组件、状态和交互。设计新页面时复用组件，不重新绘制同类结构。5. 素材清单记录每个原始素材的文件名、用途、尺寸和来源。提供的图标、插画和图片应直接复用，不要用相似素材替换，也不要用图像生成模型重画按钮、文字、表单等UI组件。6. 修改保护规则禁止直接修改最终生成图来掩盖问题，禁止给单个页面增加临时样式补丁。修改共用组件前，先列出所有使用它的页面和状态；修改后重新生成并检查这些页面。7. 验证流程建立快速检查和最终检查：检查画布、对齐、间距、文字换行、遮挡、安全区和组件状态；保留参考图、生成图和对比结果。没有完成实际对比时，不要声称已经像素级还原。创建完成后，请使用这套Skill设计一个新的示例页面，验证它能否复用参考风格。最后告诉我：- Skill包含哪些文件；- 提取了哪些设计变量；- 建立了哪些组件和状态；- 新页面应该怎样提交需求；- 还有哪些信息缺失或需要我确认。请保留原始资料，不覆盖源文件。只使用我有权使用的模板和素材，不要把第三方素材重新打包公开发布。

完成以后，你得到的就不再是一段只能使用一次的提示词，而是一个专门设计这种风格的UI设计Skill。

以后再做新页面，只需要告诉Codex页面内容、状态和需要使用的组件，它就可以继续沿用同一套设计语言。

当然，过程中如果发现它设计出来的图片哪里有问题，就让它改，然后改到你满意了之后，让他把你满意的这个版本也迭代进Skill，它知道怎么做。这样，这个Skill的出图质量就会越来越稳定，越来越高。

好了，大家快去试试吧，祝大家玩得开心。