Scrolling a 40-file diff is the worst part of shipping. oil-diff turns a branch's changes into one readable HTML page, grouped by feature, with before/after shots and must-read files flagged. Review the story, not the file list. oil-oil/oil-diff
将 Git 改动、提交范围或工作区修改生成直观易读的可视化 HTML 改动汇报页
oil-oil/oil-diff t.co
9 likes · 3 reposts · 2,387 views
最近新开源了一个 Skill 叫 oil-diff:oil-oil/oil-diff%EF%BC%8C%E7%94%A8%E6%9D%A5%E5%B8%AE%E6%88%91%E4%BB%AC%E7%9C%8B%E6%87%82 AI 到底改了哪些代码。
现在用 AI 写代码,十几分钟就能改三四十个文件。有些改动可以直接去产品里试效果,但像修改 Skill 文案或者核心业务逻辑,我自己还是得人工确认一下,心里才踏实。
问题是直接翻 Git diff 文件太多,抓不住重点;如果直接让模型基于变更从零写一个 HTML 报告,很多模型又只会在页面里塞满大段文字,比 Git diff 还难看懂。
所以我做了 oil-diff,把汇报标准定成“给不写这块代码的老板看,也能一眼看懂”:
1. 先按业务逻辑把几百行改动归纳成几件事,用路由分流、控件前后对比等可视化图示,直观展示改之前是什么样、改完是什么样;如果调试时有真实截图,也会直接放进报告里对比。
2. 需要核对细节时,点击每件事下面的“核心必看”文件,右侧就会滑出抽屉展示对应的代码 Diff,不用在几十个文件里大海捞针。
3. Skill 里内置了采集脚本、配图规范和页面模板,AI 不需要从零手写整个 HTML,生成的报告结构稳定,也不会堆满废话。
如果你平时用 AI 写代码也有同样的痛点,欢迎试试这个 Skill。
6 likes · 675 views
🤖 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
Spotlight 建索引慢、搜结果还漏,Oil Find 干脆自己攒一份文件名索引放在内存里,⇧⌘F 一按边打边出结果,几百毫秒内就能看到文件躺在哪个目录。
oil-oil/oil-find t.co
1 like · 572 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,327 views
这两天 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.
10 likes · 1,733 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
Mentions
Scrolling a 40-file diff is the worst part of shipping. oil-diff turns a branch's changes into one readable HTML page, grouped by feature, with before/after shots and must-read files flagged. Review the story, not the file list. oil-oil/oil-diff
将 Git 改动、提交范围或工作区修改生成直观易读的可视化 HTML 改动汇报页 oil-oil/oil-diff t.co
最近新开源了一个 Skill 叫 oil-diff:oil-oil/oil-diff%EF%BC%8C%E7%94%A8%E6%9D%A5%E5%B8%AE%E6%88%91%E4%BB%AC%E7%9C%8B%E6%87%82 AI 到底改了哪些代码。 现在用 AI 写代码,十几分钟就能改三四十个文件。有些改动可以直接去产品里试效果,但像修改 Skill 文案或者核心业务逻辑,我自己还是得人工确认一下,心里才踏实。 问题是直接翻 Git diff 文件太多,抓不住重点;如果直接让模型基于变更从零写一个 HTML 报告,很多模型又只会在页面里塞满大段文字,比 Git diff 还难看懂。 所以我做了 oil-diff,把汇报标准定成“给不写这块代码的老板看,也能一眼看懂”: 1. 先按业务逻辑把几百行改动归纳成几件事,用路由分流、控件前后对比等可视化图示,直观展示改之前是什么样、改完是什么样;如果调试时有真实截图,也会直接放进报告里对比。 2. 需要核对细节时,点击每件事下面的“核心必看”文件,右侧就会滑出抽屉展示对应的代码 Diff,不用在几十个文件里大海捞针。 3. Skill 里内置了采集脚本、配图规范和页面模板,AI 不需要从零手写整个 HTML,生成的报告结构稳定,也不会堆满废话。 如果你平时用 AI 写代码也有同样的痛点,欢迎试试这个 Skill。
🤖 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
Spotlight 建索引慢、搜结果还漏,Oil Find 干脆自己攒一份文件名索引放在内存里,⇧⌘F 一按边打边出结果,几百毫秒内就能看到文件躺在哪个目录。 oil-oil/oil-find t.co
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