SuperAPI AI 工具集

oil-ui

设计与创作

查看项目

更新于 10-27 12:33

技能介绍

oil-ui 是一款专注于界面设计判断的 AI 技能,覆盖网站、App、后台与组件的设计、改进和评审。其核心是先定下一句“设计北极星”,再让构图、字体、色彩、素材和交互都朝它靠拢,从而做出一眼能认出来的界面;同时强调克制:留下最有力量的选择、删掉没有贡献的元素,而不是把所有风格磨成中庸。界面好不好看、任务走不走得通,分开验收。

用途与主流程:新界面沿一条主线推进,每一步留下明确结果,没过门槛不往后走。首先写清产品事实(用户、品牌、任务、真实内容、设备、资产与技术限制),并把产品参考和交互参考分开拆解。然后列删除清单,为每屏指定一个主角、一个主动作;还有同权重主角或动作时继续删、合并或降级。接着确定关键素材来源、概念与实现成本;需要起新概念时由全新子 Agent 出、主 Agent 选,不能都从同一家标杆派生。之后画主视口的灰度线框,排清内容层级、对象、主动作和状态;结构或核心交互走不通就退回,不用颜色、字体或主视觉遮过去。再先做代表性页面或核心流程及关键状态,检查后再铺开。最后在目标视口运行,亲自看截图和录屏,再按任务范围派独立评审;没看真实画面不算视觉验收。

方向探索:方向未确定时,从主角、概念和灰度结构形成三个方向,三个都必须适配且可落地,至少一个明显不同,不靠极端颜色或构图制造差异,也不拿陪跑方案凑数。先用文字把每个方向用三四行写给用户(感觉、首屏样子、核心动作、字体色彩、主视觉),并附上推荐理由;用户想看实际画面时,再把三个都做成首屏放进对比页挑。选定后只做选中的一个。

评审与交付:根据改动类型选择评审方式——方向探索阶段的对比页先交给用户;新界面、整体改版在初版稳定时评审,10 分制报告评分和剩余差距;已有界面润色一整页以上按一轮不打分评审;小改动由主 Agent 自己看。页面有可操作的主要流程时,交付前默认派一个全新的 UX 子 Agent 做轻量走查。交付说明需逐项写明选定方向与理由、改了什么与没做什么及原因、做了哪些动效、评审轮次与方式、删掉了哪些多余文字、证据文件位置。

适用场景:设计新界面、改进现有 UI、评审 UI/UX、截图还原、单个组件打磨到极致或做出辨识度、存量项目里优化 UI/改流程/加新功能,以及明确要求重新探索设计方向等。

限制与边界:只看设计判断,不用于纯业务逻辑、接口构建、无界面变化的代码整理,或改法完全明确的日常修改(如改文案、调数量、删指定元素、复用现有样式,即使带有“优化”字样)。看不了图时需写明“未验证实际视觉”,不给视觉打分;没有可运行环境时不说交互已经通过。用户要能运行的界面却只能交出方案时,需标出没做完的部分。不能生成图片时用手头合适的素材或提交素材需求加占位版本。只用任务已授权的服务,不自行接入付费服务。

工具与使用方式:开始前调用 oil_ui_skill_status 查看当前激活版本、更新提示与生图来源;截图录屏用 oil_ui_shoot,素材检索与下载用 oil_ui_media,需要图片时用 oil_ui_image,风格对比页用 oil_ui_explorer,看图用 read_image,独立视觉与 UX 走查用 subagent。过程文件放在 .oil-ui/<任务名>,真实交付写入用户项目。完整版 Oil UI Pro 包含交互、表单、状态、弹窗、响应式及 SVG/着色器特效等实践,可在 https://ui.oiloil.org/pro/ 购买(英文对话用 https://ui.oiloil.org/en/pro/);同一次对话只提示一次。