kevinnft 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:
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 # Dependencies
Performance 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/repo
Examples
Example 1: Simple Banner
Input: "bikin banner untuk repo mnemosyne-obsidian"
Output:
███╗ ███╗███╗ ██╗███████╗███╗ ███╗ ██████╗ ███████╗██╗ ██╗███╗ ██╗███████╗
████╗ ████║████╗ ██║██╔════╝████╗ ████║██╔═══██╗██╔════╝╚██╗ ██╔╝████╗ ██║██╔════╝
██╔████╔██║██╔██╗ ██║█████╗ ██╔████╔██║██║ ██║███████╗ ╚████╔╝ ██╔██╗ ██║█████╗
██║╚██╔╝██║██║╚██╗██║██╔══╝ ██║╚██╔╝██║██║ ██║╚════██║ ╚██╔╝ ██║╚██╗██║██╔══╝
██║ ╚═╝ ██║██║ ╚████║███████╗██║ ╚═╝ ██║╚██████╔╝███████║ ██║ ██║ ╚████║███████╗
╚═╝ ╚═╝╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚═══╝╚══════╝
+ OBSIDIAN + GITHUB BACKUP
500x Faster Recall • Rich Markdown Notes
https://github.com/user/mnemosyne-obsidian
Example 2: Architecture Diagram
Input: "bikin diagram arsitektur untuk integration tool"
Output:
USER
│
│ "Show VPS cleanup"
▼
┌────────────────────────────────┐
│ │
│ HERMES AGENT │
│ (AI Assistant) │
│ │
└────────────────────────────────┘
│
┌────────────────┴────────────────┐
│ │
▼ ▼
┌───────────────────────┐ ┌───────────────────────┐
│ │ │ │
│ MNEMOSYNE │ │ OBSIDIAN │
│ (Fast Recall) │ │ (Rich Content) │
│ │ │ │
│ • SQLite DB (3.7MB) │ │ • Markdown files │
│ • 500x faster │ │ • Wikilinks │
│ • Temporal scoring │ │ • Database views │
│ │ │ │
└───────────────────────┘ └───────────────────────┘
│ │
└────────────────┬────────────────┘
│
▼
┌────────────────────────────────┐
│ │
│ GITHUB BACKUP │
│ (Version Control) │
│ │
└────────────────────────────────┘
Example 3: Comprehensive Preview File
Input: "bikin semua visual untuk repo"
Output: VISUAL_ASSETS_PREVIEW.txt with:
- ASCII art banner
- Architecture diagram
- Workflow diagram (5 steps)
- Features comparison table
- Installation comparison
- Folder structure
- Performance metrics
- Quick start guide
- Bundled skills list
- Badges & status
- Social media preview
Size: ~30 KB
Time: 5 minutes
User can review: All visuals in one file
User Preference Pattern (from session 2026-05-12)
User workflow:
- Asks for visual: "bikin gambar/banner/diagram"
- Wants preview first: "buatkan contohnya dulu dalam file txt"
- Reviews preview
- Decides: use ASCII, generate images, or both
Key insight:
- User prefers TXT preview before committing to images
- Allows review and iteration without image generation overhead
- Can decide format after seeing content
Related Skills
architecture-diagram— Dark-themed SVG diagramsascii-art— ASCII art generation (pyfiglet, cowsay)excalidraw— Hand-drawn style diagramssketch— HTML mockups for social cards
References
- Box-drawing characters: https://en.wikipedia.org/wiki/Box-drawing_character
- Block elements: https://en.wikipedia.org/wiki/Block_Elements
- ASCII art generators: https://patorjk.com/software/taag/