🤖 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
1 like · 246 views
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.
3 likes · 1,302 views
oil-ui is a UI design skill for Claude Code, Codex and other agents. It mocks up a few different design directions side by side, you pick one, and it refines that one against real screenshots. 1,693 stars.
oil-oil/oil-ui
1 like · 170 views
Oil UI Skill 又增加了一些新的洞察， 优化了里面很多调试脚本，简化了 Agent 的调试流程。
我挑选了一些调试 Skill 做 Case 期间的一些作品给大家分享一下，图片里的都是由 GPT 6.1 sol + 一条简单提示词 + Oil UI Pro 做出来的。
GitHub 仓库：oil-oil/oil-ui
Oil UI 网站：ui.oiloil.org
8 likes · 1 repost · 1,463 views
oil-oil/oil-ui Oil UI Skill 的设计能力还在持续进化， 现在不论是设计风格、配图思路、动画效果、反 AI 味儿、设计评审都有所提升～ t.co
6 likes · 1,647 views
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 做的一个落地页首屏设计：
9 likes · 1,146 views
做了一个开源的 Git 可视化小工具：oil-oil.github.io
Oil Git 可以帮助我们 Vibe coding 的时候，有一个应用可以方便的查看当前我们有哪些变更的文件，以及我们当前的分支情况。
GitHub Page 依然是用 oil-oil/oil-ui 实现的～ t.co
7 likes · 1,492 views
Mentions
🤖 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.
oil-ui is a UI design skill for Claude Code, Codex and other agents. It mocks up a few different design directions side by side, you pick one, and it refines that one against real screenshots. 1,693 stars. oil-oil/oil-ui
Oil UI Skill 又增加了一些新的洞察， 优化了里面很多调试脚本，简化了 Agent 的调试流程。 我挑选了一些调试 Skill 做 Case 期间的一些作品给大家分享一下，图片里的都是由 GPT 6.1 sol + 一条简单提示词 + Oil UI Pro 做出来的。 GitHub 仓库：oil-oil/oil-ui Oil UI 网站：ui.oiloil.org
oil-oil/oil-ui Oil UI Skill 的设计能力还在持续进化， 现在不论是设计风格、配图思路、动画效果、反 AI 味儿、设计评审都有所提升～ 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 做的一个落地页首屏设计：
做了一个开源的 Git 可视化小工具：oil-oil.github.io Oil Git 可以帮助我们 Vibe coding 的时候，有一个应用可以方便的查看当前我们有哪些变更的文件，以及我们当前的分支情况。 GitHub Page 依然是用 oil-oil/oil-ui 实现的～ t.co