Oil UI
为 AI Agent 探索并对比不同界面方向，再依据真实截图打磨设计。
- Star 数
- ★ 1.8k
- 最近更新
- 今天
- License
- MIT
- 主语言
- Python
- FA 评分
- 证据不足
30 秒速览
- 运行形态
- 可在哪里用
- 通用 · 跨平台Codex · Claude Code
- 费用
- 免费，无需付费服务
- 上手难度
- 低 · 几分钟可跑通
- 开始前需要
- 典型场景
- 产品团队要从空白开始制作网站或应用页面，并希望先比较几种明显不同的视觉方向。
- 不适合
- 只需要直接生成单一方案、不想参与方向选择的人
这个 Agent 能做什么，适合哪些场景？
Oil UI 是面向 AI Agent 的界面设计 Skill，可用于网站、应用、仪表盘和组件。它先研究产品类别与风格鲜明的同类产品，再把受众和品牌语气转化为字体、留白、色彩等具体视觉决策。Skill 会为同一需求探索多个差异明显的设计方向，并把预览放到比较页面供用户选择和反馈。选定方向后，它继续完善设计，并在桌面与移动尺寸下检查真实截图。仓库文档说明可通过 npx skills 安装；没有披露独立服务、API 或特定部署环境。
使用 npx skills add oil-oil/oil-ui 安装后，向支持安装 Skill 的 Agent 描述设计任务即可开始。Oil UI 会界定产品类别，参考两到三个风格鲜明的同类产品，并根据产品、受众和品牌语气确定视觉方向。它为页面制作多个在布局、字体、色彩或关键图像上有明显区别的预览，并可将 HTML 文件、图片或运行中的开发页面放在比较页面中，同时提供桌面与移动尺寸浏览。用户选定方案并反馈后，Skill 会围绕反馈继续完善，并在页面完成后查看桌面和移动截图；也可邀请独立评审者检查作品。
- 产品团队要从空白开始制作网站或应用页面，并希望先比较几种明显不同的视觉方向。
- 设计师需要把多个 HTML 预览、图片或开发中的页面放到同一比较页供团队挑选。
- 前端开发者希望根据现有设计规范润色页面，并通过桌面和移动截图检查效果。
- 团队需要根据截图重建网页，并同时补充移动端布局。
- 产品负责人希望先审查首页并获得修改建议，但暂时不让 Agent 改动文件。
如何安装或部署这个 Agent？
在终端运行以下命令安装。README 称安装后无需额外配置即可使用；未说明 Node.js 的最低版本或其他系统要求。
npx skills add oil-oil/oil-ui如何使用这个 Agent？
安装后，在支持 Skill 的 Agent 中描述任务，例如：
Use oil-ui to explore a few design directions for this course booking product and build pages I can preview.也可以提供品牌素材、截图或现有项目。比较设计时，可让 Agent 将预览放到比较页面；用户选择方案并反馈后，Agent 会据此继续完善。README 未规定额外 API、凭据或配置步骤。
这个 Agent 有哪些优点和局限？
- 先研究产品类别与同类产品，再确定视觉方向，减少只凭“简洁”或“高级”等抽象词做设计的情况。
- 要求不同方向在布局、字体、色彩和关键图像上有实质差异，并支持并排比较。
- 设计流程包含桌面与移动截图检查，也支持截图复刻和独立评审。
- 需要用户查看并选择方向、提供反馈；不适合希望全程自动定稿的人。
- 使用时会检查公开版本列表，需联网；该检查默认每十分钟最多进行一次，可通过
OIL_NO_UPDATE_CHECK=1关闭。 - 安装命令使用
npx，版本检查功能需要 Python 3；文档没有给出 Node.js 版本要求或离线安装步骤。
这个 Agent 与同类方案有什么区别？
README 将开源版与 Oil UI Pro 对比：开源版覆盖从空白开始设计、方向比较和截图复刻；Pro 额外列出可用性、现有项目改进、更严格的反复评审、组件深度打磨和多种视觉效果等功能。Pro 标价为一次性 $9.99，含终身更新。
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| Oil UI 当前 | 证据不足 | Agent 插件 / 技能免费 | ★ 1.8k | 今天 | Python | Codex · Claude Code |
| Superdesign 设计技能 | 43 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 841 | 1 个月前 | JavaScript | Codex · Claude Code |
| UIZZE · 让编码智能体产出更好的界面 | 47 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 63 | 6 天前 | JavaScript | Codex · Claude Code |
| App Store 与 Google Play 截图生成器 | 52 · 缺口较多 | Agent 插件 / 技能免费 + 模型费 | ★ 7.4k | 3 天前 | TypeScript | Claude Code |
FollowAgents 如何评估这个 Agent？
- 源码中未见：最小权限约束只授予完成任务所需的权限：用专用账号或只读令牌，并限定可访问的目录和仓库。
- 源码中未见：执行前用户确认开启或自行加上执行前确认；先在沙箱或测试环境跑通，确认行为后再接入真实数据。
- 源码中未见：数据流向说明运行时观察它连接了哪些外部服务（代理或防火墙日志）；弄清数据去向之前不要输入敏感数据。
- 源码中未见：敏感信息处理使用专用、低权限、可随时吊销的 API 密钥，不要复用生产凭据，也不要让密钥出现在日志里。
- 源码中未见：依赖安全审查安装前固定版本并做一次依赖扫描（如 npm audit、pip-audit）；优先放在容器里运行。
- 源码中未见：外部影响披露先弄清它会写入、发送或修改哪些外部系统，用测试账号或测试仓库验证后再接入正式环境。
- 源码中未见：回滚或恢复路径运行前先备份，或在 git 分支、快照上操作，确保改动可以撤销。
- 源码中未见：来源归属可核验从官方仓库或包源安装，核对发布者和仓库地址，避免同名仿冒包。
- 当前材料不足以评估主体 UI 设计 Skill；可见测试不能替代 Skill 指令、实现或完整文档。
- Publisher provenance 未经验证，身份按未知处理，不据此加分或扣分。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
发布说明摘录
- 方向探索更快更省：探索阶段的候选方案只做首屏核心画面并支持并行生成，直接对候选目录跑一次截图即可在同一个浏览器里截齐所有方向并自动合成并排总览图。 - 支持局部组件裁切截图：验收或微调局部卡片、弹窗、导航时，可按元素选择器自动滚入视口并只截取该元素区域。 - 评审反馈自带速查清单：独立评审开头先列出可逐条勾销的修改清单，再展开详细分析，避免漏改。 - 精简技能描述为纯中文：去掉中英文重复堆砌，大幅压缩常驻上下文体积。在 GitHub 查看 ↗ -
发布说明摘录
支持半尺寸快速缩略截图、跨目录素材缓存自动寻址、子目录静态根自动上提与评审交接指引，并补充 DeepSeek Harness 原生插件安装说明。 - shoot.mjs 新增 --thumb 参数，按 0.5 倍缩放输出快速缩略图、缩短等待并跳过 DOM lint，方便多方向首屏快筛。 - shoot.mjs 支持直接传入 file:// URL；当目标 HTML 位于工作区子目录时自动以工作区根目录作为静态服务根，解决 ../assets/... 与 /assets/... 跨级资源 404。 - shoot.mjs --evidence 取证完成后在输出末尾自动打印 references/reviewer-manual.md 与证据目录的真实路径，方便交接给独立评审子 Agent。 - curate-media.mjs 在 --fetch 切换 --dir 时自动回退查找父目录及相邻 candidates/ 目录中的 .curate-cache.json，无需手动传 --cache。 - README 补充 DeepSeek Harness 原生插件 dsh-oil-ui 的一行安装命令。在 GitHub 查看 ↗ -
发布说明摘录
精简重复测试，减少文案和内部实现调整带来的误报。 - 删除 7 个低价值或重复用例，包括重复搬目录检查、模板源码片段匹配和测试自身的故障模拟。 - 移除帮助文案逐字匹配、文档长度和空格限制，保留 Windows 路径、缓存完整性、浏览器恢复与授权更新回归。 - 修复连接超时模拟的竞态，避免快速握手绕过故障注入。 - 稳定短动画反馈的采样测试，保留动画时长与全部断言。 - 短片时长检查使用固定输入帧，避免浏览器加载速度造成误报。 - 本次仅调整测试与版本号，工具行为保持一致。在 GitHub 查看 ↗
常见问题
开源版是否收费？
安装后还需要配置什么吗？
npx skills add oil-oil/oil-ui。