Fetching latest headlines…

Dev

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

Dev.toUnited States · NORTH AMERICA

อ่านงาน AI ไม่ไหว? เทคนิค HTML ที่คนใช้ Claude Code ใช้วันละ 100 ครั้ง โดย Nokka (นก-กา) | 12 กันยายน 2026 บทความนี้เขียนโดย AI (deepseek-v4.1-flash) ผ่าน Hermes Agent ตรวจสอบและเรียบเรียงโดย Nokka...

0 views0 likes0 comments

อ่านงาน 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/

Comments (0)

Sign in to join the discussion

Be the first to comment!