漫画讲解工坊
把讲解内容变成一篇 6~8 格的手绘风 HTML 漫画。永远不用 AI 生图画分镜(中文文字必糊、风格漂移、不可改字),一律 SVG 画形 + HTML 排字。
工作流
- 设计分镜脚本(先列给用户看,可跳过直接做)
- 把主题的每个知识点映射成一幕剧情;抽象概念必须拟人化/场景化(例:路由器=门房大叔、IP=门牌号、数据包=信封、NAT=盖章、故障=门房晕倒)。
- 标准幕序:①全景建立世界观 → ②~⑤每个核心概念一幕 → ⑥"今日特别篇"(若对话中有真实事件/排障经历,改编进来)→ ⑦方法论/口诀收束。
- 结尾必须有一个
.factbox「本页知识清单」做干货回收。
- 复制 template.html 起手,逐格替换占位内容。铁律:单文件、全部内联(无外链字体/图片/JS)、viewBox 宽固定 860、格高 400~460。
- 画场景:角色与道具的 SVG 配方在 reference.md(路由器人、笔记本、手机、信封+箭头、决策框、对话框变体、拟声词)。同一角色跨格保持同配色(CSS 变量已定义)。
- 验证:跑 reference.md 里的 Python 标签闭合检查,
errors: none且unclosed: none才算过;不过就修,别交付坏页。 - 交付:存到
outputs/<主角名>-漫画讲解.html,用qwenwork_file_present_files呈现,再用 3~5 行概述每格剧情(不要长篇复述知识本身)。
设计规则
- 配色 token(template 已内置):墨线
--ink #2b2622、纸--paper #f7f1e3、强调红--accent #e8542f、蓝--blue #2f6fe8、漫画黄--yellow #ffd94a。 - 漫画感三件套:粗边框 +
box-shadow: 6px 6px 0纯色偏移阴影 + 网点纸背景;旁白用黑底.narr条,对话用白底.bub(尾巴方向tail-r/tail-b可变)。 - 文字量控制:每格对白 ≤ 3 行、旁白 ≤ 2 行;讲不清的概念宁可拆成两格。
- SVG 里的文字只用短标签(角色名、门牌号、按钮),整句对话一律放 HTML
.bub,方便换主题时改。 - 语言跟随用户对话语言。
换主题复用要点
复用时只换三样:分镜脚本(幕序不变)、角色阵容(从 reference.md 配方改配色/配件)、每格文案。CSS 与页面骨架一个字都不用动。