DEV Community

Nokka
Nokka

Posted on

อ่านงาน AI ไม่ไหว? เทคนิค HTML ที่คนใช้ Claude Code ใช้วันละ 100 ครั้ง

อ่านงาน AI ไม่ไหว? เทคนิค HTML ที่คนใช้ Claude Code ใช้วันละ 100 ครั้ง

โดย Nokka (นก-กา) | 12 กันยายน 2026

บทความนี้เขียนโดย AI (deepseek-v4.1-flash) ผ่าน Hermes Agent ตรวจสอบและเรียบเรียงโดย Nokka

เอวินด์ เคจส์บัคเคน เขียนบทความนี้ลง Towards Data Science เมื่อวันที่ 10 กันยายน 2026 [1] เขาเขียนคอลัมน์เรื่อง coding agent สัปดาห์ละชิ้นมาอย่างต่อเนื่อง [3]

เขาเปิดด้วยปัญหาที่คนใช้ coding agent ทุกคนน่าจะเคยเจอ คืออ่านข้อมูลที่ agent พ่นออกมาในหน้าจอ terminal ไม่ไหว

ปัญหานี้ไม่ได้เล็กน้อย เพราะผลที่ตามมาคือเราอ่านไม่ครบ แล้วตัดสินใจจากข้อมูลที่ไม่ครบ

บทความของเขาตอบปัญหานี้ด้วยวิธีที่ตรงไปตรงมา และเขาใช้มันวันละประมาณ 100 ครั้ง

ปัญหาไม่ได้อยู่ที่ agent พ่นเยอะเกิน

เอวินด์อธิบายว่าปัญหามีสองชั้น ไม่ใช่ชั้นเดียว [1]

ชั้นแรกคือตำแหน่ง ข้อมูลสำคัญมักกระจายอยู่ทั่วบทสนทนา บางชิ้นอยู่กลาง บางชิ้นอยู่ท้าย และไม่มีสัญญาณบอกว่าอันไหนสำคัญ

เขาจึงแก้ด้วยคำสั่งง่าย ๆ คือให้ agent สรุปข้อมูลสำคัญไว้ท้ายบทสนทนาเสมอ

วิธีนี้ช่วยได้จริง แต่พอมันกลายเป็นนิสัย เขาก็เจอปัญหาชั้นที่สองทันที [1]

ชั้นที่สองคือรูปแบบ ข้อความล้วนอ่านยาก แม้จะอยู่ถูกที่แล้ว

เขาอธิบายเหตุผลไว้ตรง ๆ ว่าเวลาที่ agent ตอบในหน้าจอ terminal มันเขียนได้แค่ข้อความล้วน ขึ้นบรรทัดใหม่ได้ แต่ทำอย่างอื่นไม่ได้ [1]

และเขายกตัวอย่างที่ชัดที่สุดไว้ในบทความเอง คือให้ผู้อ่านสังเกตความต่างระหว่างบทความที่อ่านอยู่ตอนนี้ ซึ่งมีหัวข้อ มีคำเน้น มีการอ้างคำพูด เทียบกับข้อความล้วน ๆ ที่ไม่มีการจัดรูปแบบเลย [1]

วิธีแก้ที่เขาใช้อยู่จริง

ข้อเสนอหลักของบทความนี้คือให้ agent นำเสนอผลลัพธ์เป็นไฟล์ HTML แทนการพ่นข้อความในหน้าจอ [1]

เอวินด์บอกว่าเขาใช้วิธีนี้ประมาณ 90 ถึง 95 เปอร์เซ็นต์ของทุกครั้งที่ agent ต้องรายงานอะไร และอ่านแบบข้อความล้วนเฉพาะกรณีที่ง่ายมาก ๆ เท่านั้น [1]

เหตุผลที่ HTML ได้เปรียบคือมันแสดงผลได้หลากหลายกว่ามาก ทั้งหัวข้อ ตัวหนา ไฮไลต์ คำอ้าง และภาพประกอบ

จุดนี้สำคัญเพราะมันเปลี่ยนภาระการอ่านให้เบาลงจริง ไม่ได้แค่ทำให้สวยขึ้น [1]

เขาอธิบายกลไกไว้ชัดคือ การสื่อสารผ่านภาพทำให้สมองรับข้อมูลได้เร็วและใช้แรงน้อยกว่าการอ่านข้อความล้วน เพราะไม่ต้องประมวลผลคำทุกคำ [1]

คำสั่งที่เขาเขียนไว้ในไฟล์ตั้งค่า

วิธีทำให้ agent ทำแบบนี้ไม่ต้องเขียนคำสั่งใหม่ทุกครั้ง

เอวินด์แก้ไฟล์ Markdown ระดับผู้ใช้ ซึ่งจะถูกโหลดทุกครั้งไม่ว่าจะใช้ Claude Code หรือ Codex [1]

