让 AI 先做几版真不一样的界面小样，你挑完它再细化。 Your AI agent mocks up genuinely different UI directions, you pick, it refines.
中文作者 oil-oil 做的开源界面设计 Skill（Skill 可以理解成「装给 AI 编程助手的一套做事方法」）。装好后，你让 Claude Code、Codex 这类 Agent 设计网页、App、后台或组件，它不会直接出一版就交差，而是先认清这是哪类产品、找同类里风格最鲜明的两三家参考，把「高级」「简洁」这种空话翻成具体的字体、留白和配色决定，再做出几份真正不一样的小样——规则写得很死：版式、字体、配色、主视觉四样里，任意两版最多只能有一样相同。几份小样会放进一个自带的风格对比页，能切电脑和手机尺寸、用方向键翻看，你点「选择」后把复制出的一句话发回 Agent，它再接着细化；做完还会在两种尺寸下截图自查，最后做一轮减法。官网 ui.oiloil.org 有一面作品墙，能看到学英语 App、硬件官网、项目管理工具等成品。开源版 MIT 免费；另有付费的 Oil UI Pro，多了可用性、老项目改造、特效等内容。适合想让 AI 做出来的界面别千篇一律的设计师和独立开发者。 An open-source UI design skill by Chinese creator oil-oil (a skill is a packaged way of working you install into an AI coding agent). Once installed, when you ask Claude Code, Codex, or similar agents to design a site, app, dashboard, or component, it does not ship one version and stop: it identifies the product category, studies the two or three most distinctive players, turns vague words like “premium” or “clean” into concrete type, spacing, and color decisions, then produces several genuinely different mockups, with a strict rule that any two directions may share at most one of layout, type, palette, and key visual. The mockups land in a built-in comparison page where you switch desktop and mobile sizes and flip through with arrow keys; click “Select,” paste the copied line back to the agent, and it refines from there, then screenshots both sizes to self-check and does a final pass of subtraction. The gallery at ui.oiloil.org shows results like a language-learning app, a hardware site, and a project tool. The open-source edition is MIT and free; a paid Oil UI Pro adds usability, legacy-project, and effects material. Good for designers and indie builders who want AI-made interfaces that don’t all look the same.
在浏览器里生成 CSS/HTML 的小工具。 In-browser tools that generate CSS or HTML.
带可运行示例的文档站与示例索引。 Doc sites and example indexes with runnable samples.
为什么推荐Why we recommend it 八步设计方法、「四样里最多一样相同」的规则、风格对比页、截图自查、版本检查只读公开版本列表（可用 OIL_NO_UPDATE_CHECK=1 关闭），都照中文 README 写。价格两处写法不一：官网英文页写 Pro $9.99 一次买断，中文 README 写 69 元一次买断，以购买页为准。本库没有安装这个 Skill、没有让 Agent 实际跑一遍，没买 Pro。 The eight-step method, the “share at most one of four” rule, the comparison page, screenshot self-checks, and the update check that only reads a public version list (disable with OIL_NO_UPDATE_CHECK=1) follow the Chinese README. Pricing differs by page: the English site says Pro is a $9.99 one-time purchase, the Chinese README says ¥69 one-time; the checkout page is authoritative. This library did not install the skill, did not run it through an agent, and did not buy Pro.
线索：作者 @I_am_oil_oil 的更新帖 https://x.com/I_am_oil_oil/status/2109157633898979682 （2026-10-11T05:42Z，约 10-11 13:42 北京时间，撰写时 28 赞），帖里的图都写明由 GPT 6.1 sol + 简单提示词 + Oil UI Pro 做出。仓库 oil-oil/oil-ui 晚间 gh api：MIT、1239★，2026-09-30 创建，最近推送 2026-10-11，最新 release v0.21.0。作品墙数量和模型标注是撰写时页面上看到的。官网与仓库晚间 HTTP 200。预览为 Playwright 实拍官网作品墙首屏，缩成 3:2 WebP 自托管。 （撰写时 65 件，大多标注用 GPT 6.1 Sol 生成）Lead: creator @I_am_oil_oil’s update post https://x.com/I_am_oil_oil/status/2109157633898979682 (2026-10-11T05:42Z, about 13:42 on 10-11 Beijing time, 28 likes at write time); the post says its images were made with GPT 6.1 sol + a simple prompt + Oil UI Pro. Repo oil-oil/oil-ui on this evening’s gh api: MIT, 1239★, created 2026-09-30, last push 2026-10-11, latest release v0.21.0. Gallery count and model labels are what the page showed at write time. Site and repo HTTP 200 this evening. Preview is a Playwright capture of the site’s gallery above the fold, scaled to a self-hosted 3:2 WebP. (65 pieces at write time, most labeled GPT 6.1 Sol)
