Image Generation

Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; do not use for ordinary UI polish without generated imagery. Chinese triggers include 图片生成, 图像编辑, 图表生成, 架构图, ER 图, UML, 序列图, 海报, UI 样机, 产品图, 信息图, 学术图, 漫画, 头像, 分镜, 品牌板, PNG 自检, 自动修复.

图片生成与图表工作流

Purpose

生成或编辑图表、视觉资产和图片工作流，并对导出的 PNG 做可复查的自检与修复迭代。

Procedure

1. 判断产物类型

   • 文本、结构和连线准确性优先时，用 Mermaid、SVG、HTML/CSS、canvas 或图表库生成可编辑源，再导出 PNG。
   • 审美、质感、照片、插画、漫画、产品图或品牌氛围优先时，用图片生成或编辑工具，再把最终资产保存到项目或报告目录。

2. 明确输入与约束

   • 收集受众、用途、尺寸、语言、必须出现的文本、品牌限制、可编辑源格式、导出格式和禁用元素。
   • 对海报、UI 样机、品牌板和产品图，先写出一行视觉读取：目标用户、场景、可信感来源、主视觉锚点。

3. 选择生成路线

   • ER 图、UML 类图、序列图、技术架构图、ML/深度学习、流程图等，优先按 diagram-workflows.md 建立结构化源。
   • 海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板和图像编辑，按 artifact-routing.md 选择生成、编辑或混合路线。

4. 导出并自检 PNG

   • 每次交付前都读取导出的 PNG，检查主体是否真实渲染、文字是否截断、连线是否堆叠、节点是否重叠。
   • 有布局 manifest 时运行：

     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --manifest layout.json --format markdown
     

   • 没有 manifest 时仍运行 PNG 基础检查：

     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --format json
     

5. 自动修复循环

   • 默认最多 2 轮；用户明确要求时可提高到 5 轮软上限。
   • 修复对象是源文件、prompt、布局参数或导出尺寸，不直接破坏性修改 PNG 像素。
   • 按 png-qa-autofix.md 把问题转成具体修复：增大画布、换行、移动节点、分层连线、调整 padding 或重导出。

6. 交付记录

   • 说明最终源文件、PNG 路径、生成路线、QA 轮次、发现并修复的问题、仍需人工确认的文字或品牌风险。

Constraints

• 文本密集图不要只靠位图模型生成；必须保留可编辑结构化源。
• 不把截图、假数据或占位图当成最终产品图，除非用户明确要求概念稿。
• 不直接覆盖原图；编辑工作流默认输出新文件。
• 不为追求美观牺牲可读标签、连线归属、图例、坐标轴和可访问替代说明。
• PNG helper 只做检测和建议；修复必须回到源、prompt 或布局参数。
• 自检结果不能替代人工确认专有名词、公式、论文图注、品牌规范和合规信息。

Expected Output

产出可编辑源、最终 PNG 或编辑后图片，并附带生成路线与 QA 结果。图表应结构清晰、标签不截断、连线不混乱；视觉资产应匹配用途、尺寸、品牌语气和交付路径。