skills.rest
bovinphang
bovinphangCOMMUNITY
Explore all skills by this author →
GitHub

fec-image-generation

Generate and validate PNG diagrams from structured YAML frontmatter commands.

21|3|Updated Mar 17, 2026
Search Tags:#workflow#architecture#qa#svg#image-generation#diagram
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-image-generation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fec-image-generation
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-image-generation
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-image-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

这项技能用于把图表、视觉资产和信息图等可交付物的生成、编辑和自检/修复迭代流程规范化，降低人工迭代成本并提升交付一致性。

Core Features & Use Cases

  • 支持生成海报、信息图、架构图、序列图、数据流等多种视觉资产，并对 PNG 导出进行可复查的自检。
  • 提供结构化源（Mermaid/SVG/HTML/Canvas）与浏览器就绪的单文件技术图（HTML 技术图/Draw.io 替代路线），便于复现和长期维护。
  • 提供交互式实时图表草图服务，支持会话级别的增量协作与导出（PNG/SVG/JSON）。
  • 提供 PNG 质检与自动修复参考，按 manifest 指令对齐输出。

Quick Start

初始化图表工作流并导出第一版 PNG 与 JSON 图表描述。

Frequently Asked Questions about fec-image-generation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams and export them as PNG files?▼

To generate architecture diagrams and export PNGs, define structured commands with YAML frontmatter to drive deterministic sources. The workflow validates visual output via manifest-based QA to ensure pixel-perfect handoff.

What is manifest-based QA for diagram generation and when do I need it?▼

Manifest-based QA for diagram generation aligns exported PNG outputs against reference instructions to ensure pixel-perfect consistency. It is needed when delivering architecture diagrams, data flows, or information graphics that require reliable visual validation.

Can I use SVG and HTML sources to create browser-ready technical diagrams?▼

Yes, you can use structured sources like SVG, HTML, Canvas, or Mermaid to create browser-ready technical diagrams. These deterministic sources enable reproducible generation and long-term maintenance of single-file visual assets.

How do I validate and auto-fix PNG chart exports during the generation workflow?▼

To validate and auto-fix PNG chart exports, apply manifest-based QA instructions to align the generated output. The workflow supports iterative self-check and repair references to reduce manual editing costs and maintain visual consistency.

Does this workflow support interactive chart sketching and incremental collaboration?▼

Yes, the workflow supports interactive real-time chart sketching with session-level incremental collaboration. You can iteratively adjust visual diagrams and export the results in PNG, SVG, or JSON formats.

What are the limitations of using YAML frontmatter-driven workflows for visual asset generation?▼

YAML frontmatter-driven workflows require structured command inputs for deterministic generation. Limitations arise when attempting unstructured freehand edits, as the manifest-based QA system enforces strict alignment for pixel-perfect PNG exports.

Related Skills

Explore More Design & Creative Skills→
AhmedKaram50AhmedKaram50

bmad-dev

Load a developer persona and present an activation menu for user input.

Community
Intermediate
Suara17Suara17

verification-before-completion

Run tests, lint, and build steps and report pass/fail with evidence.

Community
Advanced
rp1-runrp1-run
38

markdown-preview

Convert Markdown, plain text, and Mermaid diagrams into self-contained HTML previews.

Official
Intermediate
jiaxiaojunQAQjiaxiaojunQAQ
75

architecture-diagram-creator

Generate architecture diagrams from natural language prompts.

Community
Intermediate