---
name: visual-design
description: "Visual design and diagram tools: architecture diagrams (SVG), Excalidraw (hand-drawn), Claude design (HTML artifacts), popular web designs (54 systems), and sketch (throwaway mockups)."
version: 2.0.0
author: Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
  hermes:
    tags: [design, diagram, architecture, excalidraw, mockup, html, svg]
---

# Visual Design & Diagrams

Five design tools for different purposes, all producing visual output from prompts.

## Section 1: Architecture Diagrams (SVG/HTML)

Dark-themed SVG architecture/cloud/infrastructure diagrams rendered as HTML. Use for system architecture, cloud infra, data flow, and sequence diagrams.

**When to use:** System design docs, architecture reviews, infrastructure documentation.
**See:** `references/architecture-diagram.md` and `templates/template.html`.

## Section 2: Excalidraw (Hand-Drawn Style)

Hand-drawn Excalidraw JSON diagrams: architecture, flow, sequence. Includes dark-mode support and color palette.

**When to use:** Quick conceptual diagrams, brainstorming, architecture diagrams with a friendly aesthetic.
**See:** `references/excalidraw.md` and `scripts/upload.py`.

## Section 3: Claude Design (HTML Artifacts)

Design one-off HTML artifacts: landing pages, presentation decks, interactive prototypes.

**When to use:** Quick landing pages, UI prototypes, presentation slides, interactive demos.
**See:** `references/claude-design.md`.

## Section 4: Popular Web Designs (54 Real Design Systems)

54 real-world design systems (Stripe, Linear, Vercel, Apple, etc.) as copyable HTML/CSS templates. Each template captures the real design system's typography, colors, spacing, and component patterns.

**When to use:** When building a site inspired by an existing design system, or needing production-quality CSS/HTML scaffolding.
**See:** `references/popular-web-designs.md` and `templates/` directory for 54 individual design templates.

## Section 5: Sketch (Throwaway Mockups)

Throwaway HTML mockups: 2-3 design variants to compare quickly. Fast, disposable, not for production.

**When to use:** Comparing layout options, quick visual prototyping, "show me what this could look like."
**See:** `references/sketch.md`.

## Choosing the Right Tool

| Need | Tool |
|------|------|
| System architecture diagram | Architecture Diagram |
| Friendly conceptual diagram | Excalidraw |
| Production landing page | Popular Web Designs |
| Quick prototype to compare | Sketch |
| Interactive demo | Claude Design |
| Presentation deck | Claude Design |