ข้อความที่เขาใส่ไว้ในไฟล์คือคำสั่งให้ agent นำเสนอข้อมูลท้ายบทสนทนาเสมอ และถ้าเป็นข้อมูลสำคัญที่ไม่ใช่เพียงการยืนยันงานง่าย ๆ ให้ทำเป็นไฟล์ HTML แล้วเปิดในเบราว์เซอร์ของเขา [1]

ส่วนตัวเบราว์เซอร์ที่เขาใช้ ชื่อ Superset เพราะมันแยกหน้าจอ ทำให้เห็น coding agent ด้านซ้าย และเห็น HTML ที่ agent สร้างด้านขวาพร้อมกัน [1]

ทักษะแยกตามสถานการณ์

นอกจากไฟล์ตั้งค่าหลัก เอวินด์ยังมีทักษะเฉพาะทางสำหรับสร้าง HTML ในสถานการณ์ต่างกัน [1]

ตัวอย่างที่เขาเล่าคือทักษะชื่อ test report ซึ่งสอน agent ว่าต้องทำอะไรบ้างเมื่อเขาต้องการตรวจงานที่ implement เสร็จแล้ว

ทักษะนี้สั่งไว้ให้แยกแต่ละงานออกจากกัน ใส่ลิงก์ตรงไปยังหน้าที่ต้องทดสอบ ใส่ขั้นตอนทดสอบทีละขั้น พร้อมอธิบายว่า agent ทำอะไรไปบ้าง [1]

จุดที่ผมคิดว่าน่าสนใจที่สุดคือ ให้ยกคำขอเดิมมาใส่แบบคำต่อคำ ไม่ว่าจะเป็นข้อความจาก Slack หรืองานจาก Linear เพื่อให้เห็นบริบทว่างานนั้นเริ่มจากอะไร [1]

การยกคำขอเดิมมาดูสำคัญกว่าที่คิด เพราะเวลาผ่านไปหลายชั่วโมง เรามักลืมว่าตอนแรกสั่งอะไรไป และจะตัดสินว่าผลลัพธ์ถูกหรือผิดจากความจำที่เลื่อนลอย

ส่วนที่ผมคิดว่ามีค่าที่สุด: แผนภาพ

อีกเรื่องที่เอวินด์เน้นคือการทำแผนภาพในไฟล์ HTML [1]

เครื่องมือที่เขาใช้ชื่อ Archify ซึ่งเป็นชุดทักษะสำหรับ agent ที่สร้างแผนภาพสถาปัตยกรรม ขั้นตอนการทำงาน ลำดับเหตุการณ์ และการไหลของข้อมูล เป็นไฟล์ HTML ที่มี SVG อยู่ข้างใน [2]

ตัว repository มีดาวบน GitHub ประมาณ 59,000 ดาว และมีผู้ fork ประมาณ 3,900 ครั้ง ณ วันที่ผมตรวจ [2]

ตัวอย่างการใช้งานที่เอวินด์ยกมาคือเวลาที่เขาต้องการเข้าใจว่าฟีเจอร์หนึ่งในแอปทำงานยังไง เช่นตอนผู้ใช้อัปโหลดเอกสาร แล้วระบบทำอะไรต่อ ทั้งการจำแนกประเภท การอ่านข้อความจากภาพ และการดึงข้อมูลออกมา [1]

แทนที่จะอ่านคำอธิบายยาว ๆ เขาให้ agent วาดเป็นแผนภาพ แล้วเห็นทั้งกระบวนการในภาพเดียว [1]

เขาบอกว่าเขาเคยลองเครื่องมือทำแผนภาพมาหลายตัว และตัวนี้เป็นหนึ่งในตัวที่ดีที่สุดเพราะให้ข้อมูลแน่นในภาพเดียว [1]

เทียบให้เห็นภาพ

หัวข้อ ตอบในหน้าจอ ตอบเป็น HTML
รูปแบบที่ทำได้ ข้อความล้วน หัวข้อ ตัวหนา ไฮไลต์ ภาพ
ความเร็วในการอ่าน ช้า ต้องประมวลผลทุกคำ เร็ว ใช้ภาพช่วย
ใส่แผนภาพได้ ไม่ได้ ได้
เบราว์เซอร์ช่วยอะไร ไม่มี เห็นคู่กับ agent ได้
เหมาะกับ งานง่าย ยืนยันสั้น ๆ ข้อมูลซับซ้อน หลายงาน

มุมมองจากคนที่อ่านงาน AI ทุกวัน

ผมพึ่งพา AI ทั้งเขียนบทความและทำงานเทคนิคทุกวัน และปัญหาที่เอวินด์อธิบายตรงกับที่ผมเจอ

ความต่างคือผมแก้ด้วยวิธีอื่น ผมใช้รายงานแบบข้อความล้วนแต่กำหนดโครงสร้างตายตัว เช่นให้สรุปเป็นข้อ ๆ และให้แยกส่วนที่ต้องตัดสินใจออกมาให้ชัด

วิธีของผมใช้ได้ผลระดับหนึ่ง แต่พออ่านบทความนี้ผมเห็นจุดที่ตัวเองพลาด

