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 PreviewStep 2: Generate Comprehensive Preview
Include multiple visual types in one file:
- ASCII Art Banner/Logo
- Use box-drawing characters (╔═╗║╚╝)
- Use block characters (█▀▄▌▐)
- Include tagline and URL
- Architecture Diagram
- System components
- Data flow (arrows: → ↓ ↑ ←)
- Integration points
- Workflow Diagram
- Step-by-step process
- Decision points
- Outcomes
- Comparison Tables
- Feature comparison
- Before/After
- Options comparison
- Folder Structure
- Tree view (├── └── │)
- Annotations
- Purpose explanations
- Performance Metrics
- Bar charts (█ blocks)
- Speed comparisons
- Size comparisons
- Quick Start Guide
- Installation steps
- Usage examples
- Success criteria
- 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
/assetsfolder - 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/ # Utility functions
├── tests/ # Test suite
│ ├── unit/ # Unit tests
│ └── integration/ # Integration tests
├── docs/ # Documentation
│ ├── README.md # Main docs
│ └── API.md # API reference
├── .github/ # GitHub config
│ ├── workflows/ # CI/CD
│ └── ISSUE_TEMPLATE/ # Issue templates
└── package.json # DependenciesPerformance Metrics
┌─────────────────────────────────────────────────────────────┐
│ │
│ SPEED COMPARISON │
│ │
│ Option A: ████ 2ms │
│ Option B: ████████████████████████████ 1000ms │
│ │
│ Speed Improvement: 500x faster │
│ │
└─────────────────────────────────────────────────────────────┘Pitfalls
❌ DON'T: Generate Images Without Preview
Problem: User can't review before committing, wastes time if design needs changes.
Solution:
- Create TXT preview first
- Get user approval
- Then generate real images
❌ DON'T: Use Complex Unicode That Breaks
Problem: Some terminals don't support all Unicode characters.
Solution:
- Test in common terminals (bash, zsh, Windows Terminal)
- Use widely-supported box-drawing characters
- Provide fallback ASCII version
❌ DON'T: Make Diagrams Too Wide
Problem: Diagrams break on narrow terminals or mobile GitHub.
Solution:
- Keep width ≤ 80 characters (safe)
- Max 120 characters (acceptable)
- Test on mobile GitHub view
❌ DON'T: Forget to Include File Header
Problem: User doesn't know what the file contains or how to use it.
Solution:
# PROJECT NAME
# Visual Assets Preview
This file contains ASCII art previews for:
1. Banner/Logo
2. Architecture Diagram
3. Workflow Diagram
[...]
Generated: 2026-05-12
Repo: https://github.com/user/repoExamples
Example 1: Simple Banner
Input: "bikin banner untuk repo mnemosyne-obsidian"
**Out