LJ视觉交付优化

解决什么问题

很多自动生成的页面、报告和幻灯片，把「视觉完成」误当成「设计完成」：随手加渐变、卡片、阴影和发光效果，内容却被埋在装饰里。常见的症状包括字号忽大忽小、信息没有主次、同一份产出在网页、报告和幻灯片之间风格不统一，以及源文件看着正确、渲染出来却溢出、断行或对比度不足。

这个技能面向需要把内容变成可打开交付物的工程师和写作者，覆盖 HTML 报告、研报、数据故事、仪表盘、落地页、Web UI、移动界面、幻灯片、海报、封面、Banner 与信息图等媒介。它的目标不是提供一套万能模板，而是把设计拆成可以检查的决策：受众、任务、核心结论、阅读顺序、art direction、构图、视觉系统与渲染结果。

核心能力

技能先要求判断环境能力，而不是假设某个引擎一定存在。开始前会检查文件读写与命令执行、浏览器或截图能力、图片搜索或生成、SVG / 图表 / HTML-CSS、PPTX / PDF / 文档库等能力，再选择能满足目标格式的路径。缺少某项能力时只降级对应环节，例如用原创 SVG 或 CSS 构图代替生成图片；如果用户明确要求某种文件格式，不会静默换格式。

制作流程先从用户材料中提炼任务：受众与使用场景、希望读者记住或采取的唯一首要行动、必须出现的内容与限制、输出格式与画布尺寸。信息不足但风险低时，会列出少量合理假设并继续。接着写一份 Design Contract，把唯一目标、受众、阅读顺序、核心结论、首要行动、媒介、格式、约束和记忆点固定下来；用户提供品牌规范、参考图或已有设计时，以它们为主要事实来源。

在写完整样式前，技能会先做结构稿。网页列出 section 顺序、每屏主导区域和视觉节奏；幻灯片逐页确定「本页结论 + 视觉证据 + 版式类型」；海报明确 1→2→3 的视线顺序、唯一焦点和信息分组；数据视觉先确定问题和比较关系，再选图表类型。重复内容会被删掉，放不下时拆页或删减，而不是缩小字号。

之后建立视觉系统：5 个以内的颜色角色、清晰的字号阶梯、一套间距尺度和网格、一致的圆角、边框、阴影、线条与图标语言，以及数字、图表、标签和正文的固定样式。视觉素材按真实数据图表、用户素材、产品截图、结构示意图、主题照片或插画、原创 SVG/CSS 图形的顺序取舍。实现按「结构 → 内容 → 样式 → 视觉素材 → 细节」推进，HTML 任务在可用时运行检查脚本，并做全局缩略图和 100% 局部的视觉复检。

适用边界

它适合有明确信息任务和交付格式的设计产物，不负责替你发明品牌定位，也不会覆盖用户提供的品牌规范。环境缺少渲染或截图能力时，只能做结构性规划和源码检查，不能声称已完成视觉验证。生成文件会保留原文件；除非用户明确要求覆盖，否则产出新文件或可回退版本。