---
name: generative-arts
description: "Generative and creative media: ASCII art/video, architecture diagrams, infographics, web designs, p5.js, Manim, ComfyUI, TouchDesigner, Excalidraw, and design artifact creation."
version: 1.0.0
author: Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
  hermes:
    tags: [Creative, Generative, ASCII, Diagrams, Infographics, Animation, ComfyUI, TouchDesigner, p5.js, Manim, Web-Design, Excalidraw]
    related_skills: [media-streaming, mlops-workbench]
---

# Generative Arts

Class-level skill for creating visual and interactive media: diagrams, animations, generative art, infographics, web design mockups, and real-time visuals. Each tool serves a different fidelity level — from ASCII text to 3D animations — with instructions and patterns collected below.

---

## Category Map

| Tool | Output | Best for | Key command |
|------|--------|----------|-------------|
| `ascii-art` | Text art | Slack headers, terminals | `pyfiglet`, `art` |
| `ascii-video` | ASCII MP4/GIF | Retro-style video | FFmpeg + ASCII shader |
| `architecture-diagram` | SVG/HTML cloud diagrams | Infrastructure, architecture | SVG generator |
| `campaign-cartography` | Procedural PNG + JSON maps | TTRPG world maps, faction territories | Python fractal noise + PIL |
| `campaign-cartography` | Procedural PNG + JSON maps | TTRPG world maps, faction territories | Python blob clusters + PIL |
| `excalidraw` | Hand-drawn JSON | Whiteboarding, wireframes | JSON scene file |
| `infographic` (baoyu) | HTML infographic | Data storytelling | HTML+SVG layout |
| `popular-web-designs` | HTML/CSS templates | Landing pages, decks | 54 real-world designs |
| `p5js` | Interactive sketches | Generative art, data viz | p5.js web canvas |
| `manim-video` | 3Blue1Brown-style video | Math, algo animation | Python scene scripts |
| `comfyui` | AI images/video | Diffusion workflows | ComfyUI node graph |
| `touchdesigner` | Real-time visuals | Live performance, projection | TD network file |
| `claude-design` | One-off HTML | Rapid prototypes | Prompt-to-HTML |
| `sketch` | Throwaway HTML | 2–3 design variants | Quick comparison |
| `design-md` | Token spec docs | Design system docs | Markdown spec |
| `pretext` | Browser demos | @chenglou presentations | React/JS demo |
| `humanizer` | Text refinement | Strip AI-isms | NLP post-processing |

---

## 1. ASCII Art and Video

### ASCII Art (pyfiglet)

```bash
pip install pyfiglet art

# Large banner text
pyfiglet "HELLO WORLD" --font slant

# Available fonts
pyfiglet --list-fonts | grep -i bold

# Colored ASCII (with lolcat)
pyfiglet "TITLE" | lolcat

# Art module
python -c "from art import text2art; print(text2art('Hello', font='block'))"
```

### ASCII Video

Convert video to colored ASCII art MP4/GIF.

```bash
# Dependencies: ffmpeg + Python with Pillow, numpy
pip install pillow numpy opencv-python

# Convert video to ASCII frames
python -c "
import cv2, numpy as np
from PIL import Image, ImageDraw, ImageFont

cap = cv2.VideoCapture('input.mp4')
fps = cap.get(cv2.CAP_PROP_FPS)
chars = ' .:-=+*#%@'

while True:
    ret, frame = cap.read()
    if not ret: break
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    small = cv2.resize(gray, (120, 60))
    ascii_frame = '\n'.join([''.join([chars[int(p/255*(len(chars)-1))] for p in row]) for row in small])
    # Render to image and write to output
"
```

For advanced ASCII video effects (shaders, composition, scenes), see `references/generative-arts-ascii-video-*.md`.

---

## 2. Diagrams and Visual Communication

### Architecture Diagrams (SVG/HTML)

Dark-themed SVG architecture/cloud diagrams generated as HTML:

```bash
# The template is a self-contained HTML file
# Edit variables in the template and open in browser
cp templates/generative-arts-architecture-diagram-template.html my-diagram.html
# Modify the JSON data section to define nodes, edges, and groups
```

### Excalidraw (Hand-drawn style)

Generate JSON scene files for Excalidraw:

```python
import json

scene = {
    "elements": [
        {
            "type": "rectangle",
            "x": 100, "y": 100,
            "width": 200, "height": 100,
            "strokeColor": "#000000",
            "backgroundColor": "#ced4da",
        },
        {
            "type": "text",
            "x": 120, "y": 130,
            "text": "Service A",
            "fontSize": 20,
        }
    ],
    "appState": {"viewBackgroundColor": "#ffffff"}
}

with open("diagram.excalidraw", "w") as f:
    json.dump(scene, f, indent=2)
```

Upload or open in https://excalidraw.com. For color palettes, dark mode, and example libraries, see `references/generative-arts-excalidraw-*.md`.

### Baoyu Infographics

21 layouts × 21 styles for data visualization. The base prompt and structured content template guide generation.

```python
# Use the base prompt as a system prompt for image generation
with open("references/generative-arts-baoyu-infographic-base-prompt.md") as f:
    prompt = f.read()

# Fill the structured content template
with open("references/generative-arts-baoyu-infographic-structured-content-template.md") as f:
    template = f.read()
```

---

## 3. Web Design and Prototyping

### Popular Web Designs (54 Templates)

