视觉风格指南
1. 提取
bin/monteur charte capture1.png capture2.png [video.mp4] ["https://youtube.com/watch?v=…"] --name editingos
→ ui/themes/editingos.json(主色调,建议的色彩角色)+ 截图位于 ui/themes/editingos/。对于 YouTube 视频,界面出现的时刻很重要:如果用户提供了时间戳,先分割视频:ffmpeg -ss 03:12 -t 20 -i video.mp4 extrait.mp4。
2. 微调(由你通过 Read 查看截图来完成)
在 ui/themes/<名称>.json 中:
colors:bg(背景)、surface/surface2(面板)、text、muted、accent(按钮、选中状态)、accent2(次要状态)。文本与背景的对比度 ≥ 4.5:1。fonts.display/fonts.body:最接近的字体(如果需要,将 OFL 字体安装在assets/fonts/中;Studio 使用系统/已安装的字体)。radius(圆角像素值)、layout_notes:观察到的布局(侧边栏、时间线、格式卡片、检查面板等)。 如果布局与ui/index.html差异很大,则调整页面布局(文件开头的 CSS 网格),同时保留所有函数和/api/*调用。
3. 激活
Studio 右上角的「视觉风格」选择器,或 ui/settings.json → {"theme": "editingos"}。
同时统一视频风格:如果用户希望拥有共同身份,将 accent 应用到 styles/*.json(subtitles.highlight、motion.accent)。
默认视觉风格:nocturne
根据用户参考视频逐帧提取:深蓝色 #070A12,面板 #0E1320,黄色强调色 #FFD935(导航圆点、主要按钮),绿色 #4ADE80(准备好重播),红色 #FF5A6E(过期);页面标题使用 Instrument Serif 斜体,正文使用 Montserrat,标签和数字使用 Space Mono 并大写加宽。视频风格 styles/nocturne.json 是其变体(字幕和卡片为黄色)。
规则
我们从现有视觉风格中汲取灵感(颜色、字体、人体工程学);不复制第三方徽标或品牌名称到界面中。