จุดนั้นคือผมยังต้องอ่านทุกคำอยู่ดี เพราะข้อความล้วนไม่มีอะไรช่วยให้ข้ามไปหาประเด็นได้ ทุกอย่างมีน้ำหนักเท่ากันหมดบนหน้าจอ

การเปลี่ยนเป็น HTML แก้ปัญหานี้ที่ต้นทาง เพราะลำดับความสำคัญถูกแสดงออกมาผ่านการจัดวาง ไม่ใช่ผ่านคำที่ต้องอ่าน

อีกเรื่องที่ผมคิดว่าน่าสนใจคือคำแนะนำเรื่องการยกคำขอเดิมมาใส่แบบคำต่อคำ ซึ่งผมทำอยู่แล้วในบทความของตัวเอง เพราะ Veritas ที่ตรวจงานผมจับจุดนี้ได้หลายครั้งว่าผมตีความโจทย์ผิดตั้งแต่ต้น

บทเรียนที่ผมได้จากบทความนี้คือ วิธีที่เราสื่อสารกับ AI มีผลกับคุณภาพงานมากพอ ๆ กับความสามารถของโมเดล และเป็นส่วนที่คนมักมองข้ามเพราะไปโฟกัสที่การเปลี่ยนโมเดลแรง ๆ

ข้อควรระวังก่อนนำไปใช้

หนึ่ง บทความนี้เป็นประสบการณ์ของคนคนเดียว ไม่ใช่ผลการทดลองที่มีกลุ่มควบคุม ตัวเลขอย่าง 90 ถึง 95 เปอร์เซ็นต์ หรือวันละ 100 ครั้ง เป็นการประมาณจากประสบการณ์ส่วนตัวของเขา ไม่ใช่ข้อมูลที่วัดอย่างเป็นระบบ [1]

สอง วิธีนี้เพิ่มภาระให้ agent เพราะต้องสร้างไฟล์และจัดรูปแบบทุกครั้ง งานง่าย ๆ ที่ตอบสั้น ๆ อาจเร็วกว่าถ้าอ่านตรง ๆ เอวินด์เองก็บอกว่าเขาอ่านแบบข้อความล้วนในกรณีที่ง่ายมาก ไม่ได้ใช้ HTML ตลอด [1]

สาม การให้ agent สร้าง HTML แล้วเปิดในเบราว์เซอร์มีประเด็นความปลอดภัย ถ้าไฟล์นั้นมีสคริปต์หรือโหลดเนื้อหาจากภายนอก ควรใช้เบราว์เซอร์แยกหรือตรวจไฟล์ก่อนเปิด โดยเฉพาะถ้าทำงานกับโค้ดที่มาจากแหล่งที่ไม่น่าเชื่อถือ

สี่ ดาวบน GitHub ไม่ได้บอกคุณภาพ Archify มี 59,000 ดาว ณ วันที่ผมตรวจ ซึ่งมากพอจะบอกว่าเป็นที่รู้จัก แต่ไม่ได้ยืนยันว่าเหมาะกับงานของคุณ ผมยังไม่ได้ทดลองใช้เอง และไม่แนะนำให้ตัดสินใจจากตัวเลขนี้ [2]

สรุป

ปัญหาเรื่องอ่านงาน AI ไม่ทัน เป็นปัญหาที่คนมักมองว่าเป็นเรื่องเล็ก แต่ผลของมันคือการตัดสินใจจากข้อมูลที่ไม่ครบ

บทความของเอวินด์เสนอวิธีที่ตรงไปตรงมาและทำได้ทันที คือเปลี่ยนรูปแบบการนำเสนอจากข้อความล้วนเป็น HTML และใช้แผนภาพช่วยสื่อสาร

ส่วนที่มีค่าที่สุดในบทความนี้ไม่ใช่ตัวเทคนิค แต่เป็นเหตุผลเบื้องหลัง

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

สำหรับคนที่ใช้ AI ทำงานทุกวัน คำถามที่ผมคิดว่าควรถามคือ ครั้งสุดท้ายที่คุณอ่านงานของ AI แล้วไม่เข้าใจ เพราะเนื้อหาไม่ดี หรือเพราะวิธีที่มันนำเสนอ

ถ้าคำตอบคืออย่างหลัง นั่นคือจุดที่ปรับได้ทันทีโดยไม่ต้องรอโมเดลใหม่

แหล่งอ้างอิง

[1] Kjosbakken, E., "How to 5x Your Communication Effectiveness with Claude Code", Towards Data Science (10 ก.ย. 2026), https://towardsdatascience.com/how-to-5x-your-communication-effectiveness-with-claude-code/

[2] tt-a1i, "Archify, Agent skill for architecture, workflow, sequence, data-flow, and lifecycle diagrams", GitHub (เข้าถึง 12 ก.ย. 2026), https://github.com/tt-a1i/archify

[3] Kjosbakken, E., หน้าโปรไฟล์ผู้เขียน Towards Data Science (เข้าถึง 12 ก.ย. 2026), https://towardsdatascience.com/author/oieivind/

Top comments (0)