Ascii Artist

---
name: ascii-artist
description: Create beautiful ASCII art, diagrams, banners, and text graphics. Use when asked for ASCII art, text diagrams, CLI graphics, terminal banners, or plaintext visuals.
---

# ASCII Artist

Create ASCII art with craft. Every character is a pixel. The constraint is the gift.

## Philosophy

ASCII art is typography at its limit. The monospace grid is your canvas. Whitespace is not empty — it is structure.

**Principles:**
- Choose characters for their visual weight, not their meaning
- Respect the grid — alignment is everything
- Less is more — don't fill every space
- Test in monospace — it will look different in proportional fonts

## Character Palette

### Weight Scale (Light to Heavy)

```
Light:   . · ˙ ' `
Medium:  - ~ = + * : ;
Heavy:   # @ % & $
Block:   ░ ▒ ▓ █
```

### Lines and Structure

```
Horizontal:  - = _ ─ ━
Vertical:    | │ ┃
Diagonal:    / \
Corners:     + ┌ ┐ └ ┘ ╭ ╮ ╰ ╯
T-joins:     ├ ┤ ┬ ┴ ┼
Double:      ═ ║ ╔ ╗ ╚ ╝ ╠ ╣ ╦ ╩ ╬
Rounded:     ╭ ╮ ╰ ╯
```

### Arrows

```
Simple:   <- -> ^ v
Fancy:    ← → ↑ ↓ ↔ ↕
Triangle: ◀ ▶ ▲ ▼
```

### Shapes

```
Dots:     · • ●
Squares:  □ ■ ▪ ▫
Circles:  ○ ● ◯ ◉
Stars:    * ✱ ✳ ★ ☆
```

## Banners

### Simple Box Banner

```
┌─────────────────────┐
│   YOUR TEXT HERE    │
└─────────────────────┘
```

### Double Line Banner

```
╔═════════════════════╗
║   YOUR TEXT HERE    ║
╚═════════════════════╝
```

### Rounded Banner

```
╭─────────────────────╮
│   YOUR TEXT HERE    │
╰─────────────────────╯
```

### Shadow Banner

```
┌─────────────────────┐
│   YOUR TEXT HERE    │▒
└─────────────────────┘▒
 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
```

### Big Text (Block Letters)

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

### Minimal Big Text

```
 _  _  ___  _    _    ___
| || || __|| |  | |  / _ \
| __ || _| | |__| |_| (_) |
|_||_||___||____|____\___/
```

### Slant Style

```
    __  __________    __    ____
   / / / / ____/ /   / /   / __ \
  / /_/ / __/ / /   / /   / / / /
 / __  / /___/ /___/ /___/ /_/ /
/_/ /_/_____/_____/_____/\____/
```

## Diagrams

### Flowchart

```
┌─────────┐     ┌─────────┐     ┌─────────┐
│  Start  │────▶│ Process │────▶│   End   │
└─────────┘     └─────────┘     └─────────┘
                     │
                     ▼
               ┌─────────┐
               │ Branch  │
               └─────────┘
```

### Tree Structure

```
project/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   ├── utils/
│   │   └── helpers.ts
│   └── index.ts
├── package.json
└── README.md
```

### Architecture Diagram

```
┌──────────────────────────────────────────┐
│                 Client                    │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│              API Gateway                  │
└───────┬──────────────────────┬───────────┘
        │                      │
        ▼                      ▼
┌───────────────┐      ┌───────────────┐
│   Service A   │      │   Service B   │
└───────┬───────┘      └───────┬───────┘
        │                      │
        └──────────┬───────────┘
                   ▼
          ┌───────────────┐
          │   Database    │
          └───────────────┘
```

### Timeline

```
──●────────●────────●────────●────────●──▶
  │        │        │        │        │
  v1.0     v1.1     v2.0     v2.1     v3.0
  Jan      Mar      Jun      Sep      Dec
```

### Table

```
┌──────────┬───────────┬─────────┐
│  Name    │   Role    │  Status │
├──────────┼───────────┼─────────┤
│  Alice   │  Engineer │  Active │
│  Bob     │  Designer │  Active │
│  Carol   │  Manager  │  Away   │
└──────────┴───────────┴─────────┘
```

## Decorative Elements

### Dividers

```
─────────────────────────────────────────

═════════════════════════════════════════

─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

• • • • • • • • • • • • • • • • • • • • •

─────────────────●─────────────────

════════════════════════════════════════
            ◆ SECTION ◆
════════════════════════════════════════
```

### Frames

```
╔══════════════════════════════════════╗
║                                      ║
║    Content goes here                 ║
║                                      ║
╚══════════════════════════════════════╝

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                                      ┃
┃    Bold frame                        ┃
┃                                      ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
```

### Logo Example

```
    ╭━━━╮
    ┃ ◉ ┃  ACME
    ╰━━━╯  CORP
```

## Patterns

### Progress Bar

```
Loading: [████████████░░░░░░░░] 60%

Progress: ▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░ 50%

[====================          ] 67%
```

### Sparklines

```
▁▂▃▄▅▆▇█▇▆▅▄▃▂▁
```

### Checkbox Lists

```
[x] Task completed
[ ] Task pending
[~] Task in progress
[-] Task cancelled
```

### Status Indicators

```
● Online    ○ Offline    ◐ Busy    ◑ Away
```

## Rules

1. **Always use monospace** — ASCII art breaks in proportional fonts
2. **Test your output** — render it, don't just imagine it
3. **Align obsessively** — one space off ruins everything
4. **Use box-drawing characters** — they connect cleanly
5. **Whitespace is structure** — don't fight it, use it
6. **Keep it readable** — art that can't be understood is noise

## Common Mistakes

- Using proportional fonts to view ASCII art
- Mixing box-drawing styles (single with double)
- Inconsistent spacing
- Too much detail — know when to simplify
- Forgetting the art will be copy-pasted

---

*The constraint is the gift. Make something beautiful.*