编辑风视觉排版

解决什么问题

直接让模型输出多页图文时，常见的失败是：内容对但版式崩了——标题换行到第三行、截图拍出浏览器滚动条、超宽聊天截图被整张塞进竖屏、关键词高亮用错了颜色，或者更糟，跳过确认直接开干，做到第 8 张才发现第 1 张就该改。这个技能把「编辑器式排版」变成一条可验证的流水线。

核心能力与工作流

• 一套风格，多比例产物：editorial 暖米色基调 #EFEAE0 + Georgia/思源宋体衬线粗体 + 唯一的橙色强调 #CD6F47。另有黑白灰 claude-code 分支用于技术与产品向内容。产物预设覆盖小红书 3:4、广告海报 1:1/3:4、PPT 16:9、电脑壁纸 2560×1440、手机壁纸 9:19.5 及自定义比例。
• 五阶段流程，两个硬门槛：

1. 确认三件套：产物 + 比例 + 张数，第一次交互必须反问；
2. 输出分配方案：每页标题、正文、组件、关键词、图标有无都提前写清，等用户确认后才动 HTML；
3. 生成 HTML：基于模板用 CSS 变量切比例，遵守强制 CSS 三件套（padding 随 viewport 缩放、中文标题 line-height ≥ 1.4、圆角 14–24px）；
3.5 HTML 预览：截图前先让用户看排版，避免返工；
4. 跨平台截图：scripts/render-pages.mjs 逐个 .card-image 容器导出 PNG，优先 Playwright bundled Chromium，找不到再降级系统浏览器或 BROWSER_PATH；
5. 交付前校验：滚动条、溢出、空白、关键词换色、比例一致性、破图等十项逐张人工核对。

• 图文混排纪律：图片是「页面证据」不是装饰。复制到 assets/ 后用相对路径引用；object-fit: contain/cover 二选一，超宽截图做局部放大；一页一张主图，不加暗色遮罩与渐变蒙版。
• 图标与配色硬规则：图标查 icons.md 四张候选表，拒绝营销 emoji；强调色只保留橙色，同一张图换色关键词 1–2 个。
• 输出落盘：统一写到 $HOME/Desktop/visual-{slug}/，HTML 与 01.png ~ 0N.png 一并交付。

适用边界

• 这是排版技能，不是内容写作技能：它不帮你想观点，只负责把已有内容排稳。
• 双色风格锁定，不做多色主题；需要 japanese-visual、bauhaus-visual 等风格应走系列技能。
• 校验环节是人工清单，无法自动保证字体渲染与图片清晰度，复杂截图仍需预先裁切放大。