oil-oil

🤖 AI Designs Your UI—Oil-UI is INSANE! #Shorts AI can now design UIs better than humans. Oil-UI gives Claude Code and other AI agents the skill to explore, compare, and refine UI designs against real screenshots. Game-changing for developers! 🔥 Check it out: oil-oil/oil-ui #AI #UIDesign #ClaudeCode #Frontend #AIDesign #OpenSource #Coding

Oil UI GitHub Overview: How AI Coding Agents Build Better Interfaces oil-ui by oil-oil: oil-oil/oil-ui Oil UI is an open-source design skill for AI coding assistants. This overview follows its divergence-then-convergence workflow: why generic AI-generated interfaces become uniform, how a dual Node.js/Python runtime supports the skill, how three distinct visual directions are explored, and how a local comparison hub helps choose a direction. The final refinement pass uses visual subtraction to remove redundant lines, boxes, and copy before producing HTML, CSS, and JavaScript. The video uses a synthetic course-booking dashboard example and also notes Windows GBK/dark-mode rendering issues, telemetry controls, screenshot recreation, and the oil-motion companion. TimeStamps: 0:00 Why AI-generated interfaces look alike 0:48 Oil UI's design intervention 2:06 From runtime setup to design exploration 3:14 The local comparison hub 3:31 Windows locale and dark-mode rendering issues 3:51 Human selection and feedback 4:15 Visual subtraction and final refinement 4:43 The polished course-booking dashboard 5:12 Screenshot recreation from high-fidelity mock-ups 5:23 Oil-motion and the front-end engineering workflow 🎨 Three visual directions replace one generic layout 🧭 Human selection and visual subtraction focus the final UI 🧩 Screenshot recreation and oil-motion extend the workflow Oil UI is best understood as a design-judgment layer for AI coding workflows: it introduces deliberate visual divergence, a human choice point, and a cleanup pass before implementation. The result is a more intentional front-end process, while runtime requirements, locale issues, telemetry behavior, and vision capability remain practical considerations. #OilUI #AIDesign #FrontendEngineering [de-DE] YNAS ynp_bfa45ab1a1601e9d Kinofilm Privater automatisierter Staging-Upload. Paketidentität: ynp_bfa45ab1a1601e9d; Ausgabe: cinematic. [es-US] YNAS ynp_bfa45ab1a1601e9d cinemático Carga de entorno de prueba de automatización privada. Identidad del paquete: ynp_bfa45ab1a1601e9d; salida: cinemática. [fr-FR] YNAS ynp_bfa45ab1a1601e9d cinématique Téléchargement de l'environnement de test d'automatisation privé. Identifiant du package : ynp_bfa45ab1a1601e9d ; sortie : cinématique. [hi] YNAS ynp_bfa45ab1a1601e9d सिनेमैटिक निजी स्वचालन स्टेजिंग अपलोड। पैकेज पहचान: ynp_bfa45ab1a1601e9d; आउटपुट: सिनेमाई। [id] YNAS ynp_bfa45ab1a1601e9d sinematik Unggahan staging otomatisasi pribadi. Identitas paket: ynp_bfa45ab1a1601e9d; output: sinematik. [it] YNAS ynp_bfa45ab1a1601e9d cinematic Caricamento di automazione privata. Identità del pacchetto: ynp_bfa45ab1a1601e9d; output: cinematico. [pt-BR] YNAS ynp_bfa45ab1a1601e9d cinemático Upload de teste de automação privada. Identificação do pacote: ynp_bfa45ab1a1601e9d; saída: cinemática.

