---
name: visual-artifact-design
description: "Umbrella for visual/code artifacts: HTML prototypes, diagrams, design systems, infographics, ASCII/video art, p5.js sketches, Manim animations, Excalidraw drawings, and interactive visual tools."
version: 1.0.0
author: Hermes Agent
license: MIT
metadata:
  hermes:
    tags: [creative, design, html, diagrams, visualization, generative-art, video, animation, ascii, p5js, manim, excalidraw]
---

# Visual Artifact Design

Use this umbrella whenever the user asks for a visual deliverable rather than a long-lived application: mockups, landing/deck prototypes, diagrams, infographic layouts, design-token docs, generative art, ASCII art/video, educational animations, hand-drawn diagrams, or visual-system references.

## Triage: choose the right subsection

- **Fast visual exploration / mockups**: produce 2–3 single-file HTML variants; keep them disposable and comparison-friendly.
- **Polished one-off HTML artifacts**: build a complete HTML/CSS artifact with tasteful layout, responsive behavior, and real content density.
- **Marketing / design-system borrowing**: use known patterns from Stripe, Linear, Vercel, Apple, Notion, etc.; do not copy brands verbatim unless asked.
- **Architecture or systems diagrams**: prefer dark themed SVG/HTML diagrams with labeled components, arrows, boundaries, and a legend.
- **Hand-drawn diagrams**: emit valid Excalidraw JSON when editability in Excalidraw matters.
- **Infographics / knowledge visuals**: pick layout archetype first, then style/palette; keep typography and visual hierarchy explicit. For finance/insurance comparison charts, use `references/financial-insurance-line-chart-pitfalls.md`: distinguish liquid values from future benefits, show surrender losses explicitly, avoid artificial terminal jumps, and verify raster previews for clipped/overlapping labels. For school performance trend reports, use `references/school-performance-trend-graphics.md`: split dense subjects into readable panels, include data/methodology, and verify rendered report/contact sheets.
- **ASCII art / ASCII video**: choose terminal-oriented tools (pyfiglet/cowsay/boxes) for text art and ffmpeg pipelines for video/GIF conversion.
- **p5.js / generative sketches**: create a single HTML/JS sketch; expose tweakable constants and verify it runs in a browser.
- **Manim educational animation**: write a Manim CE scene, render it, and inspect output rather than only producing code.
- **Design tokens / DESIGN.md**: author or validate token specs and export implementation artifacts.
- **TouchDesigner / realtime visuals**: only use when a running TouchDesigner/twozero MCP environment is part of the task.

## Workflow

1. Clarify the artifact type only if ambiguous; otherwise choose the closest subsection above.
2. Preserve the user's requested medium and deliverable format: HTML, SVG, Excalidraw JSON, Manim project, GIF/MP4, p5.js sketch, or text output.
3. Build a real artifact, not just a prompt or description.
4. Verify mechanically whenever possible: browser screenshot for HTML, JSON validation for Excalidraw, `manim` render for animations, `ffmpeg` probe for media, or lint/parse checks for token specs. For printable charts/PDFs, also render a raster preview and visually inspect for clipped titles, endpoint labels, legend collisions, and misleading curve semantics before delivery.
5. Report the final file path(s), verification command(s), and any environment blockers.

## Preserved source packages

The former narrow skills were archived after their unique playbooks and support files were copied under `references/absorbed-packages/<skill>/`. Use those packages for detailed commands, examples, templates, and troubleshooting when the matching subsection is active.

Absorbed skills: `architecture-diagram`, `claude-design`, `popular-web-designs`, `sketch`, `p5js`, `excalidraw`, `design-md`, `baoyu-infographic`, `ascii-art`, `ascii-video`, `manim-video`, `pretext`, and `touchdesigner-mcp`.