รีวิว Answer me with HTML — skill ให้ AI ตอบคำถามยากเป็นหน้า HTML ที่อ่านง่าย

คืออะไร

answer-me-with-html เป็น agent skill (ภาษา JavaScript) ที่เข้าใจง่ายมาก: ถามโจทย์ยากๆ ไป แล้วได้หน้า HTML หน้าเดียวที่อ่านรู้เรื่อง แทนที่จะได้ก้อนข้อความยาว ๆ

แนวคิดคือแบ่งงานให้โมเดล: โมเดลเขียนแค่ Markdown draft สั้นๆ (เนื้อหา ตาราง โค้ด และ diagram ในรูปแบบ code block) ส่วน CLI ที่มากับ skill จัด template วาง panel คำนวณพิกัด SVG/flow chart ใส่ธีม แล้วเรนเดอร์เป็นหน้าเว็บให้

คำถามธรรมดาสั้นๆ ก็ถามได้ ถ้าคำตอบไม่ยาว skill จะไม่สร้างหน้าให้ ส่วนถ้าเป็นเรื่องที่เกี่ยวกันหลายแนวคิด เป็น flow หลายขั้น หรือต้องเทียบหลายทาง มันจะทำหน้าให้เอง หรือบอกว่า "อธิบายเป็น HTML" ก็ได้

จุดเด่น

• โมเดลเขียนน้อยลงมาก — เจ้าของ repo วัดจากหน้า 9 ชิ้นที่โมเดลเขียนเอง (เฉลี่ย 4,893 tokens) พบว่า SVG coordinates/path 47%, HTML tags 17%, CSS 15% รวมกันเป็นส่วนที่ไม่ใช่เนื้อหา พอใช้ skill นี้ โมเดลเขียนเฉลี่ย 612 tokens คือประมาณ 1/8 (ผลทดสอบของผู้พัฒนาเอง)
• เร็วขึ้นด้วย — ตารางเทียบใน README (3 โจทย์ x 3 รอบ, ค่ามัธยฐาน, Claude Sonnet 5.5, Claude Code แบบปกติ) ระบุ 31 วินาที เป็น 12 วินาที หรือ 2.6 เท่า เร็วขึ้น และรัน node bench/corpus.mjs แล้วได้ตัวเลขชุดเดิมทุกครั้ง เก็บไว้ใน bench/corpus/tokens.json
• ไฟล์เดียว เปิดออฟไลน์ได้ — ไม่มี CDN link ไม่มี web font แชร์ต่อง่าย ปุ่มมุมขวาบนใช้สลับธีมและโหมดสว่าง/มืด รวบรวมคำตอบของคุณ และ copy Markdown ต้นฉบับได้
• สามธีม — blueprint เหมือนแบบ drawing วิศวกรรม, shadcn เป็นการ์ดสะอาด, paper เหมาะกับงานอ่านยาว โดย default CLI เลือก paper ให้ข้อความยาว และ blueprint ให้หน้าที่เป็น diagram ล้วน มี light/dark และเพิ่มธีมเองได้
• โค้ดจริง ไม่ใช่โค้ดที่โมเดลพิมพ์เล่นๆ — โค้ดบล็อกในหน้าอ้างบรรทัดจากไฟล์จริงได้ (src= lines=) โดยจะไม่ยอมอ่านไฟล์นอกโฟลเดอร์และไฟล์ที่มีคีย์
• ตอบกลับบนหน้าได้ — คอมเมนต์ที่ panel ไหนก็ได้ เลือกตัวเลือกในส่วน ask แล้วกด Reply รวมเป็นข้อความเดียวกลับไป paste ให้เอเจนต์
• แก้พลาดเองได้ — ถ้า draft มี error CLI จะคืนเลขบรรทัด ชิ้นส่วนที่ผิด และตัวอย่างที่ถูกต้อง ให้เอเจนต์แก้รอบเดียว
• เช็กสไตล์ตาม ASD-STE100 — draft จะถูกเช็คประโยคยาว คำเยิ่นเย้อ passive voice แบบ ASD-STE100 แต่เตือนเฉยๆ เว้นแต่ขอ strict mode
• Explainer videos ได้ด้วย — ขอแบบ 3Blue1Brown ว่า "make a 3b1b-style video on the TCP handshake" แล้ว am video ทำเป็น player page มี narration อยู่ในหน้าเลยเล่นออฟไลน์ มี chapter strip ปุ่มปรับความเร็ว และปุ่ม export เข้ารหัสวิดีโอในเบราว์เซอร์เป็นไฟล์ (ไม่ต้องมี ffmpeg ถ้าเอา WebM) ผลทดสอบเล็กๆ ระบุ output tokens น้อยลงราว 18 เท่า และเร็วขึ้น 12 เท่า
• มีหลายภาษา — จีนตัวย่อ จีนตัวเต็ม อังกฤษ และญี่ปุ่น มีปุ่มและฟอนต์ของตัวเอง ภาษาอื่นใช้ปุ่มภาษาอังกฤษได้
• ตั้งค่าผ่าน slash command — /answer-me-with-html:config ใน Claude Code, am config ในเทอร์มินัลเลือกได้ open, theme, mode, style, update_check, voice ไม่ต้องแก้ config file เอง
• Always-on mode (ที่เจ้าของแนะนำ) — เปิดแล้วทุกคำตอบที่มีข้อสรุป แผน หรือการเทียบจะมีหน้าเล็ก 2-4 panels แนบมา แต่ไม่เปิดหน้าต่างเอง ไม่กวนการคุย ปิดเป็นค่าเริ่มต้น และ Claude Code จะไม่สร้างหน้าใน plan mode

เหมาะกับใคร

