正在打开每日关注
Oil Frontend：从视觉到代码反 AI 味
一套面向前端 Agent 的中文规范，约束任务、状态、界面与代码归属，提升 AI 产出的可用下限。
来源摘录
分享一下最近开源的一个新 Skill Oil Frontend: https://t.co/mg0NF8GfKf 如果大家本身对于前端相关的一些规范或者设计没有那么了解的话，那我就非常推荐大家使用这个skill。 这个 skill 提供了前端相关的组件、函数。架构设计相关的规范，还有一些非常基础的 UI UX， AI 经常会犯的一些问题，比如说： 1. 到处都写没有必要的描述文字 2. 把一些用户不可读的信息展示在 UI 上 3. 没有做函数化，组件化，重复维护逻辑 4. 相同数据数据源不单一，重复维护 5. 大量 UX 相关的错误实现 6. 过时的代码不清理，留了各种 fallback，写了很多过时国际化文案和 css 样式 ... 很重要的是，这个 skill 它们不会有明确的风格化取向。里面描述的信息虽然说很通用，但是它又是针对于我自己实际使用 AI 进行前端开发的过程中遇到的痛点，如果重复两三次遇到一个问题，那么我就会把它补充到这个skill 里面去。所以它不仅通用，也同时是有针对性的。 这个 Skill 里面纠正的问题即便是 GPT 5.6 sol 或 Claude Opus 5 如果没有使用时都有可能会出现。使用这个 Skill 可以大幅度的提升AI去写前端代码的下限。 我觉得其实可以简单的概括为：从视觉设计到代码层面去反 AI 味儿的一个 Skill。
深度解析
是什么
oil-frontend 是 oil-oil 开源的中文 Agent Skill，仓库当前 117 Stars。它不是组件库，而是一套约束前端 Agent 的判断顺序：从用户任务和业务对象出发，继续检查信息有效性、数据状态、界面与代码归属、视觉动效，最后完成旧实现迁移和验证。
核心设计
规则先确认用户要完成的结果、字段所有者及列表、详情、编辑器职责，再决定页面形态；随后要求同一数据只有一个权威来源，让查询、分页、总数和加载范围真实一致，并让局部请求只影响对应对象。视觉处理按层级、空间、排版、表面、控件状态和动效推进，页面负责组合，组件负责自身视觉与状态。
关键洞察
它把“能运行、能构建”提升为“用户操作时不被误导”，专门收敛 AI 常见的冗余文案、内部字段、重复逻辑、伪操作和 legacy 残留；同时不强推固定审美，适合实现、重构和评审前置使用。
边界与风险
README 明确不规定框架、状态库、CSS 方案或目录模板，也不覆盖纯构建、部署、依赖、安全和后端任务，因此它是前端产品质量护栏，不是完整架构规范。机械删除 fallback 仍需结合真实兼容需求、数据流和共享组件使用位置判断。