Oil UI

Oil UI 是一款专为 AI Agent 打造的界面设计技能。工具主打多方向差异化设计，可同步生成多套视觉风格完全不同的界面方案，支持同屏对比筛选、精细化打磨优化。适配网站、移动端App、后台系统、功能组件等全品类界面设计场景，最终输出标准化设计文档、高清设计稿，以及可直接运行的前端界面，并配套完整截图用于视觉评审核验。

标准化设计流程

Oil UI 搭载一套严谨、可落地的专属设计工作流，规避模糊化的风格定义，让AI Agent的界面设计有据可依、可控可审。

工具启动设计前，会先判定产品品类属性，对标行业内高辨识度同类产品，梳理可复用设计逻辑与需要优化革新的设计细节。结合产品题材、受众群体与品牌调性，敲定整体视觉基调，将简洁、高级等抽象风格，精准转化为字体规范、留白比例、色彩分布等具象视觉参数。

所有设计方案均依托材质、场景、角色等具象元素创作，摒弃模板化套用逻辑。同时区分页面使用场景，内容型、操作型页面优先展示核心内容，营销型页面优先搭建版式框架，再配套撰写适配文案。

为保障方案差异化，Oil UI 设置严格设计约束。版式、字体、配色、主视觉四大核心元素，两套设计方案最多仅可保留一项一致。方案相似度过高时，会直接重构版式结构，不依靠简单换色敷衍调整。

设计全程遵循克制化原则，不堆砌视觉效果，仅在交互反馈、状态动画、特殊页面等关键位置打造记忆点，其余界面保持简洁规整。方案初稿完成后，统一汇总至对比页面，由用户筛选偏好、提出修改意见，Agent针对性迭代优化。

最终成品会经过多尺寸适配核验，覆盖电脑、手机端显示效果，搭配人工评审排查问题。最后完成页面精简优化，单页聚焦一个核心内容，剔除冗余元素，保证界面干净易用。

完整安装方法

Oil UI 以技能插件形式轻量化部署，安装流程简单、无需复杂配置，适配各类支持Skill安装的AI Agent。

1. Agent快捷安装
   直接向AI Agent发送指定仓库地址，即可自动完成安装部署：
   请帮我安装这个 Skill：[https://github.com/oil-oil/oil-ui](https://github.com/oil-oil/oil-ui)
2. 终端命令安装
   在项目终端执行一键安装指令，快速接入工具能力：
   npx skills add oil-oil/oil-ui

工具安装后零配置即可直接使用，版本更新时，AI Agent会自动弹窗提醒，用户可随时指令一键更新。

同时存在重要适配规则：设备已安装 Oil UI Pro 专业版的情况下，无需重复安装开源版，双版本同时启用会出现请求抢占、功能冲突的问题。

实操使用场景与指令

用户无需复杂配置，直接通过自然语言下达设计指令即可适配全场景需求，支持全新设计、界面优化、截图还原、纯视觉评审等多种使用方式。

常用实操指令包含：为产品探索多套差异化设计并生成可预览页面、制作多字体多配色的对比设计方案、基于现有设计规范精修页面、根据截图完整还原界面并补充移动端布局、仅评审页面问题并输出修改方案等。

用户可同步上传品牌资料、参考截图等素材辅助设计，无参考素材时工具可自主创作，仅在需求模糊时主动确认交付标准。

配套生态工具

Oil UI 拥有两款同系列专属Agent设计工具，形成界面设计、视觉还原、交互动效的完整链路。

draw-ui 专注AI界面落地还原，主打简约现代设计风格，可完成界面层级优化，同时将设计图、截图精准转化为标准HTML、CSS代码，适配前端项目与微信小程序开发。

Oil Motion 是专属交互动画技能，负责界面动态效果设计、帧动画生成、素材优化压缩，可将动画效果绑定滚动、点击、拖拽等用户操作，自动完成全流程落地开发。