想看更多设计效果，可以去 ui.oiloil.org。
- 先认品类，看同类最好的产品。 说出这是什么产品，找出同类里风格最鲜明的两三家，拆开看它们怎么做、为什么这样做，再决定哪些沿用、哪些换掉。
- 先定调性。 从题材、受众和品牌语气推出五个刻度：能量、完成度、密度、分量、严肃度。“高级”“简洁”这类词，先翻成看得见的决定：用什么字、留多少白、颜色占多大面积。
- 从具体的东西出发。 每个方向从一个具体的引擎起步：一种材质加一个环境、一个场景、一个角色，或者另一个领域的整套表现形式。内容从产品本身找，不从“简约”“大气”这类形容词出发。
- 先问首屏是给谁看的。 来看内容、挑东西、干活的页面，首屏就是第一排内容本身；要说服人的页面，才去选首屏骨架、画线框，再写文案。同一轮里骨架互不相同，左右分栏最多出现一次。
- 检查方向之间的差别。 骨架、字体、色彩、主视觉四项里，任意两个方向最多一项相同。小样做出来后并排眯眼看首屏的明暗块面，太像就重选骨架。
- 留一处让人记住的地方。 不求整页都用力，只把一两处做到极致：一次点按的反馈、付款成功的那一下、AI 干活的过程、一个 404 页面。其余保持安静。
- 品味由你来定。 小样放进同一个对比页，你来挑，再说说具体喜欢和不喜欢哪里。
- 以实际画面为准。 在电脑和手机尺寸下打开页面截图检查，可以请一位没看过制作过程的独立评审看一轮。最后做减法：一页只有一个主角，删掉不影响理解的文字、重复的线和多余的容器。
交互、状态、布局、老项目改造和流光、点阵这类特效，在完整版 oil-ui-pro 里。
把这句话交给支持安装 Skill 的 Agent：
请帮我安装这个 Skill：https://github.com/oil-oil/oil-ui
或者用命令安装：
npx skills add oil-oil/oil-ui装好就能用，无需额外配置，也不用装别的依赖。已经装了完整版 oil-ui-pro 就不用再装它，两个同时装会抢着接同一类请求。
直接把任务告诉 Agent，例如：
- “用 oil-ui 给这个课程预约产品探索几种设计方向，做成可以预览的页面。”
- “做三种字体、配色和构图都不同的设计，放在对比页里让我选。”
- “帮我润色这个页面，按项目现有的设计规范来。”
- “只评审这个首页，告诉我哪里要改、怎么改，不要动文件。”
- “按这张截图还原页面，参考图里没有的手机布局也补上。”
有品牌资料、截图或现成项目，一起交给它。没有参考也能开始，只有不清楚要交付什么时它才会问你。
几份设计并排放在一起比，可以是 HTML 文件、图片，也可以是正在运行的开发页面；现在的版本可以放在第一个当对照。可以切换电脑和手机尺寸，点开看实际大小，用方向键翻看。看中了点“选择”，把复制出来的一句话粘贴给 Agent，它就接着做。
| oil-ui | oil-ui-pro | |
|---|---|---|
| 定调性、拉开方向、先定骨架、检查方向之间的差别 | ✓ | ✓ |
| 风格对比页 | ✓ | ✓ |
| 视觉层级、字体、配色和留白 | ✓ | ✓ |
| 让人记住的一刻、滚动叙事（视差与一镜到底） | ✓ | ✓ |
| 配图、素材和动效 | ✓ | ✓ |
| 截图还原、图标库怎么选、示例数据怎么写 | ✓ | ✓ |
| 润色已有界面后，按项目自己的设计规范评审一轮 | ✓ | ✓ |
| 独立评审 | 每个阶段一轮 | 反复评审修改，直到 9 分 |
| 检查几个方向有没有撞车，让评审真的按任务把页面用一遍 | ✓ | |
| 初稿常见问题的改法、AI 默认审美自查、细节清单、怎么做减法 | ✓ | |
| 后台和工具类产品的布局，让风格贯穿整页 | ✓ | |
| 交互和状态、页面布局与屏幕适配 | ✓ | |
| 流光、点阵、流动渐变这类 SVG 和着色器特效 | ✓ | |
| 改造老项目：盘点现状、留对照截图、按改动大小选流程 | ✓ |
完整版在 SkillPay 购买。
- draw-ui：先用生图工具出设计图，挑中了再照图实现。写代码做出来的设计怎么改都不满意，而你的 Agent 能生成图片时，可以换它试试。
- oil-motion：用生成的视频或序列帧做随滚动、拖动变化的网页动画，比如产品拆解、镜头穿越。想要很强的首屏动画时用它。