这两天 DeepSeek V4.1 Flash 更新了 1017 版本，我拿它实测了一下 UI 设计，效果比预想的好很多。 为此我基于之前开源的设计 Skill「Oil UI」，专门做了一个开源的 DeepSeek Harness 插件 dsh-oil-ui，仓库地址：oil-oil/dsh-oil-ui 其实一两周前我就试过用 DeepSeek + Oil UI 做界面，但当时不管是 V4.1 Flash 还是 V4 Pro，做出来的 UI 都不太理想。 它对 Skill 里配图、动画等规范的读取也不够准。但这次 1017 版本更新后，它的审美和规范召回能力有了很明显的提升，价格也完全没变。 虽然 DeepSeek Harness 本来就能直接读 Skill，但做成专门的插件后，有几个更贴合它原生能力的设计： 1. 内置斜杠指令：直接通过 /explore 派生 3 种不同风格做探索，用 /review 排查现有设计问题。 2. 原生侧边栏对比：探索多版设计时，优先在 DeepSeek Harness 的原生侧边栏里展示对比页。 3. 脚本转原生工具：把页面截图、动画排查、获取元素位置等能力做成原生工具（类似 MCP），Agent 不用再先读脚本规范和参数说明；同时插件会自动移除 Skill 里重复的工具描述。 4. 子 Agent 提示词注入：派子 Agent 做 review 时，由插件直接注入提示词，省去主 Agent 读取规范的 Token 开销和上下文干扰。 安装很简单，直接把 dsh-oil-ui 仓库链接发给 DeepSeek Harness 就能装好。插件默认搭配开源版 Oil UI 使用，如果已经购买或后续升级 Oil UI Pro，插件也会自动读取 Pro 版的规范。 实测案例和插件仓库入口都已经更新在 ui.oiloil.xn--org,-3m6fp43c9gem22bc82e2pwa.

Oil UI Skill 又增加了一些新的洞察， 优化了里面很多调试脚本，简化了 Agent 的调试流程。 我挑选了一些调试 Skill 做 Case 期间的一些作品给大家分享一下，图片里的都是由 GPT 6.1 sol + 一条简单提示词 + Oil UI Pro 做出来的。 GitHub 仓库：oil-oil/oil-ui Oil UI 网站：ui.oiloil.org

开源了一个 Mac 版本的文件搜索小工具 Oil Find oil-oil/oil-find 开发的初衷是因为自己苦于 Mac 的访达和聚焦搜索速度比较慢，没有一个类似于 Windows Everything 的应用，于是自己搓了一个 Oil Find 和 Everything 一样都是通过构建索引来搜索的，所以文件搜索速度特别快，几乎是实时的 希望对大家有帮助，如果觉得不错可以支持一个 star！ 同时这个 find.oiloil.org 落地页的设计也是用 Oil UI Pro 设计的 ui.oiloil.org ，大家也可以支持一下～

oil-git 把本地 Git 仓库的分支、提交图、暂存与工作区变更、文件 diff 做成只读桌面界面，查看时不会碰仓库一下。 oil-oil/oil-git t.co

oil-oil/oil-ui Oil UI 两天有 570 star 啦，这两天也还在疯狂迭代，发现有很多博主自发推荐这个 Skill，非常感谢大家～ 1. 不断拆分过大的规范文件，精简描述。把 Skill 的渐进式加载做的更好，尽可能让准确的上下文进入 Agent，同时弱的模型也可以很好的看懂 Skill。 2. 基于真实项目去测试 Skill 用来优化存量项目的能力，实测效果非常不错，能够精细化优化一个小模块的 UI，或者优化整体使用流程，让它更符合直觉，这个可以看我之前发的一个视频。 3. 优化配图规范，尽可能让配图也不趋于平庸，模型默认生成的图片其实有点拉跨，所以得有很准确的描述才能做得好， 4. 补充更多动画相关的洞察，比如落地页的不同滚动转场动画（遮罩 / 交叠 / 共享元素 ），交互动画等等。 5. 正在补充更多卡片模板，很多优秀的 SAAS 产品落地页里面的卡片设计都特别好，比如 stripe，vercel，notion，supabase... 这些的后续会把一些很棒的卡片设计都放到 Skill 里面去，开源版和付费版都有！ 在迭代的过程中，我也把很多写 skill 的新洞察补充到了 oil-oil/oil-skill-creator%E3%80%82 希望这个 Skill 能够提升大家对于 AI 做设计的体验～ 配图是 GPT 6.1 sol + Oil UI Pro 做的一个落地页首屏设计：