离线双击即开、中英双语单文件报告shuohao-skills 的 report.html 渲染与 I18N 工程实现【免费下载链接】shuohao-skillsAI 短剧制作的 skill 集合拆角色、排大纲、出场景与道具设定、写剧本、切分镜 | Agent skills for AI short-drama production — character bibles, adaptation outlines, art bibles, screenplays, storyboards. Runs in Claude Code codex.项目地址: https://gitcode.com/gh_mirrors/sh/shuohao-skillsshuohao-skills 是一个AI 短剧制作的 skill 集合拆角色、排大纲、出美术设定、写剧本、切分镜。每个 skill 跑完都会产出一份report.html——一个单文件 HTML 报告不引任何外部库、不发任何网络请求离线双击即开界面中英双语可一键切换内置 I18N 文案表--lang en出全英文报告。这篇带你看看这份报告背后的渲染与 I18N 工程是怎么做的。单文件报告为什么双击就能开先把结论说在前面五个 skillnovel-characters / novel-outline / novel-art / novel-script / novel-storyboard的报告都是同一套设计约定——全部内联CSS、SVG 图表、交互 JS 全部写在同一个 HTML 文件里不引任何外部库也不发网络请求一页平铺页宽 1600没有侧栏、没有折叠藏内容评审人可以直接 CmdF打印友好media print下自动展开全部折叠区、卡片不跨页断同时适配prefers-reduced-motion安全拼接所有模型生成的数据都经过esc()转义后才拼进 HTML设计约定写在每个 skill 的 references/report-style.md 里样式只改渲染器那一处。整条 AI 短剧制作管线长这样中英双语 I18N界面文案表是怎么设计的早期每个 skill 的界面文案散落在模板字符串里。2026-08-15 的报告双语化重构见 CHANGELOG.md把五个 skill 统一成同一个工程模式以 skills/novel-outline/scripts/novel-outline.mjs 为例两张文案表I18N { zh, en }章节标题、KPI 卡片、列表分隔符、连 CSS/JS 注释里的硬编码中文全部收进表里一个选择器tOf(lang)按语言取表非法语言直接报错、不静默回落——宁可失败也不出半吊子报告模板化短语像第 N 集、质量门 13 / 13这类带数字的文案写成函数中英文各自格式化html lang属性也跟着切换这就是单文件报告 I18N的核心翻译的是界面壳不是数据。一键切换语言render --lang en的优先级规则渲染命令只多了一个参数语言解析规则是三级优先node scripts/novel-outline.mjs render outline.json --html --lang en outline-report.html--lang zh|en命令行参数最高优先JSON 顶层lang字段例如 art.json 里写lang: en默认中文分镜 skill 里还特意把两个语言分开--lang只管报告界面promptLang管H3 生成提示词的语言默认英文——界面给谁看、提示词喂给哪个模型本来就是两件事。质量门英文翻译标签按 id 映射阈值原样保留最讲究的是质量门面板的翻译。英文界面下门标签按门 id 映射成英文如主场景 ≤ 5→Primary scenes ≤ 5而阈值数字由门自己算好、按顺序原样填进模板——翻译表只负责文字绝不管逻辑。门的判定代码与 CLI 诊断文案一行没动。翻译边界哪些会变、哪些保持原文这是使用双语报告时最值得记住的一条规则内容行为界面标签、章节标题、单位词、分隔符跟随lang翻译质量门标签按 id 映射英文阈值原样数据内容人名、梗概、台词、提示词永远保持原文门的失败详情保持原文角色 skill 走得更远内置中 / 英 / 日三套界面还支持任意语言——现场把界面文案翻好存进cast.json的ui字段渲染时合并ui-template lang能生成待翻译骨架缺了ui又用了表外语言validate直接报错。离线单文件的三个工程细节① 报告即数据仓库。原始 JSON 以script typeapplication/json原样内嵌在页面里点导出 JSON只是把它包成 Blob 下载——零网络请求下载的内容和outline.json逐字节一致改完还能直接喂回render/validate。② 两个真实踩过的坑都写进了代码注释JSON 里出现/script会把内嵌数据块提前截断所以统一转成\u003cURL.revokeObjectURL不能紧跟a.click()调用否则 Safari 会在下载读完前撤掉 blob存出来是空文件——所以延迟 10 秒再释放③ 自测盯着底线。每个 skill 的 selftest.mjs 不调模型、1 秒跑完不引任何外部资源、离线能开这类约定有正反双向断言双语化后自测项从 outline 200、art 131、script 137、storyboard 165 分别涨到 220 / 146 / 153 / 185。五份报告效果一览同一套视觉语言冷灰印张 铁锈红印记、宋体原文 / 黑体分析 / 等宽提示词五种交付物快速上手安装并渲染你的第一份报告前置条件只有一个Node ≥ 18脚本零 npm 依赖不需要 install出图才需要 codex CLI。git clone https://gitcode.com/gh_mirrors/sh/shuohao-skills cd shuohao-skills ./scripts/install.sh # 自动检测 Claude Code / codex 并软链仓库自带《渡口》样例数据可以直接渲染看看效果node skills/novel-outline/scripts/novel-outline.mjs render skills/novel-outline/examples/渡口-outline.json --html --lang en更多命令见各 skill 的 README.md。相关文件路径速查项目总览与双语说明README.md报告设计约定区块顺序、图表口径、质量底线skills/novel-outline/references/report-style.md渲染器与 I18N 文案表skills/novel-outline/scripts/novel-outline.mjs自测脚本不调模型skills/novel-outline/scripts/selftest.mjs样例数据可当测试夹具直接渲染skills/novel-outline/examples/渡口-outline.json安装脚本scripts/install.sh版本演进双语化重构细节CHANGELOG.md【免费下载链接】shuohao-skillsAI 短剧制作的 skill 集合拆角色、排大纲、出场景与道具设定、写剧本、切分镜 | Agent skills for AI short-drama production — character bibles, adaptation outlines, art bibles, screenplays, storyboards. Runs in Claude Code codex.项目地址: https://gitcode.com/gh_mirrors/sh/shuohao-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
