Add creative/visual-design

2026-07-10 16:11:33 +08:00
parent b47d2ca45e
commit f525a158e9
1 changed files with 61 additions and 0 deletions
@@ -0,0 +1,61 @@
+---
+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 |