設計系統(品牌指南)
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差異很大,請調整佈局(文件頂部的 grid.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 是其衍生版本(黃色字幕和卡片)。
規則
我們從設計系統中汲取靈感(顏色、字體、人體工學);但絕不在介面中複製第三方標誌或品牌名稱。