oil-ui
Design, improve, and review interfaces for websites, apps, dashboards, and components: explore directions, generate side-by-side comparisons, and refine visual hierarchy against real screenshots. Delivers a comparison page, design notes, a comp, or a working interface when asked. Design judgment only. Hand off to oil-ui-pro when that skill is installed.
Install
npx skills add https://github.com/oil-oil/oil-ui --skill oil-ui显式探索与比较
上级入口:Skill 主流程。只有用户明确要求比较设计方向、改动档位或版式时才进入本流程。它叠加在新建、重设计或存量任务上,不替代各任务的产品事实、锁定范围、制作和验收规则。领域模块只提供方法,不自行增加候选数量或重启选择流程。
数量先服从用户;用户没有指定数量时才默认三个。比较改动档位时保留现状基线;比较版式时保持选定方向的字体、色彩和控件语法,只改变骨架、主视觉摆法和页面结构。内部概念、草图和素材候选的数量不随对外方向数量减少。
先用文字收敛
先沿主入口确定基础任务与适用的领域规则;按它要求的方案产物形成所需数量的对外方向。基础路径要求通用方向流程时,才按 设计方向 [blocked] 完成产品事实、删减、概念、主视口灰度和过关检验。每个方向都必须适配且可落地,不靠极端颜色或构图制造差异,也不拿陪跑方案凑数。骨架按需读 说服型骨架 [blocked]。
先用三四行写清每个方向的感觉、首屏、核心动作、字体、色彩和主视觉,附上推荐及理由,再问用户:按其中一个直接做,还是把这些方向做成首屏放在一起比。发给用户后这一轮结束。用户从文字里选定,或者已经说清想要什么,就只做选中的一个,不做对比页;用户要看实际画面,才制作多个首屏。
只交付设计说明时止于方向卡,并说明未渲染。用户已经给定参考图、品牌规范或明确风格时,所有方向都留在这个风格里,只在骨架、主视觉和页面结构上拉开。
用户要看实际画面
按 风格对比页 [blocked] 把各方向首屏放在一起。每个方向一个 HTML 文件、一个视口、只做首屏和主状态,不提前铺成多个完整页面;不写交互、响应式和动效,不取证,不派画面评审。宿主支持并行制作时按方向分工,不让多个执行者同时修改同一份共享样式。
- 各方向共用同一份产品事实和示例数据,只写一次;结构、样式、标题、副标题和主视觉各写各的,不用同一模板换几组样式凑数。
- 主视觉靠图的方向按 素材 [blocked] 生成一张,至多重新生成一次;页面已有专项候选流程时按专项,不重复增加生成批次。其余图位先用从页面取色的色块占着。
- 对候选目录统一截图,一次出齐缩略图与并排总览
sheet.png,主 Agent 亲自看过,只修重叠、裁切和明显粗糙后交付。 - 附上推荐理由,请用户选定方向并说出具体喜欢和不喜欢哪里,然后结束这一轮。
用户说了“你定”“直接做”,或者无人值守时,不问并自主选定,但仍只在明确探索时制作这些候选。把截图缩到 480px 宽并排看一次,写下选择理由,再只深化选中的一个。
比较版式
先用文字写出两三种骨架的差别;能从文字选定就只做一个,要看实际画面再做成首屏,连同选中的方向放进对比页。用户只回复选哪个,就并入意见直接做完整页面;想拼合两个方向时,先做出拼合后的首屏给用户确认。