• คนที่เจอปัญหา "AI ตอบยาวจนอ่านไม่ทัน" และอยากได้คำตอบเป็นหน้าที่มีโครงสร้าง อยากสแกนก่อน
• คนที่ชอบไดอะแกรม sequence/flow/ER/tree, ตารางเทียบ, timeline และโค้ดจริงจากไฟล์ใน repo ตัวเอง
• ผู้ใช้ Claude Code, Codex, Cursor, OpenCode หรือ agent อื่นที่รัน shell command ได้ — installer รองรับมากกว่า 70 agents
• คนที่เขียนสรุปงาน เขียนรายงาน หรือทำเอกสารส่งต่อ เพราะได้ไฟล์ HTML ไฟล์เดียวเปิดออฟไลน์ ไม่พึ่ง CDN เลย

เริ่มต้นใช้งาน

ต้องมี Node.js 20 ขึ้นไป และไม่มีขั้นตอน npm install เพราะ CLI ถูกรวมมาใน skill แล้ว

วิธีที่เจ้าของแนะนำคือให้เอเจนต์ติดตั้งเอง วางข้อความนี้ใน Claude Code, Codex, Cursor, OpenCode หรือ agent อื่น:

Install Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.

ถ้าเอเจนต์เปิดลิงก์ไม่ได้ ใช้:

npx -y skills add QingYunA/answer-me-with-html -g -y -a <your agent name>

(สำหรับ Claude Code ใส่ -a claude-code)

ถ้าใช้ Claude Code แบบ plugin รันสองบรรทัดนี้ใน Claude Code:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

หรือคำสั่งเดียว:

npx skills add QingYunA/answer-me-with-html

ติดตั้งเสร็จไม่ต้องตั้งค่าอะไรเพิ่ม ถามได้เลยแบบนี้:

> Explain the TCP three-way handshake
> Map out how the modules in this repo fit together
> Redis or Memcached for our cache?

หน้าที่ได้จะถูกบันทึกไว้ที่ ~/.answer-me-with-html/pages/ ล้างด้วย am clean เจ้าของแนะนำให้เปิด always-on mode ด้วย โดยให้เอเจนต์เขียนกฎลง rules file (~/.claude/CLAUDE.md หรือ AGENTS.md) โดยใช้ข้อความนี้:

Turn on always-on mode for Answer me with HTML: add a global rule — "[answer-me-with-html always-on] Whenever a reply gives a conclusion, summary, plan, comparison, review or explanation, even a short one, also make a page with the answer-me-with-html skill (2 to 4 panels for routine answers), render it with --no-open before you write the reply, and end the reply with a file:// link to the page. Skip casual chat, one- or two-sentence replies with no conclusion, pure command output, and requests for plain text."

ปิดเมื่อไหร่ก็ลบกฎนั้นทิ้ง

ข้อควรรู้

• สถานะโปรเจกต์: MIT License (ใช้งานเชิงพาณิชย์ได้ตามเงื่อนไขของ MIT) เขียนด้วย JavaScript มี 4 open issues และยังไม่ถูก archive
• ความสด: สร้างเมื่อ 2 ต.ค. 2026 และ push ล่าสุด 10 ต.ค. 2026 คือใหม่มาก ยังไม่ถึงสองสัปดาห์ ตอนข้อมูลชุดนี้ ตัวเลขทั้งหมด (ประมาณ 2.6k stars, 178 forks) เป็นข้อมูล ณ 10 ต.ค. 2026
• ตัวเลขเป็นของเจ้าของ repo วัดเอง: benchmark token/time และตัวเลขของ explainer video มาจากการทดสอบของผู้พัฒนาเอง โดยเฉพาะเรื่อง video เขียนกำกับไว้ว่าเป็น "a small test" อยากเทียบกับงานของตัวเอง ควรรัน node bench/corpus.mjs เอง
• ประหยัดเงินไม่ได้ 8 เท่า: เจ้าของเขียนไว้เองว่าค่าใช้จ่ายลดลงราว 15% ในเทสต์นั้น เพราะทุก turn ยังต้องอ่าน system prompt คำถาม และบทสนทนาอยู่ดี ไม่ว่าจะใช้ skill หรือไม่ จุดขายหลักคือความเร็วและขนาดที่โมเดลต้องเขียน ไม่ใช่เงิน
• ต้องมี agent ที่รัน shell command ได้ เพราะหน้า HTML สร้างจาก CLI ที่มากับ skill
• อัปเดตด้วยมือ agent จะเช็กเวอร์ชันใหม่จาก GitHub สัปดาห์ละครั้งแล้วแจ้ง และไม่มีอะไรถูกส่งกลับไปหาเจ้าของ repo บอกเอเจนต์ว่า "update answer-me-with-html" ได้
• ตัดสินใจเองว่าควรทำหน้าไหม ผลคือคำถามที่คาดไม่ถึงอาจได้แค่ข้อความ ไม่ใช่ทุกคำถามจะมีหน้า
• ข้อมูลผู้ใช้บางส่วนอยู่ในเครื่องคุณเอง: ไฟล์หน้าเก็บที่ ~/.answer-me-with-html/pages/ และตัวหน้าเอง embed Markdown ต้นฉบับไว้ในไฟล์ ถ้าจะแชร์ต่อควรรู้ไว้
• เว็บไซต์ประกอบ: https://answer-me-with-html.com/ มีเอกสาร reference, วิดีโอตัวอย่าง และหน้าเทียบกับ Archify/GenUI

🔗 https://github.com/QingYunA/answer-me-with-html

ข้อมูลจาก GitHub ณ 10 ต.ค. 2026: ⭐ 2,598 | ภาษา JavaScript | license MIT