一组 Agent Skills，让编程智能体设计有个性的前端页面，而不是千篇一律的 AI 模板页。
10万6787JavaScriptMIT更新于 24分钟前
oil-oil/oil-ui
给 AI Agent 使用的界面设计 Skill，并排探索多个差异化设计方向，再依据真实截图迭代优化。
- Star
- 1,821
- Fork
- 98
- 未关闭 Issue
- 0
- 最近提交
- 前天
这是什么？
Oil UI 是一个面向 Claude Code、Codex 等 AI Agent 的开源界面设计 Skill。当你要求它设计网站、应用、仪表盘或组件时，它会先判断产品类别，参考同类产品的风格，再把基调落实到字体、留白和配色等具体选择上。
它会生成几个视觉上明显不同的设计方向，放到同一个对比页面里，支持切换桌面和移动端视图，由你挑选喜欢的方案。选定后，它会继续细化设计，并以桌面和移动端尺寸打开页面、检查截图，再确认完成。
通过 npx skills add 即可安装，无需额外配置；可选的版本检查需要 Python 3。另有付费的 Oil UI Pro 版本，增加了可用性、细节打磨和既有项目改版等能力。
核心功能
- 01为同一产品探索多个视觉差异明显的设计方向。
- 02在对比页面中并排展示方案，支持桌面和移动端视图。
- 03根据你的反馈细化选中的设计方向。
- 04通过桌面和移动端截图检查完成的页面。
- 05可以依据截图还原页面，并补充移动端布局。
适用场景
- 在确定方向之前，为新网站或应用探索多种视觉风格。
- 借助 AI 编码 Agent 重新设计落地页或仪表盘。
- 依据已有页面截图还原设计，并补充移动端布局。
快速上手
- 1
安装该技能
npx skills add oil-oil/oil-ui - 2
让你的智能体为产品探索设计方向
使用前须知
- 开源版不包含 Pro 的功能，如可用性检查、仪表盘布局和视觉特效。
- 版本检查需要 Python 3，并会在线读取公开版本列表，除非设置 OIL_NO_UPDATE_CHECK=1 将其关闭。
标签
常见问题
- oil-ui 是什么？
- 给 AI Agent 使用的界面设计 Skill，并排探索多个差异化设计方向，再依据真实截图迭代优化。 Oil UI 是一个面向 Claude Code、Codex 等 AI Agent 的开源界面设计 Skill。当你要求它设计网站、应用、仪表盘或组件时，它会先判断产品类别，参考同类产品的风格，再把基调落实到字体、留白和配色等具体选择上。
- oil-ui 可以免费使用吗？用的什么许可证？
- oil-ui 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
- oil-ui 还在维护吗？
- 活跃维护中。oil-ui 最近一次提交是在 2026年10月18日。
- oil-ui 适合用来做什么？
- 在确定方向之前，为新网站或应用探索多种视觉风格。 借助 AI 编码 Agent 重新设计落地页或仪表盘。 依据已有页面截图还原设计，并补充移动端布局。
- oil-ui 怎么安装和运行？
- 安装该技能: npx skills add oil-oil/oil-ui 让你的智能体为产品探索设计方向
- 在哪里获取 oil-ui？
- 源代码和安装说明在 GitHub 上：https://github.com/oil-oil/oil-ui
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
一个智能体技能，只需一句需求即可让 AI 编程助手构建有设计感的获奖级网站，并附带网站评分技能 /jury。
73826JavaScriptMIT更新于 19小时前
一套 Claude Code 技能包，用代码生成动态图形和发布视频，无需 After Effects。
34055ShellMIT更新于 9天前
一款智能体技能，可将想法、计划或代码库转换为可交互的 HTML 图表，支持 Claude Code、Codex 等。
8.6万5863JavaScriptMIT更新于 7小时前
一个 Agent Skill，可将视频转为优化的 WebP 帧序列，并搭建由滚动控制播放的 Canvas 网页。
575MIT更新于 2个月前
一组面向 AI 智能体的社交媒体调研技能，覆盖爆款内容、评论挖掘、竞品分析等工作流。
4327106PythonMIT更新于 2个月前