AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载本篇技术指南围绕 video-shotcraft 仓库中template/成片模板的主题Themes能力展开它把原本固定纸墨琥珀配色的 Ink Press 宣传片模板扩展为一套可整体换肤的视觉系统支持在动效工作台左侧的主题面板中切换 9 套预设、用取色器或 HEX 输入微调 7 个语义色并把同一套配色贯穿到工作台属性面板、Remotion 直接渲染和视频导出。读完本文你将掌握themeId/themeColors的存储与优先级语义、palettes.json单源配色设计、基于foreignObject的 SVG 材质重着色管线以及调色板的保存/导入/导出与测试验证流程。一、主题面板预设选择与语义色编辑打开工作台左侧边栏中的**主题Themes**标签页上半区用于选择预设preset下半区用于编辑当前预设的配色。可编辑的颜色共有 7 个语义槽位分别对应背景page、卡片表面surface、输入/填充域field文档中称为 subtle fill、正文文本text、次要文本muted、强调色accent与描边border。每个槽位都可以用取色器color picker或直接输入六位 HEX 值如#2459ad修改按 Enter 或移出 HEX 输入框即生效非法输入会被直接丢弃不会写入项目。预设面板提供 9 套主题Ink Press纸墨、Modern Light现代浅色、Midnight暗黑、Sage清新鼠尾草、Coral珊瑚点缀、Iris柔和鸢尾、Deep Ocean深海蓝、Obsidian Violet黑曜紫、Vintage Kraft复古牛皮纸。其中 Sage、Coral、Iris 是后来取代早期高饱和实验配色的浅色系预设对应 ID 分别为solar-pop、coral-burst、color-play这三个旧 ID 仍然兼容已保存的项目文件不会因改名而破坏存量数据。Coral 的中性表面 深紫文本 珊瑚强调配色方向借鉴了 Happy Hues 配色站但数值是为本模板定制的近似值并非对整套站点的照搬。二、状态语义存储、撤销与优先级规则主题状态以两个字段写入项目 JSON 与浏览器保存themeId当前预设 ID与可选的themeColors调色板覆盖。这两者的变更都支持撤销/重做undo/redo。值得注意的一个实现细节是一次连续的取色器拖拽手势只产生一个撤销步骤且手势期间当前选中的 clip 始终保持选中状态避免高频色值变化污染历史栈——这一点在 test-themes.mjs 中有直接验证连续 80 次设置themeColors.accent后store.getState().past.length仍为 1undo 一次即可整体回退。优先级的核心规则如下切换另一个预设会清空当前调色板覆盖themeColors面板中的恢复预设按钮则只清空当前预设的覆盖两者效果一致。源码层面由 workbench/src/theme.ts 的switchTheme实现{...project, themeId: id, themeColors: undefined}——切换只改 ID、清覆盖其他轨道数据一律原样保留。显式的逐 clip 编辑始终优先于主题默认值且在切换预设后保留。themedProps的合并顺序为schema 默认值 → 预设 unitDefaults → 项目调色板映射 → 显式 clip 覆盖任何出现在最后一级的显式值都不会被预设覆盖详见下文属性解析优先级。Ink Press 是特殊预设它保留原始栅格截图素材没有调色板编辑器。想同时重着色胶片画面与其演示 UI 素材需要切换到其他预设。可编辑预设会保留周报标题栏report-header band中的每周文案并使用底部紧凑的 36px 字幕默认值但显式的逐 clip 文本、字号、位置编辑仍然优先测试见 test-themes.mjsInk Press 字幕默认 22px/bottom 72其余预设统一 36px/bottom 32。主题的生效范围限定在已适配的模板场景即template/下的 AiflPromo 成片场景Gallery 里的普通卡片和编辑器自身的界面 chrome 不会跟随全局重着色。旧项目迁移没有主题标记themeId为undefined的旧项目会在加载时被规范化一次——由 upgradeLegacyTheme 补写默认themeId并把与当前默认预设恰好相同的继承值从 clip props 中剥离inheritedProps此后显式编辑永远不会被推断或误删用户完全可以在迁移后显式选择与某个预设默认值相同的颜色它会被当作显式覆盖保留下来。三、单源配色palettes.json 与 visual-theme.tsx8 个可编辑预设的七色定义全部收敛在单一文件 template/src/themes/palettes.json 中场景适配器与themes/ui.cjs都读取它。新增一个预设只需要三件事加 palette 定义、加类型 ID、加 manifest 标签——不需要复制整棵场景树。下表是该文件实际记录的 8 套预设七色值Ink Press 无调色板其纸底为#f2eee6预设 IDpage 背景surface 表面field 填充text 正文muted 次要accent 强调border 描边modern-light#f4f7fb#ffffff#edf2f8#142238#5c6b82#2563eb#d8e2efmidnight#090f1a#111c2c#162438#f0f5ff#9babbe#61d9ef#293b52solar-popSage#f9faf6#ffffff#f0f3e7#26342b#637067#527434#dde4d5coral-burstCoral#fffffe#ffffff#f9f2f3#1f1235#716579#d94e59#e9dfe6color-playIris#f7f5fb#ffffff#eee9f7#282039#726781#7354b5#e2dbeadeep-ocean#0b1620#142735#1c3443#e8f1f5#9fb6c3#7cc8b4#304957obsidian-violet#14121b#211d2c#2e283d#f0edf7#b3a9c5#bca0e8#41364fvintage-kraft#c8aa7d#dfc69e#ccb086#382a20#6b513b#8b4937#ac895e主题解析与 CSS 换色原理template/src/themes/visual-theme.tsx 是主题运行时核心VISUAL_THEMES把每套预设展开为完整的VisualTheme并预计算pageRgb/accentRgb/shadowRgb/lightRgb/stage等 RGB 派生值供rgba()/color-mix场景使用resolveTheme(id, colors)负责预设 覆盖合并未知或缺失 ID 一律回退到ink-presscolors中只有键存在于预设 palette 且匹配/^#[0-9a-f]{6}$/i的合法 HEX 才会被采纳非法值静默丢弃themePaint(theme, css)是对场景原始 CSS 素材的材料适配器做三类替换已知的 Ink Press HEX 令牌如#f2eee6纸底、#13110f墨字、#955905琥珀、#65635f灰墨按角色映射到新主题色oklch()按明度区间分类映射≥94 → page≥80 → border≥40 → accent其余 → text并保留透明度原始rgb()/rgba()通过INK_RGB_ROLES白名单识别角色——暖光照如255,190,120系映射为光照而非 UI 强调色琥珀强调映射为 accentRgb深色映射为 shadowRgb未知 RGB 一律原样保留不做猜测。Ink Press 自身返回原 CSS 原样保证旧预设的原始渐变完全向后兼容。每套预设的场景默认值sceneDefaults为每个场景组件生成按预设变化的默认 propsInk Press 返回原始默认值开场wordmarkSize: 116 / kickerSize: 44、收尾wordmarkSize: 124 / taglineSize: 44、字幕fontSize: 36 / bottom: 32、周报场景kickerSize: 20。这些默认值由 template/src/themes/manifest.tsx 的withThemes织入工作台 manifest同时被直接渲染与工作台属性面板共享保证工作台里看到的 视频里渲出来的。四、可编辑材质管线palette-assets.json 与运行时重着色换肤不只是换背景色——模板画面里的整页截图、元素切片也要跟着变。实现方式是先序列化、后运行时重着色template/src/themes/palette-assets.json 保存5 个可信的序列化演示页面projects / detail / papers / wbr / experiments与27 条裁剪定义projects-full.png、projects-empty.png、nav.png、card1–10、card4-hires.png、detail-full.png、detail-experiments.png、papers-full.png、wbr-full.png、paper1–5等坐标直接来自template/src/aifl/live-layout.json运行时 template/src/themes/palette-assets.ts 的paletteAsset用foreignObject把页面标记嵌入 SVG把 7 个语义色写成--page/--surface/--field/--text/--muted/--accent/--borderCSS 变量输出data:image/svgxmlURI 供Img使用同一渲染器在预览和视频导出中通用themeAsset见 visual-theme.tsx会在非 Ink Press 主题下把textures/live/素材替换为动态 SVG缺失则直接抛错重着色不调用任何截图采集服务、不用滤镜重绘像素——颜色是渲染期替换的变量第三方截图若要换肤仍需单独适配其数据源。两个工程细节值得一提paletteAsset带有界缓存最多 128 条超出后按插入顺序淘汰最旧条目防止取色器高频拖动时无限累积 SVGvintage-kraft预设额外注入程序化纸纹——一个固定种子seed 17的feTurbulence颗粒滤镜叠加在页面上固定种子保证相机运动时细颗粒始终长在纸上而不漂移测试断言该 URI 同时包含var(--变量与url(#kraft-grain)。重建可编辑材质修改了夹具标记fixture markup或页面几何后需要在template/目录下重新编译cd template node scripts/build-palette-assets.cjs该脚本template/scripts/build-palette-assets.cjs用 Playwright 无头浏览器把themes/ui.cjs渲染的页面 DOM 序列化为纯净的 XML 标记并按live-layout.json的坐标批量生成裁剪定义最终写回palette-assets.json。它依赖开发环境中的 Playwright两个环境变量可指定现有模块与 Chromium 可执行文件SHOTCRAFT_PLAYWRIGHT选择 playwright 模块默认playwrightSHOTCRAFT_BROWSER指定 Chromium 可执行文件路径。编译产物JSON是提交进仓库的因此终端用户不需要安装 Playwright 或浏览器即可正常渲染。五、工作台 Manifest 集成与属性解析优先级可选的 manifest 扩展字段包括themes[].palette、paletteProp配合已有的themes、defaultTheme、themeProp以及每个单元上的themeKey使用。在 manifest.tsx 中实际注入的是themeProp: __theme与paletteProp: __palette每个 clip 被包进一个独立的VisualThemeProviderstyleKey过滤器/Size$/或以ink/amber/muted/paper/accent/color/bottom开头的键决定哪些默认值参与换肤。属性解析优先级由 workbench/src/theme.ts 的themedProps实现且检查器、所有播放器、导出成片共用同一函数schema 默认值card schema 的 defaults预设默认值manifestthemes[].unitDefaults[themeKey]项目调色板映射——把场景默认值里的语义键按别名表paper→page、ink/color→text、amber/accent→accent、muted→muted替换为当前调色板实际颜色显式 clip 编辑overrides永远最后生效若 card 有themeKey再附上__theme与__palette供渲染桥读取。没有 palette 支持的普通 manifest 完全保持原有行为themedProps(null, ...)直接回落 schema 默认值 显式覆盖。另外validThemeColors只接受调色板中存在且为合法 HEX 的键值非法输入如font: evil、border: url(x)会被过滤——这是 test-themes.mjs 第一组用例覆盖的内容。六、直接渲染给 AiflPromo 传 theme 与 colors不经过工作台也可以直接渲染指定配色的成片。AiflPromo组合经 template/src/themes/ThemedFilm.tsx 的ThemedFilm包装内部以resolveThemeVisualThemeProvider接收参数接受theme与可选colors{theme:coral-burst,colors:{accent:#2459ad,surface:#e1ecff}}把这段 JSON 存为 props 文件例如props-coral.json然后npm run render -- --propsprops-coral.jsonnpm run render对应 template/package.json 中的remotion render src/index.ts AiflPromo out/promo.mp4--propsfile由 Remotion CLI 解析并注入AiflPromo的theme/colorsprops。工作台导出则改为携带project.themeId与project.themeColors两个项目级字段。缺失或未知的预设 ID 一律回退到 Ink PressresolveTheme的兜底逻辑保证任何历史 props 都能稳定出片。七、验证与出处在workbench/与template/两处都安装依赖后按如下顺序运行验证cd workbench npm run test:themes npx tsc --noEmit cd ../template npx tsc --noEmitnpm run test:themes对应 workbench/scripts/test-themes.mjs其覆盖范围与文档声明一致自定义调色板的校验与优先级、切换预设清空覆盖、显式编辑保留、旧项目legacy保存归一化、无主题项目、调色板历史gesture 撤销合并、周报文案保留、字幕默认值以及光照/强调/阴影三种 RGB 角色的独立映射见 test-themes.mjs。浏览器与视频导出层的人工验证结果记录在 PR #80 中。关于素材与版权模板夹具描述的是一个虚构的研究工作空间不是真实服务或真实研究结果原始素材沿用其既有署名/许可条款音频素材署名见 assets/audio/ATTRIBUTION.md新编写的夹具代码与派生素材遵循本仓库的 Apache-2.0 许可见 LICENSE。八、保存、导入与导出配色自定义配色可以沉淀为可复用的我的主题保存配色为当前调色板命名后点击保存配色即加入我的主题。这些条目存放在当前浏览器的 localStorage 中按 manifest 名称隔离最多 50 条与项目时间线数据完全分离。点击条目即套用点击其 × 按钮即删除。导出配色下载当前调色板JSON 内含调色板颜色、名称与基础主题 IDbaseThemeId。导入配色接受本面板导出的version-1shotcraft-paletteJSON校验基础主题在 manifest 中存在且可编辑 七色 HEX 字段完整合法后直接应用不触碰时间线里的任何编辑之后需再点保存配色才能进入我的主题。暂不支持任意配色网站的 JSON schema。导入的严格校验逻辑在 workbench/src/palettePresets.ts 的parsePalette中文件大小上限 65536 字符、必须是合法 JSON、format shotcraft-palette且version 1、名称非空且不超过 60 字符、baseThemeId指向 manifest 中带 palette 的主题、颜色键必须与基础主题 palette 完全一致且每个值都是六位 HEXpaletteFromProject负责导出名称自动截断到 60 字符未命名时生成主题标签 · 自定义applyPalette负责应用写回themeId themeColors且不改动 tracks。一个特殊的持久化细节Vintage Kraftvintage-kraft预设保存或导入其配色时程序化牛皮纸纹理仍然保留——因为纸纹来自渲染期的固定种子滤镜而非截图换色不会破坏纸面质感。九、小结video-shotcraft 的主题系统用一份palettes.json单源 一套可序列化材质 一条 props 优先级链解决了成片换肤的三件事面板上所见即所得地调色、工作台与导出共用同一渲染器、旧项目与旧 preset ID 平滑兼容。若要在自己的模板里加一套新主题最小路径是在 palettes.json 增加七色定义 → 在 manifest.tsx 的 presets 数组中补一个条目 → 按需修改夹具标记后运行node scripts/build-palette-assets.cjs重编译材质 → 用npm run test:themestsc --noEmit验证。无需复制任何场景树。赞分享AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载相关推荐Omarchy 主题系统完全指南colors.toml、模板渲染与主题激活流程Omarchy 主题系统完全指南colors.toml、模板渲染与主题激活流程 Omarchy 采用「语义化调色板 colors.toml 模板生成操作系统开发工具AI 应用CLITEdit 剪贴板粘贴预览的原地实时渲染架构在 WorldRenderXna 渲染管线中直接绘制剪贴板瓦片TEdit 剪贴板粘贴预览的原地实时渲染架构在 WorldRenderXna 渲染管线中直接绘制剪贴板瓦片 本文是 TEditTerraria Map Ed游戏开发桌面应用omarchy 主题系统全指南colors.toml、模板渲染与换肤工作流omarchy 主题系统全指南colors.toml、模板渲染与换肤工作流 omarchy 是一套开箱即美的 Linux 桌面发行版配置仓库其主题系统把操作系统开发工具AI 应用CLI上一篇AutoDock Vina 批量对接5分钟极速配置指南下一篇SunnyUI.NET 终极指南快速构建现代化WinForm应用的完整控件库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 7:23:42 · 阅读 1.2k video-shotcraft 模板主题系统实战指南：9 套视觉预设、单源调色板与直接渲染管线
AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载本篇技术指南围绕 video-shotcraft 仓库中template/成片模板的主题Themes能力展开它把原本固定纸墨琥珀配色的 Ink Press 宣传片模板扩展为一套可整体换肤的视觉系统支持在动效工作台左侧的主题面板中切换 9 套预设、用取色器或 HEX 输入微调 7 个语义色并把同一套配色贯穿到工作台属性面板、Remotion 直接渲染和视频导出。读完本文你将掌握themeId/themeColors的存储与优先级语义、palettes.json单源配色设计、基于foreignObject的 SVG 材质重着色管线以及调色板的保存/导入/导出与测试验证流程。一、主题面板预设选择与语义色编辑打开工作台左侧边栏中的**主题Themes**标签页上半区用于选择预设preset下半区用于编辑当前预设的配色。可编辑的颜色共有 7 个语义槽位分别对应背景page、卡片表面surface、输入/填充域field文档中称为 subtle fill、正文文本text、次要文本muted、强调色accent与描边border。每个槽位都可以用取色器color picker或直接输入六位 HEX 值如#2459ad修改按 Enter 或移出 HEX 输入框即生效非法输入会被直接丢弃不会写入项目。预设面板提供 9 套主题Ink Press纸墨、Modern Light现代浅色、Midnight暗黑、Sage清新鼠尾草、Coral珊瑚点缀、Iris柔和鸢尾、Deep Ocean深海蓝、Obsidian Violet黑曜紫、Vintage Kraft复古牛皮纸。其中 Sage、Coral、Iris 是后来取代早期高饱和实验配色的浅色系预设对应 ID 分别为solar-pop、coral-burst、color-play这三个旧 ID 仍然兼容已保存的项目文件不会因改名而破坏存量数据。Coral 的中性表面 深紫文本 珊瑚强调配色方向借鉴了 Happy Hues 配色站但数值是为本模板定制的近似值并非对整套站点的照搬。二、状态语义存储、撤销与优先级规则主题状态以两个字段写入项目 JSON 与浏览器保存themeId当前预设 ID与可选的themeColors调色板覆盖。这两者的变更都支持撤销/重做undo/redo。值得注意的一个实现细节是一次连续的取色器拖拽手势只产生一个撤销步骤且手势期间当前选中的 clip 始终保持选中状态避免高频色值变化污染历史栈——这一点在 test-themes.mjs 中有直接验证连续 80 次设置themeColors.accent后store.getState().past.length仍为 1undo 一次即可整体回退。优先级的核心规则如下切换另一个预设会清空当前调色板覆盖themeColors面板中的恢复预设按钮则只清空当前预设的覆盖两者效果一致。源码层面由 workbench/src/theme.ts 的switchTheme实现{...project, themeId: id, themeColors: undefined}——切换只改 ID、清覆盖其他轨道数据一律原样保留。显式的逐 clip 编辑始终优先于主题默认值且在切换预设后保留。themedProps的合并顺序为schema 默认值 → 预设 unitDefaults → 项目调色板映射 → 显式 clip 覆盖任何出现在最后一级的显式值都不会被预设覆盖详见下文属性解析优先级。Ink Press 是特殊预设它保留原始栅格截图素材没有调色板编辑器。想同时重着色胶片画面与其演示 UI 素材需要切换到其他预设。可编辑预设会保留周报标题栏report-header band中的每周文案并使用底部紧凑的 36px 字幕默认值但显式的逐 clip 文本、字号、位置编辑仍然优先测试见 test-themes.mjsInk Press 字幕默认 22px/bottom 72其余预设统一 36px/bottom 32。主题的生效范围限定在已适配的模板场景即template/下的 AiflPromo 成片场景Gallery 里的普通卡片和编辑器自身的界面 chrome 不会跟随全局重着色。旧项目迁移没有主题标记themeId为undefined的旧项目会在加载时被规范化一次——由 upgradeLegacyTheme 补写默认themeId并把与当前默认预设恰好相同的继承值从 clip props 中剥离inheritedProps此后显式编辑永远不会被推断或误删用户完全可以在迁移后显式选择与某个预设默认值相同的颜色它会被当作显式覆盖保留下来。三、单源配色palettes.json 与 visual-theme.tsx8 个可编辑预设的七色定义全部收敛在单一文件 template/src/themes/palettes.json 中场景适配器与themes/ui.cjs都读取它。新增一个预设只需要三件事加 palette 定义、加类型 ID、加 manifest 标签——不需要复制整棵场景树。下表是该文件实际记录的 8 套预设七色值Ink Press 无调色板其纸底为#f2eee6预设 IDpage 背景surface 表面field 填充text 正文muted 次要accent 强调border 描边modern-light#f4f7fb#ffffff#edf2f8#142238#5c6b82#2563eb#d8e2efmidnight#090f1a#111c2c#162438#f0f5ff#9babbe#61d9ef#293b52solar-popSage#f9faf6#ffffff#f0f3e7#26342b#637067#527434#dde4d5coral-burstCoral#fffffe#ffffff#f9f2f3#1f1235#716579#d94e59#e9dfe6color-playIris#f7f5fb#ffffff#eee9f7#282039#726781#7354b5#e2dbeadeep-ocean#0b1620#142735#1c3443#e8f1f5#9fb6c3#7cc8b4#304957obsidian-violet#14121b#211d2c#2e283d#f0edf7#b3a9c5#bca0e8#41364fvintage-kraft#c8aa7d#dfc69e#ccb086#382a20#6b513b#8b4937#ac895e主题解析与 CSS 换色原理template/src/themes/visual-theme.tsx 是主题运行时核心VISUAL_THEMES把每套预设展开为完整的VisualTheme并预计算pageRgb/accentRgb/shadowRgb/lightRgb/stage等 RGB 派生值供rgba()/color-mix场景使用resolveTheme(id, colors)负责预设 覆盖合并未知或缺失 ID 一律回退到ink-presscolors中只有键存在于预设 palette 且匹配/^#[0-9a-f]{6}$/i的合法 HEX 才会被采纳非法值静默丢弃themePaint(theme, css)是对场景原始 CSS 素材的材料适配器做三类替换已知的 Ink Press HEX 令牌如#f2eee6纸底、#13110f墨字、#955905琥珀、#65635f灰墨按角色映射到新主题色oklch()按明度区间分类映射≥94 → page≥80 → border≥40 → accent其余 → text并保留透明度原始rgb()/rgba()通过INK_RGB_ROLES白名单识别角色——暖光照如255,190,120系映射为光照而非 UI 强调色琥珀强调映射为 accentRgb深色映射为 shadowRgb未知 RGB 一律原样保留不做猜测。Ink Press 自身返回原 CSS 原样保证旧预设的原始渐变完全向后兼容。每套预设的场景默认值sceneDefaults为每个场景组件生成按预设变化的默认 propsInk Press 返回原始默认值开场wordmarkSize: 116 / kickerSize: 44、收尾wordmarkSize: 124 / taglineSize: 44、字幕fontSize: 36 / bottom: 32、周报场景kickerSize: 20。这些默认值由 template/src/themes/manifest.tsx 的withThemes织入工作台 manifest同时被直接渲染与工作台属性面板共享保证工作台里看到的 视频里渲出来的。四、可编辑材质管线palette-assets.json 与运行时重着色换肤不只是换背景色——模板画面里的整页截图、元素切片也要跟着变。实现方式是先序列化、后运行时重着色template/src/themes/palette-assets.json 保存5 个可信的序列化演示页面projects / detail / papers / wbr / experiments与27 条裁剪定义projects-full.png、projects-empty.png、nav.png、card1–10、card4-hires.png、detail-full.png、detail-experiments.png、papers-full.png、wbr-full.png、paper1–5等坐标直接来自template/src/aifl/live-layout.json运行时 template/src/themes/palette-assets.ts 的paletteAsset用foreignObject把页面标记嵌入 SVG把 7 个语义色写成--page/--surface/--field/--text/--muted/--accent/--borderCSS 变量输出data:image/svgxmlURI 供Img使用同一渲染器在预览和视频导出中通用themeAsset见 visual-theme.tsx会在非 Ink Press 主题下把textures/live/素材替换为动态 SVG缺失则直接抛错重着色不调用任何截图采集服务、不用滤镜重绘像素——颜色是渲染期替换的变量第三方截图若要换肤仍需单独适配其数据源。两个工程细节值得一提paletteAsset带有界缓存最多 128 条超出后按插入顺序淘汰最旧条目防止取色器高频拖动时无限累积 SVGvintage-kraft预设额外注入程序化纸纹——一个固定种子seed 17的feTurbulence颗粒滤镜叠加在页面上固定种子保证相机运动时细颗粒始终长在纸上而不漂移测试断言该 URI 同时包含var(--变量与url(#kraft-grain)。重建可编辑材质修改了夹具标记fixture markup或页面几何后需要在template/目录下重新编译cd template node scripts/build-palette-assets.cjs该脚本template/scripts/build-palette-assets.cjs用 Playwright 无头浏览器把themes/ui.cjs渲染的页面 DOM 序列化为纯净的 XML 标记并按live-layout.json的坐标批量生成裁剪定义最终写回palette-assets.json。它依赖开发环境中的 Playwright两个环境变量可指定现有模块与 Chromium 可执行文件SHOTCRAFT_PLAYWRIGHT选择 playwright 模块默认playwrightSHOTCRAFT_BROWSER指定 Chromium 可执行文件路径。编译产物JSON是提交进仓库的因此终端用户不需要安装 Playwright 或浏览器即可正常渲染。五、工作台 Manifest 集成与属性解析优先级可选的 manifest 扩展字段包括themes[].palette、paletteProp配合已有的themes、defaultTheme、themeProp以及每个单元上的themeKey使用。在 manifest.tsx 中实际注入的是themeProp: __theme与paletteProp: __palette每个 clip 被包进一个独立的VisualThemeProviderstyleKey过滤器/Size$/或以ink/amber/muted/paper/accent/color/bottom开头的键决定哪些默认值参与换肤。属性解析优先级由 workbench/src/theme.ts 的themedProps实现且检查器、所有播放器、导出成片共用同一函数schema 默认值card schema 的 defaults预设默认值manifestthemes[].unitDefaults[themeKey]项目调色板映射——把场景默认值里的语义键按别名表paper→page、ink/color→text、amber/accent→accent、muted→muted替换为当前调色板实际颜色显式 clip 编辑overrides永远最后生效若 card 有themeKey再附上__theme与__palette供渲染桥读取。没有 palette 支持的普通 manifest 完全保持原有行为themedProps(null, ...)直接回落 schema 默认值 显式覆盖。另外validThemeColors只接受调色板中存在且为合法 HEX 的键值非法输入如font: evil、border: url(x)会被过滤——这是 test-themes.mjs 第一组用例覆盖的内容。六、直接渲染给 AiflPromo 传 theme 与 colors不经过工作台也可以直接渲染指定配色的成片。AiflPromo组合经 template/src/themes/ThemedFilm.tsx 的ThemedFilm包装内部以resolveThemeVisualThemeProvider接收参数接受theme与可选colors{theme:coral-burst,colors:{accent:#2459ad,surface:#e1ecff}}把这段 JSON 存为 props 文件例如props-coral.json然后npm run render -- --propsprops-coral.jsonnpm run render对应 template/package.json 中的remotion render src/index.ts AiflPromo out/promo.mp4--propsfile由 Remotion CLI 解析并注入AiflPromo的theme/colorsprops。工作台导出则改为携带project.themeId与project.themeColors两个项目级字段。缺失或未知的预设 ID 一律回退到 Ink PressresolveTheme的兜底逻辑保证任何历史 props 都能稳定出片。七、验证与出处在workbench/与template/两处都安装依赖后按如下顺序运行验证cd workbench npm run test:themes npx tsc --noEmit cd ../template npx tsc --noEmitnpm run test:themes对应 workbench/scripts/test-themes.mjs其覆盖范围与文档声明一致自定义调色板的校验与优先级、切换预设清空覆盖、显式编辑保留、旧项目legacy保存归一化、无主题项目、调色板历史gesture 撤销合并、周报文案保留、字幕默认值以及光照/强调/阴影三种 RGB 角色的独立映射见 test-themes.mjs。浏览器与视频导出层的人工验证结果记录在 PR #80 中。关于素材与版权模板夹具描述的是一个虚构的研究工作空间不是真实服务或真实研究结果原始素材沿用其既有署名/许可条款音频素材署名见 assets/audio/ATTRIBUTION.md新编写的夹具代码与派生素材遵循本仓库的 Apache-2.0 许可见 LICENSE。八、保存、导入与导出配色自定义配色可以沉淀为可复用的我的主题保存配色为当前调色板命名后点击保存配色即加入我的主题。这些条目存放在当前浏览器的 localStorage 中按 manifest 名称隔离最多 50 条与项目时间线数据完全分离。点击条目即套用点击其 × 按钮即删除。导出配色下载当前调色板JSON 内含调色板颜色、名称与基础主题 IDbaseThemeId。导入配色接受本面板导出的version-1shotcraft-paletteJSON校验基础主题在 manifest 中存在且可编辑 七色 HEX 字段完整合法后直接应用不触碰时间线里的任何编辑之后需再点保存配色才能进入我的主题。暂不支持任意配色网站的 JSON schema。导入的严格校验逻辑在 workbench/src/palettePresets.ts 的parsePalette中文件大小上限 65536 字符、必须是合法 JSON、format shotcraft-palette且version 1、名称非空且不超过 60 字符、baseThemeId指向 manifest 中带 palette 的主题、颜色键必须与基础主题 palette 完全一致且每个值都是六位 HEXpaletteFromProject负责导出名称自动截断到 60 字符未命名时生成主题标签 · 自定义applyPalette负责应用写回themeId themeColors且不改动 tracks。一个特殊的持久化细节Vintage Kraftvintage-kraft预设保存或导入其配色时程序化牛皮纸纹理仍然保留——因为纸纹来自渲染期的固定种子滤镜而非截图换色不会破坏纸面质感。九、小结video-shotcraft 的主题系统用一份palettes.json单源 一套可序列化材质 一条 props 优先级链解决了成片换肤的三件事面板上所见即所得地调色、工作台与导出共用同一渲染器、旧项目与旧 preset ID 平滑兼容。若要在自己的模板里加一套新主题最小路径是在 palettes.json 增加七色定义 → 在 manifest.tsx 的 presets 数组中补一个条目 → 按需修改夹具标记后运行node scripts/build-palette-assets.cjs重编译材质 → 用npm run test:themestsc --noEmit验证。无需复制任何场景树。赞分享AI 技能媒体生成视频【免费下载链接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft点击查看免费下载相关推荐Omarchy 主题系统完全指南colors.toml、模板渲染与主题激活流程Omarchy 主题系统完全指南colors.toml、模板渲染与主题激活流程 Omarchy 采用「语义化调色板 colors.toml 模板生成操作系统开发工具AI 应用CLITEdit 剪贴板粘贴预览的原地实时渲染架构在 WorldRenderXna 渲染管线中直接绘制剪贴板瓦片TEdit 剪贴板粘贴预览的原地实时渲染架构在 WorldRenderXna 渲染管线中直接绘制剪贴板瓦片 本文是 TEditTerraria Map Ed游戏开发桌面应用omarchy 主题系统全指南colors.toml、模板渲染与换肤工作流omarchy 主题系统全指南colors.toml、模板渲染与换肤工作流 omarchy 是一套开箱即美的 Linux 桌面发行版配置仓库其主题系统把操作系统开发工具AI 应用CLI上一篇AutoDock Vina 批量对接5分钟极速配置指南下一篇SunnyUI.NET 终极指南快速构建现代化WinForm应用的完整控件库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考