/visual-assets-generation

name: visual-assets-generation
description: Generate visual assets (ASCII art, diagrams, banners) for repos and documentation
tags: [ascii-art, diagrams, visualization, documentation, marketing]
related_skills: [architecture-diagram, ascii-art, excalidraw]
origin: unknown
source_license: see upstream
language: en

Visual Assets Generation

Generate visual assets for repositories and documentation — ASCII art, diagrams, banners, social cards.

When to Use

• User asks "bikin gambar", "buat visual", "generate banner"
• Repo needs visual improvements (README header, architecture diagram)
• Social media sharing (Twitter/LinkedIn cards)
• Documentation needs diagrams (workflow, architecture, comparison)

Workflow

Step 1: Create ASCII Preview First ⭐

**ALWAYS create TXT preview before generating real images:**

**Why:**

• Faster iteration (no image generation wait)
• User can review before committing
• Works everywhere (no image dependencies)
• Easy to edit and refine

**Format:**

VISUAL_ASSETS_PREVIEW.txt
├── ASCII Art Banner
├── Architecture Diagram
├── Workflow Diagram
├── Comparison Tables
├── Folder Structure
├── Performance Metrics
├── Quick Start Guide
└── Social Media Preview

---

Step 2: Generate Comprehensive Preview

Include multiple visual types in one file:

1. **ASCII Art Banner/Logo**

• Use box-drawing characters (╔═╗║╚╝)
• Use block characters (█▀▄▌▐)
• Include tagline and URL

2. **Architecture Diagram**

• System components
• Data flow (arrows: → ↓ ↑ ←)
• Integration points

3. **Workflow Diagram**

• Step-by-step process
• Decision points
• Outcomes

4. **Comparison Tables**

• Feature comparison
• Before/After
• Options comparison

5. **Folder Structure**

• Tree view (├── └── │)
• Annotations
• Purpose explanations

6. **Performance Metrics**

• Bar charts (█ blocks)
• Speed comparisons
• Size comparisons

7. **Quick Start Guide**

• Installation steps
• Usage examples
• Success criteria

8. **Social Media Preview**

• Title + tagline
• Key features (emoji bullets)
• Call to action
• URL

---

Step 3: Offer Options

After creating preview, present choices:

**Option A: Use ASCII Directly**

# Add to README.md
cat VISUAL_ASSETS_PREVIEW.txt >> README.md

• ✅ Works everywhere
• ✅ No dependencies
• ✅ Easy to maintain
• ❌ Less visually appealing

**Option B: Convert to Real Images**

• SVG architecture diagram (dark theme)
• PNG social card (1200x630)
• PNG banner (for README header)
• ✅ Professional appearance
• ✅ Better for social sharing
• ❌ Requires image generation
• ❌ Harder to maintain

**Option C: Both** ⭐ **RECOMMENDED**

• ASCII in README (works everywhere)
• Real images in `/assets` folder
• Best of both worlds

---

Templates

ASCII Art Banner

**Box-drawing style:**

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│                    PROJECT NAME                             │
│                  Tagline goes here                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

**Block character style:**

███╗   ███╗██╗   ██╗    ██████╗ ██████╗  ██████╗      ██╗███████╗ ██████╗████████╗
████╗ ████║╚██╗ ██╔╝    ██╔══██╗██╔══██╗██╔═══██╗     ██║██╔════╝██╔════╝╚══██╔══╝
██╔████╔██║ ╚████╔╝     ██████╔╝██████╔╝██║   ██║     ██║█████╗  ██║        ██║   
██║╚██╔╝██║  ╚██╔╝      ██╔═══╝ ██╔══██╗██║   ██║██   ██║██╔══╝  ██║        ██║   
██║ ╚═╝ ██║   ██║       ██║     ██║  ██║╚██████╔╝╚█████╔╝███████╗╚██████╗   ██║   
╚═╝     ╚═╝   ╚═╝       ╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚════╝ ╚══════╝ ╚═════╝   ╚═╝

---

Architecture Diagram

                                USER
                                 │
                                 │ Request
                                 ▼
                ┌────────────────────────────────┐
                │                                │
                │      COMPONENT A               │
                │   (Description)                │
                │                                │
                └────────────────────────────────┘
                                 │
                ┌────────────────┴────────────────┐
                │                                 │
                ▼                                 ▼
    ┌───────────────────┐           ┌───────────────────┐
    │                   │           │                   │
    │   COMPONENT B     │           │   COMPONENT C     │
    │   (Description)   │           │   (Description)   │
    │                   │           │                   │
    └───────────────────┘           └───────────────────┘
                │                                 │
                └────────────────┬────────────────┘
                                 │
                                 ▼
                ┌────────────────────────────────┐
                │                                │
                │      OUTPUT                    │
                │   (Result)                     │
                │                                │
                └────────────────────────────────┘

---

Comparison Table

┌──────────────────┬─────────────┬─────────────┬─────────────┐
│                  │   OPTION A  │   OPTION B  │   OPTION C  │
├──────────────────┼─────────────┼─────────────┼─────────────┤
│ Feature 1        │ ✅ Yes      │ ❌ No       │ ✅ Yes      │
│ Feature 2        │ ❌ No       │ ✅ Yes      │ ✅ Yes      │
│ Speed            │ Fast        │ Slow        │ Medium      │
│ Cost             │ Free        │ $10/mo      │ Free        │
└──────────────────┴─────────────┴─────────────┴─────────────┘

---

Folder Structure

project-root/
├── src/                    # Source code
│   ├── components/         # React components
│   └── utils/              #