본문으로 건너뛰기
cccskills
무료GitHub에 공개

visual-assets-generation

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills
설치 방법 보기

포함된 파일(1)

  • SKILL.md16.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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/              # 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:

  1. Asks for visual: "bikin gambar/banner/diagram"
  2. Wants preview first: "buatkan contohnya dulu dalam file txt"
  3. Reviews preview
  4. 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 diagrams
  • ascii-art — ASCII art generation (pyfiglet, cowsay)
  • excalidraw — Hand-drawn style diagrams
  • sketch — HTML mockups for social cards

References

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

addyosmani-tdd

무료

Drives 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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

airtable

무료

Airtable REST API via curl. Records CRUD, filters, upserts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

api-and-interface-design

무료

Guides 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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

api-monitoring-bots

무료

Build monitoring bots that poll APIs and send notifications on state changes (new listings, price alerts, status updates)

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

api-testing

무료

REST/GraphQL API testing with automated validation — test endpoints, validate responses, check status codes, and ensure API contracts

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

apple-notes

무료

Manage Apple Notes via memo CLI: create, search, edit.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kevinnft/ai-agent-skills142026년 8월 1일 업데이트

kevinnft의 스킬 모두 보기

이 스킬의 문제 신고