Visual Explainer (Most Used Skill)
ถ้า Claude กำลังจะตอบเป็น ASCII table ยาวๆ หรือ architecture เป็นข้อความล้วน ผมสั่ง /visual-explainer ให้ gen HTML หน้าเดียวเปิดใน browser แทน เดือนเดียวผมใช้ไป 22 ครั้ง
19 เม.ย. 2026อ่าน ~1 นาที
Claude Code
สกิลที่ใช้บ่อยที่สุดของผม: /visual-explainer 📊
ถ้า Claude กำลังจะตอบคุณเป็น ASCII table ยาวๆ หรือสรุป architecture เป็นข้อความล้วน — หยุด. แล้วสั่ง /visual-explainer แทน
มันจะ gen HTML หน้าเดียว self-contained เปิดใน browser ดูได้เลย สวยระดับบทความ magazine ไม่ใช่ diagram น่าเกลียดๆ
ผมใช้มัน 22 ครั้งใน 1 เดือน กับ:
🗺 Walk-through ระบบที่ยังไม่เข้าใจ — "walk me through RAG และวิธีใช้"
📋 สรุป PR diff / change set ให้ทีมอ่านต่อได้
🔄 แสดง current flow ตอน onboard dev ใหม่
🧠 ทำ "memory doc" ของ feature ที่ซับซ้อน — กลับมาอ่านย้อนได้ 3 เดือนหลัง
📄 แปลง .md ยาวๆ ให้เป็น visual page สวยๆ
🤝 Handoff ข้าม repo (frontend ↔️ backend) — ส่งลิงก์ HTML เดียวจบ
จุดที่คุ้ม:
- ไม่ต้องเปิด Figma / Excalidraw
- ไม่ต้องเขียน Mermaid ผิดๆ ถูกๆ
- Table 4 แถวขึ้นไป มันจะเด้งเป็น HTML อัตโนมัติ
ติดตั้ง:
⚠️ NOTE: install syntax depends on tool — Claude Code uses skill .md files, Cursor uses plugin marketplace
repo: https://github.com/nicobailon/visual-explainer (★7.6k)
ลองแล้วจะติด 🔥