# Ascii Art

> แปลงข้อความภาษาอังกฤษหรือไฟล์รูปภาพให้เป็น ASCII art แล้วแสดงผลลัพธ์ในเทอร์มินัลทันที พร้อมทำ HTML Artifact ให้ด้วยเมื่อผลลัพธ์มีสี (ANSI ไม่กลายเป็นสีนอก terminal) รองรับ 8 โหมด: figlet (banner 571 ฟอนต์), toilet (banner + สี + กรอบ), lolcat (ระบายสีรุ้ง), cowsay (ตัวการ์ตูนพูด), box (กรอบล้อมข้อความ), jp2a (รูป → ASCII), chafa (รูป → บล็อกสีจริง), braille (รูป → อักขระ Braille ความละเอียดสูง) พร้อมชุดสี rainbow, fire, metal, matrix ฯลฯ ใช้ skill นี้ทันทีเมื่อผู้ใช้พูดถึง ASCII art, figlet, toilet, jp2a, chafa, banner, ตัวอักษรใหญ่, แปลงรูปเป็นตัวอักษร, ทำ header สวยๆ ให้ README/CLI/MOTD, "ทำโลโก้เป็น ASCII", "เอาชื่อนี้ทำเป็น ตัวใหญ่ๆ", "แปลงรูปนี้เป็นตัวหนังสือ", "ทำ splash screen ให้ CLI", "อยากได้ ASCII เท่ๆ" — เรียกใช้ผ่าน `/ascii-art` เท่านั้น — ไม่ auto-trigger จากบทสนทนา

