Oil UI
Explore distinct interface directions with an AI agent, compare previews, and refine the chosen design against screenshots.
- Source repo
- oil-oil/oil-ui
- Stars
- ★ 1.8k
- Last updated
- today
- License
- MIT
- Primary language
- Python
- FA score
- Insufficient evidence
At a glance
- How it runs
- Works with
- Universal · cross-platformCodex · Claude Code
- Cost
- Free, no paid service needed
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- A product team is designing a website or app page from scratch and wants to compare several distinct visual directions first.
- Not a fit if
- Teams that want a single design generated without choosing among directions
- Source review
- Insufficient evidence 8 safety controls not found
What does this agent do, and when should you use it?
Oil UI is an interface design skill for AI agents, covering websites, apps, dashboards, and components. It starts by identifying the product category and studying a few distinctive peers, then turns the audience and brand voice into concrete choices about type, spacing, and color. The skill develops several visibly different directions and presents previews on a comparison page for the user to choose from and comment on. It then refines the selected direction and checks screenshots at desktop and mobile sizes. The repository documents installation with npx skills; it does not describe a standalone service, API, or deployment environment.
Install with npx skills add oil-oil/oil-ui, then describe the design task to an agent that supports skill installation. Oil UI identifies the product category, studies two or three distinctive peers, and sets a visual direction based on the product, audience, and brand voice. It creates multiple previews that differ meaningfully in layout, typography, color, or key imagery, and can place HTML files, images, or running development pages on a comparison page with desktop and mobile views. After the user selects a direction and gives feedback, the skill refines the design and checks desktop and mobile screenshots when the page is done; an independent reviewer can also be brought in.
- A product team is designing a website or app page from scratch and wants to compare several distinct visual directions first.
- A designer wants to put multiple HTML previews, images, or in-progress pages on one comparison page for a team decision.
- A frontend developer wants to polish a page against existing project guidelines and inspect desktop and mobile screenshots.
- A team needs to recreate a webpage from a screenshot and add a mobile layout.
- A product owner wants a homepage review with recommendations while leaving the files untouched.
How do you install or deploy this agent?
Run this command in a terminal. The README says the skill is ready to use after installation with no extra configuration; it does not specify a minimum Node.js version or other system requirements.
npx skills add oil-oil/oil-uiHow do you use this agent?
After installation, describe a task to an agent that supports skills, for example:
Use oil-ui to explore a few design directions for this course booking product and build pages I can preview.You can also share brand assets, screenshots, or an existing project. For a comparison, ask the agent to put the previews on its comparison page; select a direction and give feedback for further refinement. The README specifies no additional API, credentials, or configuration steps.
What are this agent's strengths and limitations?
- Researches the product category and peers before choosing a visual direction, grounding design decisions beyond vague terms such as “clean” or “premium.”
- Calls for meaningful differences across layout, typography, color, and key imagery, with side-by-side previews for selection.
- Includes desktop and mobile screenshot checks and documents both screenshot recreation and independent review.
- The workflow expects the user to inspect directions, choose one, and provide feedback; it is not aimed at fully automatic final approval.
- It checks a public version list online, at most once every ten minutes by default; the check can be disabled with
OIL_NO_UPDATE_CHECK=1. - Installation uses
npx, and version checking requires Python 3; the docs give no minimum Node.js version or offline installation steps.
How does this agent compare with similar options?
The README compares the open-source edition with Oil UI Pro. The open-source edition covers designing from a blank start, comparing directions, and screenshot recreation; Pro adds listed features for usability, existing-project improvements, repeated stricter reviews, deep component polishing, and visual effects. Pro is listed at $9.99 as a one-time purchase with lifetime updates.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Oil UI This agent | Insufficient evidence | Agent plugin / skillFree | ★ 1.8k | today | Python | Codex · Claude Code |
| Superdesign Skill | 43 · Major gaps | Agent plugin / skillFreemium | ★ 841 | 1mo ago | JavaScript | Codex · Claude Code |
| UIZZE · Better UI for Coding Agents | 47 · Major gaps | Agent plugin / skillFreemium | ★ 63 | 6d ago | JavaScript | Codex · Claude Code |
| App Store & Google Play Screenshots Generator | 52 · Major gaps | Agent plugin / skillFree + model costs | ★ 7.4k | 3d ago | TypeScript | Claude Code |
How does FollowAgents rate this agent?
- Not found in source: least-privilege scopingGrant only what the task needs: a dedicated account or read-only token, scoped to specific directories and repos.
- Not found in source: confirmation before actingTurn on (or add) a confirmation step before it acts, and try it in a sandbox or test environment before real data.
- Not found in source: data-flow disclosureWatch which external services it contacts (proxy or firewall logs) and keep sensitive data out until you know where it goes.
- Not found in source: sensitive-data handlingUse dedicated, low-privilege, revocable API keys — never production credentials — and keep secrets out of logs.
- Not found in source: dependency securityPin versions and run a dependency audit (npm audit, pip-audit) before installing; prefer running it in a container.
- Not found in source: disclosed external effectsEstablish which external systems it writes to, sends to or changes, and verify with test accounts or repos before production.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- Not found in source: verifiable attributionInstall from the official repo or registry and check the publisher and URL to avoid look-alike packages.
- The supplied material is insufficient to assess the core UI design skill; visible tests do not substitute for its instructions, implementation, or complete documentation.
- Publisher provenance is unverified, so identity is treated as unknown and does not affect scores.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
Release notes excerpt
- 方向探索更快更省：探索阶段的候选方案只做首屏核心画面并支持并行生成，直接对候选目录跑一次截图即可在同一个浏览器里截齐所有方向并自动合成并排总览图。 - 支持局部组件裁切截图：验收或微调局部卡片、弹窗、导航时，可按元素选择器自动滚入视口并只截取该元素区域。 - 评审反馈自带速查清单：独立评审开头先列出可逐条勾销的修改清单，再展开详细分析，避免漏改。 - 精简技能描述为纯中文：去掉中英文重复堆砌，大幅压缩常驻上下文体积。View on GitHub ↗ -
Release notes excerpt
支持半尺寸快速缩略截图、跨目录素材缓存自动寻址、子目录静态根自动上提与评审交接指引，并补充 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 的一行安装命令。View on GitHub ↗ -
Release notes excerpt
精简重复测试，减少文案和内部实现调整带来的误报。 - 删除 7 个低价值或重复用例，包括重复搬目录检查、模板源码片段匹配和测试自身的故障模拟。 - 移除帮助文案逐字匹配、文档长度和空格限制，保留 Windows 路径、缓存完整性、浏览器恢复与授权更新回归。 - 修复连接超时模拟的竞态，避免快速握手绕过故障注入。 - 稳定短动画反馈的采样测试，保留动画时长与全部断言。 - 短片时长检查使用固定输入帧，避免浏览器加载速度造成误报。 - 本次仅调整测试与版本号，工具行为保持一致。View on GitHub ↗
FAQ
Does the open-source edition cost anything?
Do I need to configure anything after installation?
npx skills add oil-oil/oil-ui.