in-html — Ease Your Tired Mind with a Visual Explainer Called HTML

Cover แบบ clickbait: 'Stop reading markdown — your eyes will thank you.' พร้อมรูปเบนบนเวที TED ถือไมค์ และ pill ที่เขียนว่า '/in-html + /grill-with-docs' /in-html ใช้ได้แล้วใน ninyawee/skills — ติดตั้งด้วย npx skills ninyawee/skills/in-html
เฮ้ ตาล้าแล้วใช่มั้ย อ่าน markdown มาทั้งวันแล้วสิเนอะ ตาก็ล้าแบบเทาๆ แบบนั้นอยู่ ก่อนจะปิดแท็บนี้ไป — บทความนี้ไม่ใช่กำแพง prose อีกหนึ่งกองนะ มันมีรูปทรงเหมือนสิ่งที่กำลังพูดถึงเลย อย่าเพิ่งยอมแพ้ ถ้ามันเป็น HTML ไม่ใช่ MD คุณอ่านได้มากกว่านี้เยอะ นั่นแหละคือประเด็นทั้งหมด

in-html คืออะไรจริงๆ

มันคือ Claude Code skill ตัวหนึ่ง งานเดียว: หยุด agent จากการเทกอง markdown ลง chat ตอนที่มันส่งเป็นหน้าเว็บมาให้คุณได้

Markdown ใน chat

  • เป็นเส้น อ่านจากบนลงล่าง
  • สีเทาเหมือนกันหมด ไม่มีรูปทรง
  • Diagram กลายเป็น ASCII art
  • การตัดสินใจฝังอยู่ในย่อหน้า
  • ความล้าตาสะสมตลอดวัน
เป็น default ผลิตง่าย แต่คุณจ่ายต้นทุน

HTML artifact ใน browser

  • มองปุ๊บได้ ตาเลือก section เอง
  • สี รูปทรง ตำแหน่ง ทำงานให้
  • Mermaid diagram จริงๆ
  • Decision table ที่ highlight แถวเดียว
  • Code ที่มี caption file:line ไม่ใช่พิมพ์ใหม่
ไฟล์ .html เดียวใน /tmp/in-html/ Pico CSS เปิดใน browser

สอง mode — เลือกตามทิศของข้อมูล

AgentClaude Codeviz HTML pagediagram, code, tableอ่านอย่างเดียวคุณตาที่ล้าแล้วfeedback panelchip slider drag-dropinteractivevizตาเหลือบมองกด chip / กรอกJSON ผ่าน /submit
กฎ ถ้า artifact ไหลทางเดียว agent → คุณ คือ Mode 1 (viz) ถ้ามีอะไรไหล คุณ → agent — คำตอบเดียว ordered list config ที่มี tag — คือ Mode 2 (feedback) ทั้งคู่ผลิตไฟล์ .html เดียว เปิดใน browser จริง

Mode 1 — viz artifact จริง

นี่คือ artifact จริงที่ agent ทำให้ ตอนผมขอให้พามาดู sandbox decision ของ gh-x-html ก่อน review ADR ไฟล์เดียว Mermaid flowchart อยู่บนสุด decision table ตรงกลาง code excerpt จริงข้างล่าง callout “risk if regressed” ปักไว้ข้างๆ

Screenshot ของ Mode 1 in-html artifact ที่ render โมเดล sandbox ของ gh-x-html — หัวเรื่อง callout why-this flowchart และ decision table
ดู artifact เต็ม (เนื้อหาเท่ากับ markdown ADR ห้าหน้าจอ — แต่ scroll สองที) Screenshot เต็มหน้าของ Mode 1 artifact ตัวเดียวกัน — flowchart decision table side-by-side comparison code excerpt risk callout และ details

Mode 2 — feedback panel จริง

อีกครึ่งหนึ่ง agent ต้องการ structured data กลับ จากผมในเทิร์นเดียวกัน เขียน HTML run bun server เล็กๆ แบบ foreground browser เปิดให้ ผมกด chip หรือกรอกฟอร์ม กด Submit server print คำตอบเป็น JSON ออก stdout Bash call กลับมา agent เดินต่อ — ทั้งหมดในเทิร์นเดียว

Screenshot ของ Mode 2 feedback panel — 'Customer or User?' glossary block code excerpt chip 4 ตัวที่ Customer แนะนำสีม่วง และ textarea คำตอบแนะนำที่ pre-fill
ดู panel เต็ม (พร้อม talk-more drawer และ action row) Screenshot เต็มหน้าของ Mode 2 panel พร้อม textarea คำตอบแนะนำ ปุ่ม Submit / Talk more first / Copy-as-JSON

Mode 2 สร้างมาเพื่อ grill-with-docs

Mode 2 มาจากไหน ผมสร้าง feedback half ของ in-html มาเพื่อป้อน grill-with-docs โดยเฉพาะ — skill ที่ stress-test plan ของผมกับ term กับ decision ของโปรเจกต์ ทีละกิ่งของ design tree การ grill ผ่าน chat ล้วนๆ พังลงสองจุด และ Mode 2 แก้ทั้งสองจุดนั้น

1. ตอนผมต้องเห็นภาพ frontend ที่จะออกมา

