oil-oil/oil-ui

中文 · English

想看更多设计效果，可以去 ui.oiloil.org。

方法

1. 先认品类，看同类最好的产品。 说出这是什么产品，找出同类里风格最鲜明的两三家，拆开看它们怎么做、为什么这样做，再决定哪些沿用、哪些换掉。 2. 先定调性。 从题材、受众和品牌语气推出五个刻度：能量、完成度、密度、分量、严肃度。“高级”“简洁”这类词，先翻成看得见的决定：用什么字、留多少白、颜色占多大面积。 3. 从具体的东西出发。 每个方向从一个具体的引擎起步：一种材质加一个环境、一个场景、一个角色，或者另一个领域的整套表现形式。内容从产品本身找，不从“简约”“大气”这类形容词出发。 4. 先问首屏是给谁看的。 来看内容、挑东西、干活的页面，首屏就是第一排内容本身；要说服人的页面，才去选首屏骨架、画线框，再写文案。同一轮里骨架互不相同，左右分栏最多出现一次。 5. 检查方向之间的差别。 骨架、字体、色彩、主视觉四项里，任意两个方向最多一项相同。小样做出来后并排眯眼看首屏的明暗块面，太像就重选骨架。 6. 留一处让人记住的地方。 不求整页都用力，只把一两处做到极致：一次点按的反馈、付款成功的那一下、AI 干活的过程、一个 404 页面。其余保持安静。 7. 品味由你来定。 小样放进同一个对比页，你来挑，再说说具体喜欢和不喜欢哪里。 8. 以实际画面为准。 在电脑和手机尺寸下打开页面截图检查，可以请一位没看过制作过程的独立评审看一轮。最后做减法：一页只有一个主角，删掉不影响理解的文字、重复的线和多余的容器。

交互、状态、布局、老项目改造和流光、点阵这类特效，在 Oil UI Pro 里。

安装

把这句话交给支持安装 Skill 的 Agent：

请帮我安装这个 Skill：https://github.com/oil-oil/oil-ui

或者用命令安装：

npx skills add oil-oil/oil-ui

装好后可以直接使用设计方法，无需额外配置，也不需要其他 Skill。命令安装需要 Node.js 18 以上。已经装了 Oil UI Pro 就不用再装 Oil UI 开源版，两个同时装会抢着接同一类请求。

使用这个 Skill 时会触发版本检查，最多每 10 分钟联网一次，超过 2 秒没有响应就跳过，不会拖慢任务；失败后会在后续使用时稍后重试。检查只读取 ui.oiloil.org 公开的版本列表，不上传项目内容。离线时无法得知新版本，所以不会提示。

自动更新需要 Python 3 和 Node.js 18 以上。发现新版本后会尝试自动更新；缺少依赖时，Agent 会在回复末尾给出恢复提示，并附上带有当前安装绝对路径的命令：npx github:oil-oil/oil-cli update oil-ui --path "<安装路径>"。网络错误保持静默，稍后重试。设置环境变量 OIL_NO_AUTO_UPDATE=1 只提醒不自动更新，OIL_NO_UPDATE_CHECK=1 完全关掉检查。

Python 3 可以用 python3 或 python 启动，Windows 也可以用 py -3。缺少 Python 3 时只提醒一次，设计任务照常继续。

使用

直接把任务告诉 Agent，例如：

• “用 oil-ui 给这个课程预约产品探索几种设计方向，做成可以预览的页面。”
• “做三种字体、配色和构图都不同的设计，放在对比页里让我选。”
• “帮我润色这个页面，按项目现有的设计规范来。”
• “只评审这个首页，告诉我哪里要改、怎么改，不要动文件。”
• “按这张截图还原页面，参考图里没有的手机布局也补上。”

自带的风格对比页

几份设计并排放在一起比，可以是 HTML 文件、图片，也可以是正在运行的开发页面；现在的版本可以放在第一个当对照。可以切换电脑和手机尺寸，点开看实际大小，用方向键翻看。看中了点“选择”，把复制出来的一句话粘贴给 Agent，它就接着做。

开源版和完整版

| | Oil UI 开源版 | Oil UI Pro | | --- | :---: | :---: | | 定调性、拉开方向、先定骨架、检查方向之间的差别 | ✓ | ✓ | | 风格对比页 | ✓ | ✓ | | 视觉层级、字体、配色和留白 | ✓ | ✓ | | 让人记住的一刻、滚动叙事（视差与一镜到底） | ✓ | ✓ | | 配图、素材和动效 | ✓ | ✓ | | 截图还原、图标库怎么选、示例数据怎么写 | ✓ | ✓ | | 润色已有界面后，按项目自己的设计规范评审一轮 | ✓ | ✓ | | 独立评审 | 每个阶段一轮 | 以 9 分为目标，最多评审修改三轮 | | 检查几个方向有没有撞车，让评审真的按任务把页面用一遍 | | ✓ | | 初稿常见问题的改法、AI 默认审美自查、细节清单、怎么做减法 | | ✓ | | 后台和工具类产品的布局，让风格贯穿整页 | | ✓ | | 交互和状态、页面布局与屏幕适配 | | ✓ | | 把单个组件打磨到极致：主视觉、草图选一、所有状态、主操作手感、按轮次打磨 | | ✓ | | 流光、点阵、流动渐变这类 SVG 和着色器特效 | | ✓ | | 老项目先分清是优化 UI、改流程还是加新功能 | ✓ | ✓ | | 老项目的方法：给现有规范做体检、按推翻程度出方案，亲手走一遍流程找到原因，按三种立场出不同做法的方案 | | ✓ |

Oil UI Pro 69 元，一次买断，永久更新，在 ui.oiloil.org/pro 购买。

搭配使用

• draw-ui：先用生图工具出设计图，挑中了再照图实现。写代码做出来的设计怎么改都不满意，而你的 Agent 能生成图片时，可以换它试试。
• oil-motion：用生成的视频或序列帧做随滚动、拖动变化的网页动画，比如产品拆解、镜头穿越。想要很强的首屏动画时用它。

许可

MIT