- Skill: `natthasath/ascii-art` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add natthasath/ascii-art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/natthasath/ascii-art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: natthasath (https://skillmd.com/u/natthasath)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/natthasath/ascii-art

---


# บทบาท:

คุณทำหน้าที่แปลง input ของผู้ใช้ (ข้อความภาษาอังกฤษ หรือ path ของไฟล์รูป) ให้เป็น ASCII art
โดย **ถามก่อนเสมอว่าอยากได้สไตล์ไหน** แล้วรันสคริปต์ให้ดู ไม่ใช่แค่บอกวิธีทำ

ที่ต้องถามก่อนเพราะ ASCII art เป็นงานที่ตัดสินถูกผิดจากรสนิยม ไม่ใช่ความถูกต้อง — ฟอนต์
`bloody` กับ `script` แปลงข้อความเดียวกันแต่ให้ความรู้สึกคนละโลก ถ้าเดาเองมักได้ของที่ต้องทำใหม่
การถามให้ครบเร็วกว่าการเดาผิดแล้วต้องทำใหม่

# ขั้นตอน:

## 1. แยกว่า input เป็นข้อความหรือรูป

- **ข้อความ** → ใช้โหมดกลุ่ม text: `figlet` `toilet` `lolcat` `cowsay` `box`
- **path ไฟล์รูป** (.png .jpg .jpeg .webp .bmp .gif) → ใช้โหมดกลุ่ม image: `jp2a` `chafa` `braille`

ถ้าผู้ใช้ยังไม่ได้ให้อะไรมาเลย (พิมพ์แค่ `/ascii-art`) ให้ถามก่อนว่าจะแปลงข้อความหรือรูป

## 2. บังคับให้ข้อความเป็นภาษาอังกฤษ

ฟอนต์ FIGlet นิยาม glyph ไว้เฉพาะ ASCII 32–126 เท่านั้น ภาษาไทยและอักษรอื่นที่ไม่ใช่ละติน
จะกลายเป็นกล่องว่างหรือช่องว่าง ไม่ใช่ตัวอักษร — สคริปต์เลยตรวจและ error ออกมาก่อนแทนที่จะ
render ขยะให้

ถ้าผู้ใช้ส่งข้อความไทยมา **อย่ารันแล้วปล่อยให้ error เอง** ให้เสนอคำแปล/คำทับศัพท์ภาษาอังกฤษ
ให้เขายืนยันก่อน เช่น "สวัสดี" → เสนอ `Sawasdee` หรือ `Hello` แล้วถามว่าเอาอันไหน

## 3. ถามทีละคำถาม เรียงตามลำดับ

เรียก `AskUserQuestion` **หนึ่งคำถามต่อหนึ่งครั้ง** รอคำตอบแล้วค่อยถามข้อถัดไป
อย่ายัดหลายคำถามใส่ call เดียวแม้เครื่องมือจะรองรับ

เหตุผลมี 2 ข้อ ข้อแรกคือแต่ละหน้าจอมีให้ตัดสินใจแค่เรื่องเดียว เลือกง่ายกว่าเจอสามเรื่อง
พร้อมกันแล้วต้องคิดว่าอันไหนเข้ากับอันไหน ข้อสองสำคัญกว่า — **คำถามข้อหลังปรับตาม
คำตอบข้อก่อนได้** พอรู้ว่าเขาเลือกฟอนต์ `bloody` ก็เสนอ `fire` กับ `red` ขึ้นก่อนในข้อสี
เพราะเข้ากับอารมณ์ที่เขาเพิ่งเลือก ถ้าถามพร้อมกันจะทำแบบนี้ไม่ได้เลย ต้องเดาล่วงหน้าอย่างเดียว

### ลำดับคำถามของแต่ละโหมด

ถามข้อ 1 ก่อนเสมอ ได้คำตอบแล้วจึงเดินตามแถวของโหมดนั้น:

| โหมด | ลำดับคำถาม |
|---|---|
| `figlet` | โหมด → ฟอนต์ → สี |
| `toilet` | โหมด → ฟอนต์ → สี → กรอบ |
| `cowsay` | โหมด → ตัวละคร → สี |
| `box` | โหมด → กรอบ → สี → การจัดวาง (`--align`) |
| `lolcat` | โหมด → สี |
| `jp2a` | โหมด → ความกว้าง → ramp → สี |
| `chafa` | โหมด → ความกว้าง |
| `braille` | โหมด → ความกว้าง → `--threshold` |

**ข้อ 1 — โหมด** เสนอตามชนิดของ input:

| input | ตัวเลือก |
|---|---|
| ข้อความ | `figlet` (ตัวอักษรใหญ่) / `toilet` (ตัวใหญ่ + สี + กรอบ) / `cowsay` (ตัวการ์ตูนพูด) / `box` (กรอบล้อมข้อความ) |
| รูป | `jp2a` (ตัวอักษร ASCII) / `chafa` (บล็อกสีจริง 24-bit) / `braille` (อักขระ Braille ละเอียดสูง) |

`lolcat` ไม่ต้องเสนอในข้อนี้ — มันคือการระบายสีทับข้อความธรรมดาโดยไม่ขยายตัวอักษร
ซึ่งเป็นสิ่งที่คนนึกออกน้อยกว่า เสนอเป็นทางเลือกเพิ่มทีหลังได้ถ้าผู้ใช้บอกว่าไม่อยากได้ตัวใหญ่

### กฎที่ใช้กับทุกข้อ

**ทุกคำถามต้องมีตัวเลือก "ไม่เอา" เสมอ** — `--color none` และ `--border none` ใช้ได้จริง
ถ้าเสนอแต่ตัวเลือกที่ใส่ของ ผู้ใช้ที่อยากได้ตัวอักษรเปล่าๆ จะไม่มีทางบอกได้ กลายเป็นว่า
"ให้เลือก" แต่เลือกได้แค่ที่เราอยากให้เป็น

**อธิบายตัวเลือกด้วยความรู้สึก ไม่ใช่ชื่อเทคนิค อย่า dump รายชื่อ 571 ฟอนต์** — คนที่ไม่เคย
ใช้ figlet ไม่รู้ว่า `larry3d` หน้าตายังไง แต่รู้ว่าตัวเองอยากได้ความรู้สึกแบบไหน เสนอแบบ
"ansi_shadow (โมเดิร์น เด่น)", "slant (คลาสสิก สะอาด)", "bloody (ดุ ดิบ)",
"pagga (แน่น เท่)" จึงเลือกได้จากสิ่งที่เขารู้จริง

**เสนอ 3–4 ตัวเลือกต่อข้อ อย่าให้ครบทุกค่าที่มี** — สี 15 ชุดกับกรอบ 9 แบบยัดลงหน้าจอเดียว
กลายเป็นรายการให้ไล่อ่าน ไม่ใช่ตัวเลือกให้ตัดสินใจ คัดมาเฉพาะที่เข้ากับสิ่งที่เขาเลือกไปแล้ว
ผู้ใช้พิมพ์ค่าอื่นเองได้อยู่แล้วถ้าอยากได้

**ข้ามข้อที่ผู้ใช้ระบุมาแล้ว** — "ทำ Hello เป็น figlet" ให้ข้ามข้อโหมด ไปถามฟอนต์เลย
และถ้าบอกครบว่า "figlet ฟอนต์ slant สีฟ้า" ก็รันได้ทันทีไม่ต้องถามอะไร การถามสิ่งที่เขา
เพิ่งบอกไปทำให้รู้สึกว่าไม่ได้ฟัง

อยากดูตัวอย่างฟอนต์จริงก่อนเสนอ ให้อ่าน `references/gallery.md` — มีภาพฟอนต์ยอดนิยมที่ render
ไว้แล้ว พร้อมสูตรผสมโหมด+ฟอนต์+สีตามโอกาสใช้งาน (README header, splash screen, MOTD ฯลฯ)

## 4. รันสคริปต์

```bash
bash "<base-directory-ของ-skill-นี้>/scripts/ascii-art.sh" --mode <mode> [options]
```

ใช้ path แบบ absolute โดยเอา base directory ของ skill นี้ (ที่ระบบแจ้งไว้ตอนโหลด skill) มาต่อกับ
`scripts/ascii-art.sh` — working directory ตอนรันมักไม่ใช่โฟลเดอร์ของ skill นี้

สคริปต์เรียก `uv run --script` ซึ่งติดตั้ง pyfiglet + pillow ให้เองในสภาพแวดล้อมชั่วคราว
ไม่ต้องติดตั้ง figlet/toilet/jp2a มาก่อน (สามตัวนั้นเป็น Unix package ที่ไม่มี build
น่าเชื่อถือบน Windows ซึ่งเป็นเหตุผลที่ skill นี้ reimplement ขึ้นมาเองแทนที่จะเรียกใช้)

### ตัวเลือกที่ใช้บ่อย

| Flag | ใช้กับโหมด | ค่า |
|---|---|---|
| `--text "..."` | text modes | ข้อความภาษาอังกฤษ |
| `--image PATH` | image modes | path ไฟล์รูป |
| `--font NAME` | figlet, toilet | ดู `--list-fonts` (571 ตัว) |
| `--color NAME` | ทุกโหมดยกเว้น chafa | `none` `rainbow` `pride` `metal` `fire` `ocean` `matrix` `gold` `red` `green` `yellow` `blue` `magenta` `cyan` `white` และ `image` (เฉพาะ jp2a — ใช้สีจริงจากรูป) |
| `--border NAME` | toilet, box | `none` `single` `double` `rounded` `bold` `ascii` `dots` `stars` `hash` |
| `--character NAME` | cowsay | `cow` `tux` `dragon` `stegosaurus` `sheep` `ghost` `bunny` `turtle` |
| `--ramp NAME` | jp2a | `classic` `detailed` `blocks` `simple` `binary` |
| `--width N` | ทุกโหมด | 10–400 (ค่าเริ่มต้น 80) |
| `--align` | box, toilet | `left` `center` `right` |
| `--invert` | jp2a, braille | สลับมืด/สว่าง สำหรับพื้นหลังสีอ่อน |
| `--threshold N` | braille | 0–255 ตัดขาว/ดำแบบคม (ไม่ใส่ = ใช้ dithering) |
| `--html PATH` | ทุกโหมด | เขียนไฟล์ HTML เพิ่มไว้ที่ PATH สำหรับ publish เป็น Artifact (ยังพิมพ์ลงเทอร์มินัลตามปกติด้วย) |
| `--list` | — | catalog ทั้งหมดเป็น JSON |
| `--list-fonts [คำค้น]` | — | รายชื่อฟอนต์ กรองด้วยคำค้นได้ |

### ตัวอย่างคำสั่ง

```bash
# banner สีรุ้งสำหรับ README
ascii-art.sh --mode figlet --text "Deploy" --font ansi_shadow --color rainbow

# แบบ toilet — banner + กรอบ + ไล่สีโลหะ
ascii-art.sh --mode toilet --text "BUILD OK" --font pagga --border rounded --color metal

# กรอบล้อมข้อความหลายบรรทัด
ascii-art.sh --mode box --text "Tests: 42 passed
Duration: 1m12s" --border bold --align center --color green

# ตัวการ์ตูนพูด
ascii-art.sh --mode cowsay --text "All checks passed" --character tux --width 50

# รูป → ASCII ล้วน (คัดลอกไปแปะได้)
ascii-art.sh --mode jp2a --image ./logo.png --width 80

# รูป → บล็อกสีจริง (สวยที่สุดในเทอร์มินัล)
ascii-art.sh --mode chafa --image ./photo.jpg --width 60

# รูป → Braille ความละเอียดสูง (โลโก้คมๆ ใช้ --threshold)
ascii-art.sh --mode braille --image ./logo.png --width 70 --threshold 128
```

## 5. ถ้าใช้สี ให้ทำ Artifact ควบไปด้วย

รหัส ANSI กลายเป็นสีได้เฉพาะใน terminal emulator เท่านั้น ที่ไหนที่ render markdown แทน —
เช่น claude.ai, คอมเมนต์ GitHub, ไฟล์ `.md` — จะเห็นเป็นตัวอักษรดิบ `[38;2;255;13;13m`
พันอยู่กับ ASCII art จนอ่านไม่ออกเลย นี่เป็นข้อจำกัดของชั้นแสดงผล ไม่ใช่ของสคริปต์

ดังนั้น **เมื่อใดที่ผลลัพธ์มีสี** (ทุกโหมดที่ `--color` ไม่ใช่ `none` และ `chafa` ซึ่งมีสีเสมอ)
ให้ใส่ `--html` ควบไปด้วยแล้ว publish เป็น Artifact:

```bash
ascii-art.sh --mode chafa --image ./photo.jpg --width 70 --html <scratchpad>/art.html
```

แล้วเรียก Artifact tool ชี้ไปที่ไฟล์นั้น ผู้ใช้จะได้ทั้งสองทาง — เห็นสีทันทีในเทอร์มินัล
และมีลิงก์ที่เปิดดูสีได้จากที่อื่นหรือส่งต่อให้คนอื่นได้ ไฟล์ HTML เป็น self-contained
(สไตล์ inline ทั้งหมด ไม่มี asset ภายนอก) จึงผ่านข้อจำกัด CSP ของ Artifact อยู่แล้ว

เขียนไฟล์ลง scratchpad directory ของ session ไม่ใช่ในโปรเจกต์ของผู้ใช้ — มันเป็นไฟล์
ตัวกลางสำหรับ publish ไม่ใช่ของที่เขาสั่งให้สร้าง

**ถ้า `--color none`** ไม่ต้องทำ Artifact — ASCII ล้วนอ่านออกทุกที่อยู่แล้ว การทำ Artifact
เพิ่มขั้นตอนโดยไม่ได้อะไรกลับมา

## 6. สรุปให้ผู้ใช้

ผลลัพธ์จากสคริปต์แสดงในเทอร์มินัลอยู่แล้ว **พร้อมสีจริง** — ไม่ต้องคัดลอกมาแปะซ้ำทั้งก้อน
ให้เขียนสรุปสั้นๆ ใต้ผลลัพธ์แทน:

1. บอกว่าใช้โหมด/ฟอนต์/สีอะไร
2. แปะคำสั่งเต็มที่ใช้ ให้ผู้ใช้เอาไปรันซ้ำหรือแก้ค่าเองได้
3. เสนอทางปรับต่อ 1–2 อย่างที่น่าจะอยากลอง เช่น "อยากได้ฟอนต์ใหญ่กว่านี้ลอง `colossal`" หรือ
   "ถ้าจะเอาไปแปะใน README ต้องใช้ `--color none` เพราะ GitHub ไม่ render สี ANSI"

**ยกเว้นกรณีเดียว** — ถ้าใช้ `--color none` และผู้ใช้บอกว่าจะเอาไปแปะที่อื่น (README, code
comment, commit message) ให้คัดลอกผลลัพธ์มาใส่ code fence ในคำตอบด้วย เพราะเขาต้องคัดลอก
ต่อจริง การให้เขาไปไล่คัดจาก terminal output ที่มี prompt ปนอยู่นั้นเสียเวลากว่า

# คำขอ:

- **ถามก่อนรันเสมอ ยกเว้นผู้ใช้ระบุมาครบแล้ว** — ถามทีละคำถาม รอคำตอบแล้วค่อยถามข้อถัดไป
  ห้ามยัดหลายคำถามใส่ call เดียว เพราะข้อหลังต้องปรับตัวเลือกตามคำตอบข้อก่อน
- **ผลลัพธ์ออกที่เทอร์มินัลเสมอ** — ผู้ใช้ต้องการเห็นผลทันทีตอนรัน ไม่ใช่ได้ path มาแล้ว
  ต้องไปเปิดเอง ไฟล์เดียวที่ควรเขียนคือ HTML สำหรับ publish เป็น Artifact ตอนที่ผลลัพธ์มีสี
  ซึ่งเป็นการ**เพิ่ม**ช่องทางดู ไม่ใช่แทนที่การแสดงผล นอกเหนือจากนั้นอย่าเสนอเซฟไฟล์
- **ทุกครั้งที่ผลลัพธ์มีสี ให้ทำ Artifact ควบ** — เพราะสีจะหายไปทันทีที่ผู้ใช้เอา output
  ไปวางที่อื่น และหลายคนใช้ Claude ผ่านเว็บซึ่งไม่มี terminal ให้ ANSI ทำงานตั้งแต่แรก
- **ข้อความต้องเป็นภาษาอังกฤษเท่านั้น** — ถ้าได้ภาษาไทยมา ให้เสนอคำอังกฤษ/ทับศัพท์ให้ยืนยัน
  ก่อน อย่ารันทิ้งให้ error
- **ข้อความยาวๆ อย่าใช้ figlet** — เกิน ~15 ตัวอักษรจะล้นความกว้างเทอร์มินัลจนอ่านไม่ออก
  ถ้าผู้ใช้ส่งประโยคยาวมา ให้เสนอ `cowsay` หรือ `box` แทน (ทั้งคู่ตัดบรรทัดให้อัตโนมัติ)
  หรือถามว่าจะตัดเหลือคำสำคัญคำเดียวไหม
- **เลือกโหมดรูปตามปลายทางที่จะเอาไปใช้** — `chafa` สวยที่สุดแต่เป็น ANSI สีล้วน ใช้ได้เฉพาะ
  ในเทอร์มินัล ถ้าผู้ใช้จะเอาไปแปะใน README หรือไฟล์ text ต้องใช้ `jp2a` หรือ `braille`
  ถามปลายทางก่อนถ้ายังไม่ชัด
- **รูปที่มี contrast ต่ำจะออกมาเป็นก้อนเทา** — ถ้าผลลัพธ์ดูจาง ให้ลอง `--ramp detailed`
  (70 ระดับ ไล่เฉดได้ละเอียดกว่า classic ที่มี 10 ระดับ) หรือ `--invert` ถ้าพื้นหลังรูปเป็นสีอ่อน
- **braille กับโลโก้/กราฟิกให้ใส่ `--threshold`** — ค่าเริ่มต้นใช้ Floyd-Steinberg dithering
  ซึ่งเหมาะกับรูปถ่ายที่มีไล่เฉด แต่กับภาพพื้นเรียบจะกลายเป็นจุดกระจายรบกวนสายตา
  `--threshold 128` ตัดขาว/ดำคมๆ ให้แทน

# ไฟล์แนบ:

- `scripts/ascii-art.sh` — entry point (เรียกผ่าน `bash`)
- `scripts/ascii_art.py` — ตัว render จริง ประกาศ dependency แบบ PEP 723 ให้ `uv run` จัดการเอง
- `references/gallery.md` — ตัวอย่างฟอนต์ยอดนิยมที่ render ไว้แล้ว + สูตรผสมตามโอกาสใช้งาน
  อ่านไฟล์นี้ก่อนเสนอตัวเลือกให้ผู้ใช้ ถ้าอยากแนะนำได้ตรงกว่าการเดาจากชื่อฟอนต์