【免费下载链接】oil-uiUI design skill for Claude Code, Codex and other AI agents: explore distinct directions, compare them side by side, refine against real screenshots. 给 AI Agent 用的 UI 设计 Skill。项目地址https://gitcode.com/gh_mirrors/oi/oil-ui点击查看免费下载oil-ui 是给 Claude Code、Codex 等 AI Agent 使用的UI 设计 Skill它先帮你拉开几种真正不同的设计方向把小样并排放进同一页对比挑选再照着真实截图打磨细节。本文带你一行命令完成 oil-ui 安装并走完从一句话需求到风格对比页的完整流程。oil-ui 是什么给 AI Agent 装上一双设计眼普通 AI 写页面容易陷入同一个问题三个方案换个配色骨架却完全一样。oil-ui 的核心做法是 SKILL.md 里定义的 5 步流程探索并收敛方向——认品类、拆标杆、定调性写出风格真正不同的几个方向建立视觉与交互结构——字体、色彩、留白、动效逐项落到可见的决定制作并取得实际证据——真实运行页面截图检查重叠、裁切和可读性独立评审与修正——由没有历史上下文的评审者按画面打分挑问题验证与交付——做一轮减法交付时逐项写清理由和证据。设计方法论细节都在 references/ 目录下比如 design-direction.md 讲如何从品类和受众推导调性而不是从简约大气这类形容词出发。一行命令安装 oil-ui两种方式任选oil-ui 安装后即用不需要额外配置。方式一终端一行命令推荐npx skills add oil-oil/oil-ui方式二把这句话交给支持安装 Skill 的 Agent请帮我安装这个 Skilloil-ui仓库 oil-oil/oil-ui如果npx网络较慢也可以直接克隆仓库到本地再交给 Agent 安装仓库地址git clone https://gitcode.com/gh_mirrors/oi/oil-ui 两个小提醒版本检查需要 Python 3不想联网检查时设置环境变量OIL_NO_UPDATE_CHECK1即可跳过已经装了 Oil UI Pro 的不用再装开源版两者同时装会抢着接同一类请求。第一次使用直接把任务说给 Agent装好就能用把需求用一句话告诉 Agent 即可例如用 oil-ui 给这个课程预约产品探索几种设计方向做成可以预览的页面。做三种字体、配色和构图都不同的设计放在对比页里让我选。帮我润色这个页面按项目现有的设计规范来。按这张截图还原页面参考图里没有的手机布局也补上。有品牌资料、截图或现成项目可以一起交给它没有参考也能开始只有在不清楚要交付什么时它才会来问你。30 分钟产出第一个 AI 设计方向对比页想看实际画面时oil-ui 会把几个方向各做成一张真实首屏并放进自带的风格对比页。流程是这样的Agent 先认品类、拆同类标杆把调性翻译成字体、留白、色彩面积等可见决定每个方向填一张方向卡北极星意图、字体、配色、可观察特征三个方向共用同一份示例文案但结构和样式各写各的保证骨架也拉开差异用 scripts/build_explorer.py 把候选组装成一个style-explorer.html对比页模板见 assets/style-explorer.html你在对比页里切换电脑/手机尺寸、按实际尺寸查看、方向键翻看看中哪份点选择把复制出来的一句话粘回给 Agent它就接着往下做完整页面。这套对比页规则完整写在 references/style-explorer.md候选可以是 HTML 文件、图片也可以是正在运行的开发服务器地址还能把现状页面作为基线一起放进对比。效果如何开源版能力一览开源版能把一个新页面从头做到好看覆盖设计方向探索、视觉层级、滚动叙事和截图还原。下面这页就是完整作品流程的产物交付前 Agent 还会用自带的截图取证工具 scripts/shoot.mjs 检查实际画面--evidence一条命令出齐状态图、2 倍局部图和录屏并自动提示文字对比度不足、正文过小、卡片套卡片这类 AI 默认审美问题用法见 references/tools.md。常用模块路径速查想了解什么看哪里完整使用流程与能力边界SKILL.md设计方向方法论认品类、定调性、方向卡references/design-direction.md风格对比页manifest 写法与生成references/style-explorer.md截图、录屏与取证工具references/tools.md视觉评审派发协议references/visual-review.md评审者执行手册references/reviewer-manual.md对比页生成器源码scripts/build_explorer.py截图取证工具源码scripts/shoot.mjs常见问题Qoil-ui 会修改我的项目文件吗设计说明、素材和截图放在任务目录里不会写进 Skill 安装目录你只要求评审时它不会动任何文件。Q为什么三个方向还是有点像这是 oil-ui 最在意的点版式、字体、配色、主视觉四样里任意两个方向最多只能有一样相同太像时它会重新定版式而不是换个颜色补救。详见 references/design-direction.md 的差异检验。Q开源版和 Pro 怎么选开源版适合从 0 做新页面Pro 额外覆盖好用性打磨表单、弹窗、响应式、老项目改造、独立精修评审和流光点阵等特效两者功能对照见 README.zh-CN.md 的开源版和 Pro一节。现在就可以打开你的 Agent把上面那句做三种字体、配色和构图都不同的设计放在对比页里让我选发出去30 分钟后你会得到第一个真正能挑的风格对比页。赞分享【免费下载链接】oil-uiUI design skill for Claude Code, Codex and other AI agents: explore distinct directions, compare them side by side, refine against real screenshots. 给 AI Agent 用的 UI 设计 Skill。项目地址https://gitcode.com/gh_mirrors/oi/oil-ui点击查看免费下载相关推荐DLSS Swapper 指南免更新游戏切换 DLSS 版本DLSS Swapper 指南免更新游戏切换 DLSS 版本 DLSS Swapper 是 Windows 平台的 DLSS 版本管理工具它下载官方 DLS桌面应用5分钟快速上手 Node-Redis从安装到第一个 Redis 命令5分钟快速上手 Node Redis从安装到第一个 Redis 命令 Redis是一个强大的内存数据结构存储系统而 Node Redis 是Node.js生后端数据库客户端缓存5分钟快速上手pyllama从安装到运行你的第一个AI对话5分钟快速上手pyllama从安装到运行你的第一个AI对话 pyllama是基于Facebook LLaMA模型的优化版本专为消费级GPU设计让普通用户也创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