ตอน agent ถาม "empty state ควรเป็น chip picker, search box, หรือ CTA ปุ่มเดียว?" การพิมพ์คำตอบกลับไปคือการเดาช้าๆ Mode 2 ให้ agent render candidate ออกมาเลย — chip row จริง search input จริง ปุ่มจริง — ในหน้า panel ของคำถามนั่นแหละ ผมแตะตัวที่ดูใช่ การตัดสินใจ frontend เกิดจากการ มอง ไม่ใช่จากการบรรยาย

UI ที่จับต้องได้ ชนะ intent ที่เขียน การตัดสินใจลงได้ในเสี้ยวมอง แทนสามรอบของ "ไม่ใช่ ประมาณ…"

2. อธิบายเรื่องซับซ้อนให้ผมฟัง แบบไว

ตอนกิ่งที่กำลัง grill ไม่เบาๆ — routing taxonomy, ขอบเขต billing-vs-auth, กฎ cache invalidation — agent ต้องวาง context ก่อนถาม Mode 2 ให้ canvas: glossary entry, code excerpt ที่ ambiguous, side-by-side, decision matrix — ทั้งหมดอยู่ในหน้าเดียวกับคำถาม อ่านและตอบเกิดในการ scan เดียว

คำถามกับ context ที่ต้องใช้ อยู่ในการเหลือบเดียว ไม่ใช่ห้าย่อหน้าของ prose ที่ต้อง scroll

panel “Customer or User?” ข้างบนคือ pattern นี้ตรงๆ — เทิร์น grill-with-docs จริงที่ agent render ออกมาเป็น HTML page แทนที่จะพิมพ์ลง chat

เมื่อไหร่ markdown ยังเข้าท่า เมื่อไหร่ HTML ชนะ

Surfaceเข้ากันดีกับเพราะอะไร
คำตอบสั้นใน chat.mdย่อหน้าเดียว ไม่ต้องมี diagram ไม่ต้องเปิด tab เพื่อสองประโยค
Diff, log, command output.mdเป็นเส้นอยู่แล้ว ไม่มีโครงสร้างให้ดึง
Plan / design walkthrough.html (Mode 1)Mermaid + decision table + code excerpt อ่านได้เป็นวินาที ไม่ใช่นาที
Disambiguation / glossary pick.html (Mode 2)Chip ที่มีคำตอบแนะนำ ชนะการพิมพ์คำตอบใน chat
Status board / decision log / ADR.html (Mode 1)Column ของ pill กับ panel side-by-side คือประเด็นเลย
Shape config / taxonomy / priority list.html (Mode 2)Drag-and-drop + slider + chip เข้ากับ shape ของข้อมูล

ผมใช้มันยังไงทุกวัน

Plan review "แสดงให้ดู อย่ามาเล่า" Mermaid + decision table + diff จริง อ่าน 30 วินาที ไม่ใช่ 5 นาที
Architecture decision Flowchart สำหรับ data flow decision table สำหรับ option callout สำหรับ risk ชนะ ADR draft 400 บรรทัดทุกครั้ง
คำถาม grilling Agent เสิร์ฟ panel ที่มี chip กับคำตอบแนะนำ pre-fill กดทีเดียวจบ เทิร์นเดินต่อ
Glossary disambiguation "Customer หรือ User?" Agent โชว์ glossary สองตัว side-by-side กับ code ambiguous กด chip จบ
Status report Table ที่มี pill เขียว เหลือง แดง ไม่ใช่ย่อหน้าที่บอก "ส่วนใหญ่เขียว มีเหลืองนิดหน่อย"
Shape config Agent ให้ editor มา — slider ordered list chip picker — แทนที่จะให้ผม dictate YAML ทีละบรรทัด

เรื่องนี้สำคัญกว่าที่ฟังดู

ต้นทุนจริงของความล้าทางสมอง พอสมองล้าจากการคิดมาทั้งวัน คุณก็ไม่แคร์อะไรอีกแล้ว ยอมจำนน — แล้ว consequence ก็เกิดขึ้นกับคุณ โดยที่คุณไม่ได้เข้าใจมัน

นั่นแหละคือสิ่งที่กำแพง markdown ทำกับคุณตอนปลายวันที่ยาวนาน คุณยังอ่านคำพวกนั้นอยู่ แต่หยุดจับ implication แล้ว bug ที่จะเห็นได้ตอน 10 โมงเช้า กลายเป็นของที่ ship ตอน 4 โมงเย็น ความไม่ตรงกันที่จะ call out ได้ กลายเป็นการตัดสินใจไปแล้ว ประเด็นของ in-html ไม่ใช่เพื่อให้ doc สวยขึ้น — แต่เพื่อให้คุณยังแคร์อยู่นานพอจะสังเกตเห็นต่างหาก

ติดตั้งและลองใช้

บรรทัดเดียว:

npx skills ninyawee/skills/in-html

ใน Claude Code session ไหนก็ได้ /in-html หรือแค่บอกว่าอยากให้แสดงอะไร skill ควรเข้ามารับเอง Mode 2 ต้องมี bun อยู่ใน PATH ด้วย

ใครสร้าง Mode 2 panel สำหรับอะไรน่าสนใจ — custom config shaper, tag picker, HITL annotation flow — ผมอยากเห็นว่า JSON ของคุณลงเอยเป็นรูปไหน

— Ben

Skill: ninyawee/skills → skills/in-html · โพสต์พี่น้อง: gh-x-html · แรงบันดาลใจ: Thariq Shihipar on How I AI, plannotator

© 2026 Nutchanon. All rights reserved. วงแหวนเว็บ