Agent UI 设计 Skill、一键 UI 生成器与组件库有什么区别？应该怎么选
现在做界面常会遇到三类工具：传统组件库（如 shadcn/ui、Radix、Ant Design）、在线一键 UI 生成平台，以及装在 Claude Code 或 Codex 里的 Agent UI 设计 Skill（如 Oil UI）。它们并不是非此即彼的替代关系，而是分别解决“底层基础控件”“独立概念草图”和“在真实代码库里把设计方法与走查跑通”三个不同层面的问题。
核心要点
- 组件库提供按钮、弹窗、下拉框等基础积木，但不负责决定你的产品首屏怎么叙事、信息怎么分主次。
- 在线一键 UI 生成器适合脱离现有仓库快速看一张概念图，但生成的代码往往难以直接放进已有复杂工程。
- Agent UI 设计 Skill（Oil UI）直接运行在你的编程 Agent 里，把多方向对比、去塑料感和真实截图盲审带进你的实际代码库。
- 三者完全可以组合使用：在已有工程里保留你的组件库，用 Claude Code / Codex + Oil UI 决定版式方向、组织状态并完成走查。
npx skills add oil-oil/oil-ui可与你项目中已有的任何前端框架或组件库配合使用。
三类工具的真实定位与边界对比
很多团队之所以对 AI 做出来的界面失望，是因为用错了工具：比如指望装一套组件库就能自动获得好审美，或者把在线生成器导出的静态孤岛代码硬往生产环境里搬。把三类工具的边界摆在一起看，选型就会非常清楚：
| 维度 | 基础组件库 (shadcn/ui, Radix 等) | 在线一键 UI 生成器 | Agent UI 设计 Skill (Oil UI) |
|---|---|---|---|
| 核心交付物 | 无障碍基础控件（Button, Dialog, Select 等代码组件） | 托管在外部平台的单张或多张独立预览页 | 给编程 Agent 读取的设计方法、同屏对比页工具与截图盲审工作流 |
| 是否理解你的现有代码库 | 作为依赖安装在仓库内，无主动设计判断 | 通常运行在外部沙盒，不直接读写你的本地业务路由与接口 | 直接在本地 Claude Code / Codex / Cursor 中读写你的真实工程文件 |
| 怎么解决“千篇一律 AI 味” | 不负责版式；AI 照样会用好组件拼出平庸的三卡片套路 | 依赖平台内置模板库，同类提示词容易撞衫 | 通过品类方向探索、同屏对比页和反 AI 俗套减法清单主动破除模板感 |
| 老项目改造与跨页统一 | 只提供单控件替换，不管整页信息主次与流程简化 | 很难在不破坏现有事件与接口的前提下翻新存量复杂页面 | 支持单页截图诊断、三级改造粒度与提取全站 DESIGN.md |
| 视觉验收方式 | 靠开发者自己打开浏览器肉眼检查 | 在平台预览框里看静态或轻交互效果 | 自动打开本地浏览器截取 1440px/390px 画面，交由无上下文子 Agent 盲审 |
在实际团队里怎么把它们配合起来用
了解各自的长处后，你可以根据手头项目的阶段灵活组合，而不必推翻现有的工程习惯：
- 已有生产项目（Next.js / Vue + 现有组件库）
- 保留项目里已有的 Radix、shadcn/ui 或内部组件库处理焦点管理与键盘无障碍；在 Claude Code 或 Cursor 里装上 Oil UI，让 Agent 负责页面布局主次、状态补齐、删减多余框线，并用本地截图走查把关。
- 从零启动新产品或品牌官网
- 直接用 Codex 或 Claude Code 配合 Oil UI，先跑出 3 个不同方向的同屏对比页（就像画廊里的《Kiln 组件库官网》《Dispatch API 文档站》《Forge 编程助手》），定下最独特的一版后再写全量交互。
- 已经有满意的参考图或草图
- 如果设计师已经画好了关键帧，或你在别处截到了满意的视觉参考，直接把图片传给装有 Oil UI 的 Agent，使用截图像素比对还原或风格迁移分支落地到生产代码中。
坦诚说明：Oil UI 擅长什么、不做什么
为了帮你做出准确判断，我们也把 Oil UI 的真实边界说在前面：
首先，Oil UI 是教 Agent 怎么做设计、怎么审视画面的 Skill，它不是一套写死的 React 组件库，也不会替代底层大模型本身的能力。用 Claude Opus 5.5 或 GPT 6.1 Sol 跑出来的版面上限，依然会高于参数量较小的轻量模型。其次，要发挥出盲审与减法走查的全部威力，你的 Agent 环境需要能看图并能打开本地浏览器截图。因此在入手 Oil UI Pro 之前，我们始终建议你先用一句命令装好免费的开源版，在自己的真实任务上试跑一次。
用 Oil UI 重新设计当前项目的 [页面名称，例如：开发者 API 密钥与用量页面]。
- 组件与工程约束：继续使用项目中已有的 [例如：shadcn/ui 基础控件与 Tailwind 配置]，不要引入新的第三方 UI 库。
- 设计要求：不要把所有区块都包进默认的 Card 组件里；先给出 2 至 3 个不同的信息排布方向，突出高频操作，补齐空状态与报错反馈，并在 1440×900 与 390×844 浏览器视口下截图走查。让基础组件库管好底层控件，让 Oil UI 管好整页版式、主次与视觉验收。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Kiln
组件库官网
产品：「Kiln」，一个给 React 开发者用的开源组件库：按钮、输入框、下拉、命令面板、弹窗、提示、表格、日期选择等 40 多个组件，支持主题定制。 做它的官网首页（可以加一个组件详情页）： - 首页要直接展示真实可交互的组件，而不是截图：一块“组件墙”里放着能点、能输入、能切换的真组件。 - 气质参考一线开发者工具官网的精确与克制：黑白为主，最多一种强调色，严格的网格，等宽字体用在代码和数字上。 - 记忆点：一个主题调节器，拖动圆角、密度或强调色，整页所有组件当场一起变化。 - 要有：安装命令（可复制）、代码片段、组件分类导航、一段真实的使用数据（例如 GitHub 星数、周下载量，数字不整齐）。
查看作品与提示词 →
Dispatch
开发者 API 文档站
一家支付或消息类 API 公司的开发者文档站（1440×900 起，响应式到 390 宽）：左侧导航、中间正文、右侧可切换语言（cURL、Node、Python）的代码示例；有快速开始、某个接口的完整参考（参数表、请求与响应示例、错误码）、搜索。 读文档时代码示例跟着当前段落走，切换语言后全站记住。设计快速开始页、接口参考页、搜索打开三个状态。
查看作品与提示词 →
muse
AIGC 创作画布
一个给设计师和创意团队用的 AI 生图、生视频工具，所有提示词、参考图和生成结果都放在一张无限画布上。做工作区主界面。
查看作品与提示词 →
Forge
AI 编程助手
产品：「Forge」，一个桌面端的 AI 编程助手：左边是对话，右边是它正在改的代码和终端，能看到它一步步读文件、改代码、跑测试。 做它的主界面（1440×900），数据要真实（像真实项目的文件名、diff、测试输出）。 记忆点：让 AI 干活的过程看得见，步骤一个个亮起、diff 一行行出现、测试从红变绿。 再截一张“等待用户确认一处危险修改”的状态。
查看作品与提示词 →先试开源版，需要全套武器库时再升级 Oil UI Pro
免费开源版已包含品类调研、多方向同屏对比、反 AI 俗套检查与截图还原。当你确认这套工作流适合你的团队，需要老项目三级改造、10 类后台工作台骨架、最多 3 轮冲 9 分盲审与单组件精修时，再升级到 Oil UI Pro（一次买断，永久更新）。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
Oil UI 是按月订阅还是买断制？
Oil UI 开源版采用 MIT 协议，完全免费；Oil UI Pro 为一次买断、永久更新（中文版当前价格与支付方式以 /pro/ 页面为准），不按 token 或生成次数额外收费。
团队里没有专职设计师，只有后端或全栈工程师，能用好 Oil UI 吗？
这正是 Oil UI 最常见的使用场景。工程师不需要自己背诵排版术语，只需把“用户是谁、要完成什么任务、有哪些真实数据字段”写清楚，Oil UI 会引导 Agent 产出多方向对比页并自动执行截图挑刺。
我是设计师，平时用 Figma，Oil UI 对我有什么用？
设计师常用它做两件事：一是在立项初期用 5 分钟跑出带真实文案和真实交互的 3 个方向网页，比静态画板更快验证手感（特别是拖拽时间轴、动态计价、多屏联动）；二是直接参与前端仓库的走查，把设计规范写成 DESIGN.md 交给团队 Agent 执行。
画廊里的 100 多件作品都是直接用这套流程做出来的吗？
是的。画廊里的每一件作品都标注了制作所用的具体模型（如 GPT 6.1 Sol、GPT 5.4、Claude Opus 5.5、Claude Sonnet 5.5、DeepSeek 4.1 Flash），并在查看器里公开了原始任务提示词与多状态在线演示，你可以逐一打开核验。