- oil-ui-pro 升到 0.22.2:references 13→28 份(新增 16、删 imagery.md)、assets 增 cards/(22 组)与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径:官方 `npx github:oil-oil/oil-cli update` 稳定失败(error=replace、报「检查目录权限」)。 真身为 EXDEV —— 解压在 os.tmpdir()(C 盘)、技能目录在 E 盘,Windows 上 rename 不能跨盘; CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed,真错误一个字不吐。 做法=借其 prepare() 只做下载+校验,再 cp 到同盘 stage、rename 交换;官方命令复验 up_to_date。 - 回归:product-planning 按名引用的 visual-review.md/tools.md/design-direction.md/style-explorer.md 全部健在;命名闸门 2061|0|27。 - session-mechanism/references/pitfalls.md 新增 P0-98(含通则:更新器把原生错误兜底成指错方向的人话)。
3.7 KiB
风格对比页
把几个候选放在同一页里并排比较,由用户挑选。用户可以并排或单张查看、按实际尺寸看、选定并复制方向。对比页的外壳只负责比较和挑选,不带风格倾向,也不作为候选的参考。
几个候选的核心内容、主要动作和目标用户保持一致,变的是构图、信息怎么组织、字体的气质、色彩关系、疏密和用图的方式。放几个候选,看用户要几个、真正有差别的有几个;不复制整个产品来凑数。
准备输入
一轮只生成一个对比页。候选能跑就用真实页面:单独写的 HTML 小样直接嵌入,项目里的方案用本机地址,拿不到可运行的页面时才用截图。每个方案一个画面:存量项目选入口或差别最大的那一步,整站方案只放代表页。
在一个目录里放 manifest.json 和候选文件。候选引用的图片、字体、视频也放在这个目录或它的子目录里,用相对路径引用,生成器会把它们内嵌进对比页。manifest 最少这样写,尖括号里换成本轮候选的实际内容,方向用方向卡里写的:
{
"schemaVersion": 1,
"project": "<项目名称>",
"brief": "<所有候选共同表达的内容与主要任务>",
"round": "<轮次,例如 01>",
"candidates": [
{
"id": "<小写唯一标识>",
"name": "<方向名称>",
"concept": "<北极星:一句能指导取舍的体验意图>",
"typography": "<实际使用的字族、字重与尺度关系>",
"palette": ["<十六进制色值>", "<十六进制色值>", "<十六进制色值>"],
"traits": ["<可观察特征>", "<可观察特征>"],
"source": "<候选文件的相对路径>"
}
]
}
| 情况 | 在 manifest 里加 |
|---|---|
| 固定画布的界面,不随宽度重排 | 顶层或候选里写 "nativeViewport": "<宽>x<高>"。对比页按这个视口渲染,再整体等比缩放,候选不用自己写缩放 |
| 自己写的可操作小样 | 候选加 "interactive": true |
| 项目里要运行起来才能看的页面 | 候选的 kind 设为 "url",用 url 指向本机开发服务器;顶层用 serve 写下启动命令 |
| 改动已有页面 | 把现状也放进来,加 "baseline": true |
| 只有截图 | 候选的 kind 设为 "image" |
每个字段的写法和限制见生成器的 --help。
生成和打开
<python> <skill>/scripts/build_explorer.py <manifest 所在目录>/manifest.json
对比页生成在 manifest 旁边,文件名是 style-explorer.html。写错时生成器会把所有要改的地方一次列出来,照着改完再运行;同名文件已经存在时加 --force。运行不了生成器时,把 manifest 和候选留给用户直接看,说明对比页还没有组装,不临时另写一套工具。
有本机地址候选时,交付时让开发服务器开着。用户之后说“打开对比页”:读 manifest 里的 serve,在 cwd 里后台运行 command,等 url 能访问了再打开对比页。
记录选择
用户点“选择”会复制一句话,例如“<轮次>:选 03 <方向名>”。用户粘贴它或直接说出选择后,按轮次和编号对照当前 manifest,确认是这一轮的,把选择和备注更新到设计说明,再回到生成这个对比页的流程接着做。对比页不会写回任何文件,也不会自动给 Agent 发消息。
交付前核对候选:每张画面和 manifest 里写的页面、状态、视口一致,中文字体真实渲染出来了。判断文字大小和细节时用单张查看的“实际尺寸 100%”,适应窗口的缩小图不能当作可读性通过。对比页本身的功能由 Skill 自带的测试保证,任务里不验证、不读模板源码。