BAIZE AI RESOURCE

AI 界面设计 Skill

Oil-ui

Oil-ui 是供 AI Agent 使用的界面设计 Skill，适合制作网站、App、后台和组件界面。它先呈现不同的视觉方向供用户比较选择，再根据反馈和实际页面截图调整设计，减少只换配色却难以做出选择的问题。

获取资源
Oil-ui

资源介绍

Oil-ui 面向需要设计新界面、比较视觉风格或评审页面的用户。你可以把产品需求、品牌资料、现有页面或参考截图交给已安装该 Skill 的 Agent。探索新设计时，它会先制作风格不同的首屏，放到同一个对比页；你选定方向并说明喜欢或不喜欢的地方后，Agent 再继续完善页面。对比页可展示 HTML、图片或运行中的页面，并支持切换电脑和手机尺寸。它也可按截图还原界面，或只评审现有页面并给出修改建议。设计完成后，流程会结合实际截图检查画面效果；纯业务逻辑、接口和没有可见界面变化的代码整理不属于它的用途。

Skill 能力

探索不同设计方向

为新界面制作视觉差异明显的首屏方案，让用户在确定完整页面前比较版式、字体、配色和主视觉。

同页比较与选择

把 HTML、图片或运行中的页面放进风格对比页，支持切换电脑和手机尺寸；用户选定方案后可将选择结果交给 Agent 继续制作。

根据实际画面调整

在电脑和手机尺寸下查看页面截图，依据真实呈现效果检查视觉层级和布局问题。

截图还原与界面评审

可依据参考截图还原页面；也可只评审现有界面，指出问题并提出修改建议，而不改动文件。

资源配置

适用平台

通用 Agent

支持模型

模型无关

调用方式

Agent调用自动触发手动调用

安装与调用

  1. 请支持安装 Skill 的 Agent 安装 https://github.com/oil-oil/oil-ui，或在终端运行 npx skills add oil-oil/oil-ui；安装后无需额外配置。

  2. 向 Agent 说明要设计或评审的页面，并提供已有的品牌资料、截图或项目。

  3. 探索新界面时，查看 Agent 制作的首屏对比页，选定喜欢的方向并反馈具体意见，再让它继续完善页面。

使用案例

课程预约页面选风格

使用场景产品负责人要为课程预约产品设计新页面，但尚未确定视觉方向。

向 Agent 描述产品和目标用户，使用 oil-ui 制作不同风格的首屏并放入对比页；负责人选定一款后，继续完善页面。

依据截图还原页面

使用场景设计师已有页面截图，需要制作对应界面并补充手机布局。

将参考截图交给 Agent，说明需要还原页面和适配手机尺寸；oil-ui 以截图为视觉基线推进设计。

只评审首页

使用场景团队想了解现有首页的视觉问题，暂时不希望改动文件。

请 Agent 使用 oil-ui 评审首页并说明修改建议，同时明确要求只交付评审结果、不修改文件。

包含内容

oil-ui-source.zip
README-中文安装说明.md
LICENSE-MIT.txt
SHA256.txt

常见问题

安装 oil-ui 后需要配置吗？
不需要。可让支持安装 Skill 的 Agent 安装仓库地址，或运行 npx skills add oil-oil/oil-ui；安装完成即可向 Agent 描述界面任务。
风格对比页能放入哪些内容？
可以放入 HTML 文件、图片或正在运行的开发页面，也可以把当前版本放在第一位作为对照；页面支持切换电脑和手机尺寸。
Oil-ui 适合处理不涉及界面变化的代码任务吗？
不适合。它聚焦界面设计判断、视觉调整和评审，不用于纯业务逻辑、接口、构建部署或没有可见界面变化的代码整理。
风格对比页生成器需要什么运行环境？
可选的对比页生成器需要 Python 3.10 或更高版本；生成的页面使用现代浏览器即可查看。