React Design Draft
根据内容自动生成可编辑的React风格信息图设计稿,支持单图与多图模式。
支持图表、海报、UI样机等视觉资产生成,并自动检测导出PNG质量,实现可复现的修复迭代。
openclaw skills install @bovinphang/fec-image-generation命令、参数、文件名以原文为准
生成或编辑图表、视觉资产和图片工作流,并对导出的 PNG 做可复查的自检与修复迭代。
- 文本、结构和连线准确性优先时,用 Mermaid、SVG、HTML/CSS、canvas 或图表库生成可编辑源,再导出 PNG。
- 审美、质感、照片、插画、漫画、产品图或品牌氛围优先时,用图片生成或编辑工具,再把最终资产保存到项目或报告目录。
- 收集受众、用途、尺寸、语言、必须出现的文本、品牌限制、可编辑源格式、导出格式和禁用元素。
- 对海报、UI 样机、品牌板和产品图,先写出一行视觉读取:目标用户、场景、可信感来源、主视觉锚点。
- ER 图、UML 类图、序列图、技术架构图、ML/深度学习、流程图等,优先按 [diagram-workflows.md](references/diagram-workflows.md) 建立结构化源。
- 海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板和图像编辑,按 [artifact-routing.md](references/artifact-routing.md) 选择生成、编辑或混合路线。
- 每次交付前都读取导出的 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- 默认最多 2 轮;用户明确要求时可提高到 5 轮软上限。
- 修复对象是源文件、prompt、布局参数或导出尺寸,不直接破坏性修改 PNG 像素。
- 按 [png-qa-autofix.md](references/png-qa-autofix.md) 把问题转成具体修复:增大画布、换行、移动节点、分层连线、调整 padding 或重导出。
- 说明最终源文件、PNG 路径、生成路线、QA 轮次、发现并修复的问题、仍需人工确认的文字或品牌风险。
产出可编辑源、最终 PNG 或编辑后图片,并附带生成路线与 QA 结果。图表应结构清晰、标签不截断、连线不混乱;视觉资产应匹配用途、尺寸、品牌语气和交付路径。
已收录 2 个 Skill