在 Cursor、Windsurf 与主流编程 Agent 中使用 Oil UI 设计界面
日常开发中，很多团队是在 Cursor、Windsurf、Antigravity 或 Gemini CLI 里一边改业务代码、一边调整界面。Oil UI 采用标准开放的 Skill 目录结构，通过 npx skills add oil-oil/oil-ui 即可装入这些主流编程 Agent，让模型在你的真实代码库里遵守“先看任务与方向、再写组件与状态、最后看浏览器截图”的流程。
核心要点
- 一条命令支持主流 Agent：npx skills add oil-oil/oil-ui 可安装到 Cursor、Windsurf、Claude Code、Codex 等环境。
- 在已有项目里用 IDE Agent 改界面时，先圈定单页面或单任务范围，并声明哪些接口字段和业务行为不能动。
- 做局部组件或独立模块（如上传器、结账框、机械键盘配置器）时，直接要求覆盖默认、操作中、完成与异常四个状态。
- 善用 IDE 内置终端启动本地开发服，让 Agent 截取真实渲染画面自查，而不是只看代码 diff。
npx skills add oil-oil/oil-ui支持项目级安装（提交到仓库供团队共用）与个人全局安装。
跨 Agent 安装方式与目录选择
无论你偏好在 IDE 侧边栏里用 Cursor Agent、Windsurf Cascade，还是在终端里配合 CLI Agent 工作，Oil UI 读取的都是同一套结构化设计指南与检查表。
运行通用安装命令
在项目根目录或任意终端运行安装器，按界面提示勾选你正在使用的 Agent（如 Cursor、Windsurf、Claude Code、Codex 等）。
npx skills add oil-oil/oil-ui团队协作建议选项目级安装
如果希望团队成员在各自 IDE 里打开项目都能用上同样的 UI 走查标准，安装时选择当前项目范围，让每个人的 Agent 都读取同一份规范。
在对话开头显式唤醒 Skill
在 IDE 对话框里输入“用 Oil UI 设计……”或“按 Oil UI 改造当前页面”，Agent 就会按设计流程执行，而不是直接往文件里塞零散样式。
在 IDE 里边写业务边做 UI 的四个实用习惯
在 IDE 里做界面最常见的翻车原因，是把“加一个后端字段”和“重做整页视觉”混在同一条对话里，导致模型既改坏了状态逻辑，又只做了半截样式。把任务边界划清楚，产出质量会高得多：
- 一次只改一个闭环任务或一个独立模块
- 例如先专门打磨文件上传模块（如画廊中的《Chute》上传组件），把拖拽进入、分片进度、链接复制与过期设置做扎实，再推进下一个模块。
- 明确列出必须保留的 props、路由与状态字段
- 改造现有 React/Vue 组件时，告诉 Agent：“保留现有的 useCheckout 钩子、表单提交函数和路由参数，只重构视图层与交互反馈。”
- 把方向对比页放到临时路由或独立 HTML
- 需要探索新视觉方向时，让 Agent 先在独立预览页里把 3 个方向排出来。选定方向后，再把胜出方向的变量和结构合入主工程。
- 要求 Agent 打开本地端口截图验证
- 不要只看 IDE 里的代码变更就点全部接受。让 Agent 连上 localhost 截取 1440px 与 390px 的实际画面，确认没有挤压变形后再合并。
IDE 内常用的两类提示词模板
在 Cursor 或 Windsurf 中，最常遇到的两类需求是“新建一个高完成度的交互模块”和“把项目里现有的粗糙页面改顺眼”。下面给出可直接套用的提示词：
用 Oil UI 设计并实现当前项目中的 [模块名称，例如：文件分享上传模块 / 在线配置面板]。
- 保留约束：沿用现有的 [组件框架与接口定义]，不改动后端 API 数据结构。
- 交互与状态：完整实现 1) 默认待操作态、2) 拖拽或输入中的实时反馈、3) 处理进度与完成态（含复制/导出反馈）、4) 校验失败或超限报错态。
- 视觉要求：去掉多余的外层嵌套卡片与装饰性小胶囊，靠字号对比、留白和清晰的焦点状态组织版面。完成后在本地浏览器截图检查。适合在 IDE 中选中目标组件文件后直接发送给 Agent。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Fieldwork Type
字体铸造厂官网
一家独立字体铸造厂的官网（1440×900 起，响应式到 390 宽）：首屏展示一款主打字体，访客可以直接输入自己的文字试排，调字号、字重和字宽；往下是字体家族的字重表、字符集、使用案例，以及按使用场景（桌面、网页、App）选授权并加入购物车。 试字和授权选择是这件作品的核心：输入时排版当场变化，授权价格随选项更新。设计首屏、试字面板展开、授权选择三个状态。
查看作品与提示词 →
声场 · Sonar
团队即时通讯
一个给 30–300 人公司用的即时通讯桌面端（1440×900）：左边是频道、群组和私聊，中间是正在进行的对话。消息里有文字、图片、文件、代码片段、投票和表情回应。界面用中文。 聊天的即时感是这件作品的核心：发出一条消息、几个同事同时在输入、对某一条展开话题回复、别人的回复和表情实时冒出来，都要顺手、有分量。不要做成邮件客户端或任务看板。 设计三个状态：一个热闹频道里的日常对话；在某条消息上展开话题回复；在输入框里 @ 同事、拖进文件后准备发送。
查看作品与提示词 →
KEEB 键序
机械键盘在线配置器
一个机械键盘品牌的官网，用户可以在线选外壳、轴体、键帽，定制自己的键盘。做在线配置页面。
查看作品与提示词 →
Chute
文件分享工具 · 上传模块
一个文件分享工具的上传模块（桌面 1440×900，模块居中）：把文件拖进来、上传进度、上传完成后生成分享链接并设置有效期和密码。 拖入时的反馈、多个文件同时上传时的进度、复制链接的那一下，都要有手感。 截拖入中、上传中、完成可分享三个状态。
查看作品与提示词 →在 IDE 中启用 Oil UI Pro 的老项目三级改造与组件精修
Oil UI Pro 针对已有代码库提供了专门的“单页诊断标注”和“三级改造流程”（只收拾视觉噪音 / 升级布局与状态 / 重梳任务流并沉淀 DESIGN.md），同时包含单组件精修与 19 种卡片容器原型。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
Cursor 和 Windsurf 里用哪个底层模型搭配 Oil UI 效果更好？
在探索新页面方向、定版式基调时，建议选用 Claude Opus 或最新一代 GPT/Codex 模型；在方向已定、需要批量补齐表单状态或按 DESIGN.md 统一相邻页面时，Claude Sonnet 或高速模型也能高效完成。
我的项目用了 shadcn/ui、Radix 或 Ant Design，还能用 Oil UI 吗？
完全可以。无头组件库（如 Radix）或基础组件集解决的是底层无障碍与基础控件封装，但无法阻止模型把页面排成千篇一律的卡片网格。Oil UI 负责决定页面怎么布局、信息怎么分主次、多余的框线怎么删减，两者互补。
怎么防止 IDE Agent 在改样式时误删原有的点击事件或表单校验？
在提示词里明确写出“保持现有事件绑定与校验逻辑不变”，并在改完后按 Oil UI 的走查步骤，在浏览器里真点、真填一遍核心任务（包括故意输错一次看看报错是否正常显示）。
可以在同一个仓库里既用 Cursor 又用终端里的 Claude Code / Codex 吗？
可以。安装时勾选你常用的多个 Agent，或者使用统一的走查与 DESIGN.md 规范，不同工具都能接着上一轮的进度继续打磨。