Oil UI Skill 安装与 AI UI 设计指南

Oil UI 是给 AI Agent 使用的界面设计 Skill。它把设计方法交给模型，帮助你从任务和内容出发，探索不同方向，再通过实际页面逐步打磨界面。画廊里的案例保留了制作模型和任务提示词，可以先看效果，再用自己的项目试一遍。

1. 安装免费的开源版

在终端运行下面的命令，按安装器提示选择你正在使用的 Agent 和安装范围。也可以把命令发给 Agent，让它协助安装。各个 Agent 的 Skill 加载方式可能不同，安装后确认它能读取 Oil UI；完整说明见开源仓库。

npx skills add oil-oil/oil-ui

说明产品是什么、谁会用、用户要完成什么，再提供真实内容、页面范围和现有技术约束。改造已有项目时，告诉 Agent 哪些业务行为需要保留。清楚的任务比堆叠风格词更容易形成有用的设计。

用 Oil UI 为我的预约工具设计首页。用户是小型工作室的顾客，主要任务是选服务、查看可约时间并预约。先提出几个不同的设计方向，沿用当前技术栈，保留已有预约流程。

让 Agent 把不同方向并排展示，结合真实内容比较信息层级、字体、布局和主要操作。选定一个方向后继续打磨。可以参考画廊里的提示词，但要换成自己产品的内容和约束。

用实际页面检查首屏、长内容、手机布局和关键操作，补齐加载、空内容、错误等当前任务会遇到的状态。截图能帮助比较设计细节，真正的点击与输入才能确认交互是否可用。发现问题后，把具体页面、操作和结果反馈给 Agent。

Oil UI Pro 覆盖交互与状态、屏幕适配、老项目改造、多方向评审和任务走查。可以在 Pro 页面购买，也可以让 Agent 运行安装命令，协助你登录、付款和安装。开源版与 Pro 的效果都取决于所用模型的能力，建议先拿真实任务试用开源版。

npx github:oil-oil/oil-cli install oil-ui-pro

Oil UI 是组件库还是模板？

它是 Agent 读取的设计 Skill，提供设计方法与工作流程。它不会固定你使用某一套组件或模板；具体页面仍由 Agent 结合项目约束实现。

为什么同一个 Skill 的案例效果不一样？

案例的任务、模型和打磨轮次不同，结果也会不同。每件作品都标明制作模型，打开后还能查看任务提示词。Skill 可以帮助模型发挥已有能力，但不能保证所有模型都达到同样的设计水平。

能用它改造已有产品吗？

可以从一个具体页面或任务开始，先说明要保留的业务流程、真实数据和技术约束，再让 Agent 提出方向。选定方向后验证完整任务，尤其检查已有表单、导航和状态反馈。

已经安装 Pro，还需要开源版吗？

不需要。Pro 已包含开源版的设计方法，两个同时安装可能会接管同一类请求。已有 Pro 时直接使用 Pro 即可。

Pro 怎么购买、安装和更新？

当前中文版价格为 69 元，一次买断，永久更新。网页购买后可在账户里安装或下载，也可以运行上面的 CLI 安装命令，让 Agent 协助完成授权与安装。具体价格和支付方式以 Pro 页面为准。