2.5 KiB
name, description, version, author, license, platforms, metadata
| name | description | version | author | license | platforms | metadata | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| visual-design | Visual design and diagram tools: architecture diagrams (SVG), Excalidraw (hand-drawn), Claude design (HTML artifacts), popular web designs (54 systems), and sketch (throwaway mockups). | 2.0.0 | Hermes Agent | MIT |
|
|
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 |