Article Cover SVG Generation
Use this skill to turn an article topic into a clean, reusable SVG cover asset.
When To Use
- Blog or docs header images
- OG / social preview art
- Publication thumbnails or article hero graphics
Do Not Use
- Full illustrations, raster image editing, or photo compositing
- Slide-deck themes or multi-slide styling
- Flowcharts, technical diagrams, or whiteboard sketches
Inputs
- Required: article title, topic, or article file path
- Optional: subtitle, output path, aspect ratio, color mood, publication/brand context
Workflow
- Check
$ARGUMENTS. If the request does not include a usable topic or file path, ask for the article title or topic before generating anything. - Resolve the output target:
- if the user gave an explicit filename, use it - if the user gave an article file path, save alongside it or inside a nearby assets/ directory as {article-slug}-cover.svg - otherwise save as {article-slug}-cover.svg in the active working directory
- Read
$SKILL_DIR/references/DESIGN_SYSTEM.mdbefore choosing shapes, color, or composition. - Distill the topic into:
- a main title - an optional subtitle or kicker - one dominant visual metaphor - a layout pattern: Comparison, Flow, Centered Concept, or Typography-First
- Draft the SVG using the design system rules for hierarchy, color contrast, and spacing. Favor one clear focal idea over decorative clutter.
- Include SVG essentials in the generated file:
- root xmlns="http://www.w3.org/2000/svg" - a valid viewBox - accessible <title> and <desc> tags when practical - explicit font-family on text elements
- Write the SVG to the resolved path.
- Validate the result before finishing:
- tags close correctly - title remains readable at thumbnail size - text does not overflow the canvas - contrast is strong enough against the background
Output Contract
Return:
- the final SVG file path
- the chosen layout pattern
- a one-sentence rationale for the visual direction
Do not paste the full SVG into chat unless the user explicitly asks for inline code.
Troubleshooting
- If the topic is too broad, ask the user to narrow the angle instead of generating a generic cover.
- If text renders incorrectly, use
font-family="Arial, sans-serif"for reliable cross-platform and CJK support. - If contrast is low, simplify the palette and re-check against the design system guidance.
- If the SVG displays blank in a browser, verify the root namespace,
viewBox, and that visible elements are inside the canvas bounds. - If the user actually wants a scene illustration or raster artwork, hand off to an image-generation skill instead of forcing SVG.
Final Checklist
- Output path is explicit
- Layout choice matches the article angle
- SVG is valid and viewable in a browser
- Title is legible at social-preview scale