visual-assets-generation skill

by kevinnft·kevinnft/ai-agent-skills·14 stars·MIT

Generate visual assets (ASCII art, diagrams, banners) for repos and documentation

A100/100content scan

Is the visual-assets-generation skill safe?

Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.

No findings.

Install the visual-assets-generation skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.

git clone --depth 1 https://github.com/kevinnft/ai-agent-skills.git /tmp/ai-agent-skills
mkdir -p ~/.claude/skills
cp -r /tmp/ai-agent-skills/skills/creative/visual-assets-generation ~/.claude/skills/visual-assets-generation

available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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 /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)   │
    │                   │           │                   │
    └───────────────────┘           └───────────────────┘
                │                                 │
                └────────────────┬────────────────┘
                                 │
                                 ▼
                ┌────────────────────────────────┐

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:

More skills from kevinnft/ai-agent-skills

Aaddyosmani-tddDrives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.
AairtableAirtable REST API via curl. Records CRUD, filters, upserts.
Aapi-and-interface-designGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
Aapi-monitoring-botsBuild monitoring bots that poll APIs and send notifications on state changes (new listings, price alerts, status updates)
Aapple-notesManage Apple Notes via memo CLI: create, search, edit.
Aapple-remindersApple Reminders via remindctl: add, list, complete.
Aarchitecture-diagramDark-themed SVG architecture/cloud/infra diagrams as HTML.
AarxivSearch arXiv papers by keyword, author, category, or ID.
Aascii-artASCII art: pyfiglet, cowsay, boxes, image-to-ascii.
Aascii-videoASCII video: convert video/audio to colored ASCII MP4/GIF.
AaudiocraftAudioCraft: MusicGen text-to-music, AudioGen text-to-sound.
CaxolotlAxolotl: YAML LLM fine-tuning (LoRA, DPO, GRPO).

All agent skills → · MCP servers