# Oil UI

> Oil UI is a UI design skill for AI coding agents. The gallery includes working examples, original prompts and production model details.

## Products & installation

- Free open-source skill: https://github.com/oil-oil/oil-ui
  - Install: `npx skills add oil-oil/oil-ui`
- DeepSeek Harness native plugin: https://github.com/oil-oil/dsh-oil-ui
  - Install: `dsh plugin --profile web add github:oil-oil/dsh-oil-ui`
  - Includes the free skill and detects an installed Oil UI Pro.
- [Oil UI Pro](https://ui.oiloil.org/pro/): Extended design, interaction and visual review workflows.
  - Install: `npx github:oil-oil/oil-cli install oil-ui-pro`

## Main URLs

- [zh: Gallery](https://ui.oiloil.org/)
- [zh: Installation & usage guide](https://ui.oiloil.org/guide/)
- [zh: Skill introduction](https://ui.oiloil.org/intro/)
- [zh: Oil UI Pro](https://ui.oiloil.org/pro/)
- [en: Gallery](https://ui.oiloil.org/en/)
- [en: Installation & usage guide](https://ui.oiloil.org/en/guide/)
- [en: Skill introduction](https://ui.oiloil.org/en/intro/)
- [en: Oil UI Pro](https://ui.oiloil.org/en/pro/)
- [Sitemap](https://ui.oiloil.org/sitemap.xml)

## Inspiration collections

- [网页与落地页 UI 设计案例及提示词（Claude Code / Codex）](https://ui.oiloil.org/inspiration/web-design/): 浏览用 Claude Code、Codex 与 Oil UI Skill 制作的官网、产品落地页与电商网页。每个案例都能打开实际页面，查看提示词和制作模型，参考内容结构、品牌表达与响应式设计。
- [Website Design Examples & Prompts for Claude Code and Codex](https://ui.oiloil.org/en/inspiration/web-design/): Websites, landing pages and ecommerce UI made with Codex and Oil UI Skill. Open the working demos, then reuse the original prompts in Claude Code, Codex or another agent.
- [移动 App UI 设计案例与多屏提示词（Claude Code / Codex）](https://ui.oiloil.org/inspiration/mobile-app-design/): 查看用 Claude Code、Codex 与 Oil UI Skill 制作的移动 App 界面，涵盖学习、出行、健康与日常工具。打开 390×844 多屏演示，查看提示词，参考导航、信息层级和不同状态的反馈。
- [Mobile App Design Examples & Prompts for Claude Code and Codex](https://ui.oiloil.org/en/inspiration/mobile-app-design/): Mobile app interfaces made with Codex, Claude Code and Oil UI Skill, from learning and travel to health and everyday tools. Explore multi-screen demos and reuse the original prompts.
- [桌面应用与后台工作台 UI 设计案例（Claude Code / Codex）](https://ui.oiloil.org/inspiration/desktop-app-design/): 浏览用 Codex、Claude Code 与 Oil UI Skill 制作的桌面应用、监控后台、编辑器和工作台界面。查看 1440×900 实际演示和任务提示词，参考复杂信息、列表、画布与多栏布局的组织方式。
- [Desktop App Design Examples & Prompts for Claude Code and Codex](https://ui.oiloil.org/en/inspiration/desktop-app-design/): Desktop apps, editors and workspaces made with Codex and Oil UI Skill. Try the demos and reuse the original prompts to study dense information, lists, canvases and multi-panel layouts.
- [交互组件与界面模块设计案例及提示词（Claude Code / Codex）](https://ui.oiloil.org/inspiration/component-design/): 查看用 Claude Code、Codex 与 Oil UI Skill 制作的交互组件与界面模块，包括结账、上传、可视化与控制面板。打开演示，参考状态变化、操作反馈与细节设计。
- [UI Component Examples & Prompts for Claude Code and Codex](https://ui.oiloil.org/en/inspiration/component-design/): Interactive components and UI modules made with Codex, Claude Code and Oil UI Skill, including visualizations and control panels. Try the demos and reuse the original prompts.

## Guides (12)

### Agent & Tooling Guides / Agent 与工具指南

- [Claude Code UI 设计指南：安装 Oil UI Skill、提示词模板与多屏走查](https://ui.oiloil.org/guide/claude-code-ui-design/): 在 Claude Code 中安装 Oil UI Skill，用真实任务提示词、多方向同屏对比和浏览器截图走查，设计网页、移动 App 与交互组件。
- [Claude Code UI Design Guide: Oil UI Skill Setup, Prompts & Visual Review](https://ui.oiloil.org/en/guide/claude-code-ui-design/): Install Oil UI Skill in Claude Code to design websites, mobile apps and UI modules using side-by-side direction boards, clear briefs and blind screenshot reviews.
- [OpenAI Codex UI 设计指南：用 Oil UI 做出高完成度网页、后台与 App](https://ui.oiloil.org/guide/codex-ui-design/): 在 OpenAI Codex CLI 与 GPT 模型中安装和使用 Oil UI Skill。查看字体官网、监控工作台、计费后台等真实案例与提示词写法。
- [OpenAI Codex UI Design Guide: Building Websites, Consoles & Apps with Oil UI](https://ui.oiloil.org/en/guide/codex-ui-design/): Install Oil UI Skill in OpenAI Codex to design type foundries, incident consoles, billing dashboards and mobile apps with working interactions and real-viewport reviews.
- [DeepSeek Harness 原生插件（dsh-oil-ui）安装与 UI 设计实战](https://ui.oiloil.org/guide/deepseek-harness-ui-design/): 在 DeepSeek Harness 中一行命令安装原生插件 dsh-oil-ui，自动衔接免费版与本机已装的 Oil UI Pro。对比查看 DeepSeek 4.1 Flash 制作的真实作品。
- [DeepSeek Harness UI Design Guide: Native dsh-oil-ui Plugin & Examples](https://ui.oiloil.org/en/guide/deepseek-harness-ui-design/): Install the native dsh-oil-ui plugin in DeepSeek Harness with one command. Includes the free Oil UI skill, auto-detects local Oil UI Pro, and showcases DeepSeek 4.1 Flash gallery works.
- [在 Cursor、Windsurf 与主流编程 Agent 中使用 Oil UI 设计界面](https://ui.oiloil.org/guide/cursor-windsurf-ui-design/): 把 Oil UI Skill 安装到 Cursor、Windsurf、Antigravity 与 Gemini CLI 中，在保持现有工程目录、组件规范与业务流程不变的前提下设计或改造界面。
- [Using Oil UI in Cursor, Windsurf & IDE Coding Agents](https://ui.oiloil.org/en/guide/cursor-windsurf-ui-design/): Install Oil UI Skill in Cursor, Windsurf, Antigravity and Gemini CLI to design new modules or refresh existing project screens within your current stack.

### Interface Playbooks by Scenario / 界面形态与场景实战

- [用 AI 设计产品官网与 SaaS 落地页：首屏叙事、多方向对比与响应式走查](https://ui.oiloil.org/guide/landing-page-design/): 告别千篇一律的“居中大标题 + 三张卡片”AI 落地页。结合画廊中的 Orvo、Atelier Volders 与 Fonderie Mercier 案例，拆解官网设计流程与提示词。
- [Designing Product Websites & SaaS Landing Pages with AI Agents](https://ui.oiloil.org/en/guide/landing-page-design/): Move past generic three-card AI landing pages. Learn how to structure hero interactions, compare multiple directions from one brief, and verify 1440px and 390px viewports.
- [后台管理系统与桌面工作台 UI 设计：避开假看板，围绕核心对象组织布局](https://ui.oiloil.org/guide/dashboard-workspace-design/): 跳出“顶部四个 KPI 卡片 + 下方三张折线图”的 AI 后台套路。结合运维监控、API 计费、实验室样本管理等真实案例，拆解高密度工作台的设计方法。
- [Designing Dashboards, Admin Consoles & Desktop Workspaces with AI](https://ui.oiloil.org/en/guide/dashboard-workspace-design/): Break out of the "four KPI cards and three charts" AI dashboard cliché. Build object-driven consoles and desktop workspaces with clear hierarchy and linked state.
- [移动 App 多屏 UI 设计指南：390×844 视口规范、screens.html 并排走查与手势状态](https://ui.oiloil.org/guide/mobile-app-ui-design/): 避免把手机 App 做成“压窄的桌面网页”。学习用 390×844 真实视口与多屏并排页（screens.html）设计冲浪预报、打车、数字银行与冥想等移动界面。
- [Multi-Screen Mobile App UI Design at 390×844: Prompts, Flows & Reviews](https://ui.oiloil.org/en/guide/mobile-app-ui-design/): Stop AI agents from building squished desktop webpages for mobile. Design 390×844 multi-screen mobile apps with side-by-side screens.html boards and tactile states.
- [已有项目 UI 改造与体验翻新：在不改坏业务逻辑的前提下重整界面](https://ui.oiloil.org/guide/existing-project-ui-renovation/): 针对正在运行的真实项目，如何用 Oil UI 做单页视觉诊断、按三级改造粒度（收拾噪音、升级布局、重梳流程）翻新界面，并沉淀 DESIGN.md 统一多页面风格。
- [Refreshing Existing Project UI & Fixing Clunky Flows Without Breaking Logic](https://ui.oiloil.org/en/guide/existing-project-ui-renovation/): Use Oil UI to diagnose live screens, renovate existing codebases across three controlled tiers (tidy up, upgrade layout, rework flows) and extract a shared DESIGN.md.

### Design Methods & Visual QA / 设计方法与质量走查

- [如何去掉 AI 生成界面的“塑料感”：常见 AI 俗套清单与减法走查](https://ui.oiloil.org/guide/fix-ai-ui-slop/): 为什么 AI 写的网页和后台一眼就能看出来？拆解胶囊小标签、左侧彩条、卡片套卡片、生造假指标等典型 AI 默认习惯，给出可直接放进提示词的减法清单。
- [How to Fix Generic "AI Slop" UI: A Subtraction Checklist for Coding Agents](https://ui.oiloil.org/en/guide/fix-ai-ui-slop/): Why do AI-generated websites and dashboards look the same? Learn how to strip out eyebrow pills, left accent borders, nested cards and fake metrics using Oil UI.
- [多方向同屏对比法：为什么先并排看 3 个方案，胜过反复改一句提示词](https://ui.oiloil.org/guide/side-by-side-style-comparison/): 单次生成只给一个方案时，你很难判断它是不是最优解。了解 Oil UI 的内置 HTML 同屏对比页机制，并对照画廊中同一简报下的 Orvo、Atelier Volders 与 Fonderie Mercier 多方向成品。
- [Side-by-Side HTML Style Comparison vs. One-Shot UI Prompting](https://ui.oiloil.org/en/guide/side-by-side-style-comparison/): Why comparing 3 distinct design directions on one HTML board beats re-prompting a single draft. Inspect the Orvo, Atelier Volders and Fonderie Mercier multi-direction series.
- [真实视口截图与无上下文子 Agent 盲审：为什么只看代码做不好 UI](https://ui.oiloil.org/guide/real-screen-blind-review/): 光看 JSX 和 CSS 代码找不出文字截断、对比度发灰和版面头重脚轻。详解 Oil UI 如何通过 1440px/390px 真实浏览器截图、200% 局部放大、色块结构图和无上下文子 Agent 盲审把控界面质量。
- [Real-Viewport Screenshots & Blind Subagent Visual Review for AI UI](https://ui.oiloil.org/en/guide/real-screen-blind-review/): Why inspecting JSX and CSS in the editor misses layout bugs. Learn how Oil UI uses 1440px/390px browser screenshots, 200% crops, blurred block checks and blind subagents.
- [Agent UI 设计 Skill、一键 UI 生成器与组件库有什么区别？应该怎么选](https://ui.oiloil.org/guide/ui-design-skill-vs-generators/): 客观对比 Agent UI 设计 Skill（如 Oil UI）、在线一键 UI 生成器与传统组件库（shadcn/ui、Radix 等）的定位、适用场景与组合使用方式。
- [UI Design Skills vs. One-Shot UI Generators & Component Libraries](https://ui.oiloil.org/en/guide/ui-design-skill-vs-generators/): An honest comparison of Agent UI Design Skills (like Oil UI), hosted one-shot UI generators and component libraries (shadcn/ui, Radix)—and how to combine them.