企业官网建设流程全解析

oil-ui 是给 Claude Code、Codex 等 AI Agent 使用的UI 设计 Skill：它先帮你拉开几种真正不同的设计方向，把小样并排放进同一页对比挑选，再照着真实截图打磨细节。本文带你一行命令完成 oil-ui 安装，并走完"从一句话需求到风格对比页"的完整流程。

oil-ui 是什么：给 AI Agent 装上一双"设计眼"

普通 AI 写页面容易陷入同一个问题：三个方案换个配色，骨架却完全一样。oil-ui 的核心做法是 SKILL.md 里定义的 5 步流程：

1. 探索并收敛方向——认品类、拆标杆、定调性，写出风格真正不同的几个方向；
2. 建立视觉与交互结构——字体、色彩、留白、动效逐项落到可见的决定；
3. 制作并取得实际证据——真实运行页面，截图检查重叠、裁切和可读性；
4. 独立评审与修正——由没有历史上下文的评审者按画面打分挑问题；
5. 验证与交付——做一轮减法，交付时逐项写清理由和证据。

设计方法论细节都在 references/ 目录下，比如 design-direction.md 讲如何从品类和受众推导调性，而不是从"简约""大气"这类形容词出发。

一行命令安装 oil-ui：两种方式任选

oil-ui 安装后即用，不需要额外配置。

方式一：终端一行命令（推荐）

npx skills add oil-oil/oil-ui

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

请帮我安装这个 Skill：oil-ui（仓库 oil-oil/oil-ui）

如果npx网络较慢，也可以直接克隆仓库到本地再交给 Agent 安装，仓库地址：

git clone https://gitcode.com/gh_mirrors/oi/oil-ui

💡 两个小提醒：

• 版本检查需要 Python 3；不想联网检查时设置环境变量OIL_NO_UPDATE_CHECK=1即可跳过；
• 已经装了 Oil UI Pro 的不用再装开源版，两者同时装会抢着接同一类请求。

第一次使用：直接把任务说给 Agent

装好就能用，把需求用一句话告诉 Agent 即可，例如：

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

有品牌资料、截图或现成项目可以一起交给它；没有参考也能开始，只有在不清楚要交付什么时它才会来问你。

30 分钟产出第一个 AI 设计方向对比页

想看实际画面时，oil-ui 会把几个方向各做成一张真实首屏，并放进自带的风格对比页。流程是这样的：

1. Agent 先认品类、拆同类标杆，把调性翻译成字体、留白、色彩面积等可见决定；
2. 每个方向填一张"方向卡"：北极星意图、字体、配色、可观察特征；
3. 三个方向共用同一份示例文案，但结构和样式各写各的，保证骨架也拉开差异；
4. 用 scripts/build_explorer.py 把候选组装成一个style-explorer.html对比页，模板见 assets/style-explorer.html；
5. 你在对比页里切换电脑/手机尺寸、按实际尺寸查看、方向键翻看，看中哪份点"选择"，把复制出来的一句话粘回给 Agent，它就接着往下做完整页面。

这套对比页规则完整写在 references/style-explorer.md：候选可以是 HTML 文件、图片，也可以是正在运行的开发服务器地址，还能把现状页面作为基线一起放进对比。

效果如何：开源版能力一览

开源版能把一个新页面从头做到好看，覆盖设计方向探索、视觉层级、滚动叙事和截图还原。下面这页就是完整作品流程的产物：

交付前 Agent 还会用自带的截图取证工具 scripts/shoot.mjs 检查实际画面：--evidence一条命令出齐状态图、2 倍局部图和录屏，并自动提示文字对比度不足、正文过小、"卡片套卡片"这类 AI 默认审美问题，用法见 references/tools.md。

常用模块路径速查

常见问题

Q：oil-ui 会修改我的项目文件吗？设计说明、素材和截图放在任务目录里，不会写进 Skill 安装目录；你只要求评审时，它不会动任何文件。

Q：为什么三个方向还是有点像？这是 oil-ui 最在意的点：版式、字体、配色、主视觉四样里，任意两个方向最多只能有一样相同；太像时它会重新定版式，而不是换个颜色补救。详见 references/design-direction.md 的"差异检验"。

Q：开源版和 Pro 怎么选？开源版适合从 0 做新页面；Pro 额外覆盖好用性打磨（表单、弹窗、响应式）、老项目改造、独立精修评审和流光点阵等特效，两者功能对照见 README.zh-CN.md 的"开源版和 Pro"一节。

现在就可以打开你的 Agent，把上面那句"做三种字体、配色和构图都不同的设计，放在对比页里让我选"发出去，30 分钟后你会得到第一个真正能挑的风格对比页。