54 real-world design systems as HTML/CSS starters. Located in `templates/generative-arts-popular-web-designs-*.md`.

| Design | File | Style |
|--------|------|-------|
| Stripe | `generative-arts-popular-web-designs-stripe.md` | Clean, gradient, payments |
| Linear | `generative-arts-popular-web-designs-linear.app.md` | Dark, fast, developer tool |
| Vercel | `generative-arts-popular-web-designs-vercel.md` | Minimal, deploy-focused |
| Notion | `generative-arts-popular-web-designs-notion.md` | Block-based, clean |
| Figma | `generative-arts-popular-web-designs-figma.md` | Collaborative, purple |
| Framer | `generative-arts-popular-web-designs-framer.md` | Motion, prototyping |

Usage:

```bash
# Copy a design as starting point
cp templates/generative-arts-popular-web-designs-stripe.md my-landing-page.html
# Customize the content, keep the CSS structure
```

### p5.js Sketches

Interactive generative art, shaders, 3D, and data visualization.

```javascript
// Basic sketch structure
function setup() {
    createCanvas(800, 600);
    background(220);
}

function draw() {
    ellipse(mouseX, mouseY, 50, 50);
}
```

Run via the bundled serve script or export frames:

```bash
# Serve locally
bash scripts/generative-arts-p5js-serve.sh

# Export frames for video
node scripts/generative-arts-p5js-export-frames.js --duration 10 --fps 30
```

For core API, WebGL, animation, typography, and visual effects references, see `references/generative-arts-p5js-*.md`.

### Claude Design / Sketch

One-off HTML artifacts and throwaway 2–3 variant mockups:

```
User: "Design a landing page for a coffee subscription"
Agent: Generate 3 variants with different hero treatments,
       copy variations, and CTA placements. Present side-by-side.
       User picks one → refine.
```

These are ephemeral — the skill focuses on the rapid iteration pattern rather than a specific tool.

### Design Token Spec (DESIGN.md)

Author and validate Google's DESIGN.md token specification files.

```bash
# Validate a DESIGN.md file
npx @design-md/cli validate tokens/DESIGN.md

# Export to CSS custom properties
npx @design-md/cli export --format css tokens/DESIGN.md
```

---

## 4. Animation and Video

### Manim (3Blue1Brown-style)

Mathematical and algorithmic animations.

```python
from manim import *

class SquareToCircle(Scene):
    def construct(self):
        circle = Circle()
        square = Square()
        self.play(Create(square))
        self.play(Transform(square, circle))
        self.play(FadeOut(square))

# Render
# manim -pqm scene.py SquareToCircle
```

For scene planning, animation patterns, 3D camera, equations, graphs, and production quality guides, see `references/generative-arts-manim-video-*.md`. Setup script: `scripts/generative-arts-manim-video-setup.sh`.

---

## 5. AI-Powered Generation

### ComfyUI

Node-based diffusion workflow for images and video.

```bash
# Setup
bash scripts/generative-arts-comfyui-comfyui_setup.sh

# Health check
python scripts/generative-arts-comfyui-health_check.py

# Run a workflow batch
python scripts/generative-arts-comfyui-run_batch.py workflow.json --output ./out/
```

For the REST API, official CLI, workflow format, and template integrity guides, see `references/generative-arts-comfyui-*.md`.

---

## 6. Real-Time Visuals

### TouchDesigner (MCP)

Control TouchDesigner via the twozero MCP server.

```bash
# Setup script
bash scripts/generative-arts-touchdesigner-mcp-setup.sh
```

TouchDesigner is a node-based real-time visual development environment. The MCP server exposes:
- Operator creation and manipulation
- Parameter setting/getting
- Panel/UI layout control
- Python scripting within DATs
- Geometry and particle systems
- Audio-reactive visuals
- Projection mapping
- MIDI/OSC integration

For operator tips, GLSL, Python API, animation, audio-reactive, particles, projection mapping, and networking patterns, see `references/generative-arts-touchdesigner-mcp-*.md`.

---

## 7. Text Refinement

### Humanizer

Strip AI-isms and add authentic voice to generated text.

```bash
# Use the humanizer pattern on any generated text
# The skill provides substitution tables, rhythm patterns, and authenticity checks
```

Key patterns:
- Replace "delve" with "look at", "explore", "dig into"
- Replace "landscape" with "scene", "picture", "world"
- Add specific details (dates, locations, proper nouns)
- Vary sentence length intentionally
- Include occasional friction (uncertainty, hedging)
- Use active voice over passive constructions

---

## Support Files

The skill includes extensive reference material and scripts under `references/`, `scripts/`, and `templates/`:

- **64 reference files** — per-tool deep dives (operators, APIs, troubleshooting, animation patterns)
- **18 scripts** — setup, health checks, batch runners, exporters, monitors
- **59 templates** — HTML designs, viewer scaffolding, starter files

Support files are prefixed with their source skill name for traceability (e.g., `generative-arts-manim-video-animations.md`).

---

## Workflow: Create a Launch Campaign

```
1. Design landing page (popular-web-designs template) → Section 3
2. Generate hero video (Manim or ASCII video) → Section 4 or 1
3. Create architecture diagram for docs → Section 2
4. Generate marketing images (ComfyUI) → Section 5
5. Build a p5.js interactive demo → Section 3
6. Refine all copy with humanizer → Section 7
```