62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
---
|
|
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 |
|