ทันใดนั้น สามัญสำนึกของคุณจะพังทลายในวันนี้ จริงๆ แล้ว 99% ของคนยังคงใช้ Markdown กับ Claude Code อยู่ สิ่งที่คนวงในจากทีม Claude Code ของ Anthropic พูดคือ "หยุดเถอะ" เขาบอกว่า "การส่งออกเป็น HTML ดีกว่า Markdown อย่างล้นหลาม"
เพราะเมื่อผลลัพธ์ของ Claude Code ซับซ้อนขึ้น Markdown ก็อ่านยาก สื่อสารไม่ชัดเจน และแชร์ไม่ได้
ในทางกลับกัน ด้วย HTML:
- คุณสามารถวาดภาพประกอบได้
- คุณสามารถใช้สีเพื่อแยกแยะได้
- คุณสามารถจัดระเบียบด้วยแท็บได้
- คุณสามารถสร้างแถบเลื่อนและปุ่มได้
- คุณสามารถแชร์โดยตรงในเบราว์เซอร์ได้
กล่าวคือ เพื่อดึงคุณค่าที่แท้จริงของ Claude Code ออกมา ไม่ใช่แค่ "สิ่งที่คุณส่งออก" แต่ "รูปแบบที่คุณส่งออก" กลายเป็นสิ่งสำคัญอย่างยิ่ง
ฉันขอยืนยันเรื่องนี้
โซลูชันที่เหมาะสมที่สุดในยุคของ Claude Code ไม่ใช่แค่ Markdown แต่เป็น HTML-first
อันที่จริง ก่อนที่บทความนี้จะออกมา ClaudeCodeStudio ก็ใช้วิธีนี้อยู่แล้ว ทำให้มั่นใจได้ว่าสไลด์จะออกมาด้วยคุณภาพนี้ในครั้งเดียว 👇
ถ้าคุณอ่านบทความนี้จนจบ ฉันคิดว่าคุณจะเข้าใจว่าทำไมถึงเป็นไปได้ ดังนั้นโปรดอ่านด้วยนะ!
ว่าแต่ คุณเคยมีประสบการณ์แบบนี้ไหม?
- คุณให้ Claude Code เขียนแผน แต่หมดความสนใจหลังจากมันเกิน 100 บรรทัด
- คุณแชร์สเปก Markdown กับทีม แต่ไม่มีใครอ่านจนจบ
- คุณดูแผนภาพ ASCII art แล้วคิดว่า "...นี่มันอะไร?"
- คุณต้องการจัดระเบียบข้อมูลด้วยสีหรือเลย์เอาต์ แต่ไม่สามารถแสดงออกใน Markdown ได้
- คุณวางแผนใน Slack แต่มันถูกฝังเป็นไฟล์แนบ
ทั้งหมดนี้คือ "ปัญหาของรูปแบบผลลัพธ์"
บทความชื่อ "Using Claude Code: The Unreasonable Effectiveness of HTML" ที่เขียนโดย Thariq (@trq212) สมาชิกทีมพัฒนา Claude Code กำลังเป็นกระแสบน X มียอดวิวกว่า 11 ล้านครั้ง 😳
Thariq เป็นสมาชิกทีม Claude Code ที่ Anthropic และเป็นวิศวกรจาก YC W20 กล่าวคือ เป็นบทความที่คนที่ใช้ Claude Code ในแนวหน้าทุกวันประกาศว่า "ฉันเลิกใช้ Markdown แล้ว"
ครั้งนี้ ฉันจะอธิบายเนื้อหาให้เข้าใจง่าย รวมถึงตัวอย่าง prompt เฉพาะ 👇
โพสต์ต้นฉบับที่นี่: https://x.com/trq212/status/2052809885763747935
■ ปัญหาของ Markdown คืออะไร?
Markdown ถูกใช้เป็นเวลาหลายปีในการสื่อสารระหว่าง AI agent และมนุษย์ มันเรียบง่าย ใช้ได้ทุกที่ และสามารถเขียน rich text ได้ในระดับหนึ่ง แน่นอนว่า Claude Code ก็ส่งออกเป็น Markdown โดยค่าเริ่มต้น
แต่จริงๆ แล้ว มันฟังดูคุ้นๆ ไหม?
เมื่อ Claude Code สามารถจัดการงานที่ซับซ้อนมากขึ้น แผนและสเปกที่มันส่งออกก็ยาวขึ้น คุณอ่านไฟล์ Markdown ที่เกิน 100 บรรทัดจนจบจริงๆ หรือ?
Thariq เขียนในบทความว่า:
"ฉันพบว่ามันยากที่จะอ่านไฟล์ markdown ที่มีความยาวเกินร้อยบรรทัด"
ยิ่งไปกว่านั้น ทุกวันนี้ เรายังแก้ไขไฟล์ด้วยตัวเองน้อยลงด้วยซ้ำ เราใช้มันเป็นข้อมูลอ้างอิงสำหรับสเปกหรือเป็นผลลัพธ์สำหรับการระดมสมอง แม้กระทั่งตอนแก้ไข เราก็ขอให้ Claude "แก้ไขตรงนี้" กล่าวคือ ข้อได้เปรียบที่ใหญ่ที่สุดของ Markdown—ที่ว่า "มนุษย์แก้ไขด้วยมือได้ง่าย"—ไม่มีความหมายอีกต่อไป
นี่เป็นการพูดถึงปัญหาที่ผู้ใช้ Claude Code หลายคนรู้สึกโดยไม่รู้ตัวได้อย่างยอดเยี่ยม
■ ทำไมตัวเลือก HTML ถึง "มีประสิทธิภาพอย่างไม่มีเหตุผล"
สิ่งที่ Thariq เสนอคือการเปลี่ยนรูปแบบผลลัพธ์ของ Claude Code จาก Markdown เป็น HTML
คุณอาจคิดว่า "HTML ไม่ใช่สำหรับทำเว็บเพจเหรอ?" แต่พลังในการแสดงออกของ HTML นั้นเทียบไม่ได้กับ Markdown
มาดูกันว่าสามารถแสดงอะไรได้บ้างด้วย HTML:
- ข้อมูลที่มีโครงสร้างโดยใช้ตาราง
- การออกแบบและระบายสีโดยใช้ CSS
- ภาพประกอบและไดอะแกรมโดยใช้ SVG
- โค้ดสั้นๆ โดยใช้ script tags
- การโต้ตอบโดยใช้ JavaScript และ CSS
- ผังงานโดยรวม SVG และ HTML
- ข้อมูลเชิงพื้นที่โดยใช้ absolute positioning หรือ canvas
- การฝังรูปภาพโดยใช้ image tags
Thariq ยืนยันว่า:
"ฉันกล้าพูดได้เลยว่าแทบไม่มีชุดข้อมูลใดที่ Claude อ่านได้ ซึ่งคุณไม่สามารถแสดงด้วย HTML ได้อย่างมีประสิทธิภาพพอสมควร"
ใครที่เคยลองให้ Claude วาดไดอะแกรม ASCII หรือแสดงสีด้วยอักขระ Unicode จะเข้าใจน้ำหนักของคำเหล่านี้ คุณจะหลุดพ้นจากความไร้ประสิทธิภาพนั้น เหมือน "ขับ Ferrari ไปร้านสะดวกซื้อ"
■ ความหนาแน่นของข้อมูลแตกต่างกันอย่างล้นหลาม
จุดแข็งที่สุดของ HTML คือ "ความหนาแน่นของข้อมูล"
เมื่อเนื้อหาเดียวกันเขียนใน Markdown และ HTML HTML สามารถสื่อสารข้อมูลได้มากกว่ามากและอ่านง่ายกว่ามาก คุณสามารถสลับด้วยแท็บ ใช้สีแยกแยะ หรือฝังไดอะแกรม
แม้ว่าคุณจะไม่อยากอ่าน Markdown 100 บรรทัด แต่ข้อมูลปริมาณเท่ากันที่จัดระเบียบด้วยแท็บและสีใน HTML จะซึมเข้าหัวคุณทันที
นี่ไม่ใช่แค่ "เรื่องของรูปลักษณ์" สเปกที่ไม่มีใครอ่านก็เหมือนกับสเปกที่ไม่มีอยู่จริง การส่งออกในรูปแบบที่อ่านได้นั้นเชื่อมโยงโดยตรงกับคุณภาพของงานเอง
■ ความง่ายในการแชร์
เมื่อคุณพยายามแชร์ไฟล์ Markdown กับใครสักคน มักจะเป็นแบบนี้:
- แนบเป็นไฟล์ใน Slack → ไม่มีใครเปิด
- แนบในอีเมล → ไม่มีใครเปิด
- วางบน GitHub → คนที่ไม่ใช่วิศวกรเข้าไม่ได้
ด้วย HTML คุณแค่อัปโหลดไปยัง S3 แล้วส่งลิงก์ ใครก็ตามที่มีเบราว์เซอร์ก็อ่านได้ คุณยังทำให้มัน responsive เพื่อให้อ่านบนมือถือได้
ข้อความต้นฉบับของ Thariq:
"โอกาสที่ใครสักคนจะอ่านสเปก รายงาน หรือ PR writeup ของคุณจริงๆ นั้นสูงกว่ามากถ้ามันเป็น HTML"
นี่เป็นจุดที่ละเอียดอ่อนแต่สำคัญอย่างยิ่งในทางปฏิบัติ
■ การปฏิวัติของการโต้ตอบสองทาง
นี่คือจุดที่ HTML โดดเด่นอย่างแท้จริง
HTML ไม่ใช่แค่สิ่งที่ "อ่าน" ได้ มันสามารถใช้งานได้
ตัวอย่างเช่น การปรับแต่งดีไซน์อย่างละเอียด ถ้าคุณขอให้ Claude Code "สร้างไฟล์ HTML ที่มีแถบเลื่อน" มันจะส่งออกไฟล์ที่คุณสามารถปรับความเร็วของแอนิเมชัน easing และสีได้แบบเรียลไทม์ เมื่อคุณพบพารามิเตอร์ที่ชอบ คุณก็แค่กดปุ่ม "คัดลอก" แล้ววางกลับเข้าไปใน Claude Code
การโต้ตอบสองทางนี้ช่วยให้ปรับแต่งได้ในระดับความแม่นยำที่ prompt ข้อความเพียงอย่างเดียวไม่มีทางไปถึง
คุณหลุดพ้นจากความเครียดในการสื่อสาร "ไปทางขวาอีกนิด" "เร็วอีกหน่อย" หรือ "ไม่ใช่สีนี้" ด้วยคำพูด คุณแค่เลื่อนแถบเลื่อน
■ กรณีการใช้งานเฉพาะ (พร้อมตัวอย่าง prompt)
ในบทความ Thariq แนะนำรูปแบบการใช้ HTML พร้อมตัวอย่าง prompt เฉพาะ ซึ่งใช้งานได้จริงมากจนฉันจะแนะนำตามนั้นเลย
𝟭. การออกแบบ การวางแผน และการสำรวจ
เมื่อทำงานที่ซับซ้อนใน Claude Code แทนที่จะใช้แผน Markdown แผนเดียว ให้ใช้ไฟล์ HTML หลายไฟล์เพื่อ "โยนแหสำรวจ"
ตัวอย่าง prompt:
"ฉันตัดสินใจไม่ได้ว่าจะไปทางไหนกับหน้าจอ onboarding สร้างแนวทางที่แตกต่างกันโดยสิ้นเชิง 6 แนวทาง โดยเปลี่ยนเลย์เอาต์ โทน และความหนาแน่น แล้วจัดเรียงในตารางในไฟล์ HTML ไฟล์เดียวเพื่อให้ฉันเปรียบเทียบได้ เขียนข้อดีข้อเสียของแต่ละแนวทางบนป้ายกำกับ"
"สร้างแผนการดำเนินงานโดยละเอียดในไฟล์ HTML รวม mockups, data flows และโค้ดสั้นๆ ที่สำคัญเพื่อตรวจสอบ ทำให้อ่านง่ายและเข้าใจง่าย"
𝟮. การตรวจสอบโค้ดและความเข้าใจ
คุณสามารถสร้างการตรวจสอบโค้ดที่อ่านง่ายกว่าหน้าจอ diff ของ GitHub
ตัวอย่าง prompt:
"สร้าง artifact HTML เพื่อตรวจสอบ PR นี้ ฉันไม่คุ้นเคยกับตรรกะ streaming/backpressure ดังนั้นเน้นที่ส่วนนั้น แสดง diff จริงพร้อม margin annotations แบบอินไลน์ ระบายสีตามความสำคัญ"
Thariq เขียนว่า "ตอนนี้ ฉันแนบคำอธิบายโค้ดรูปแบบ HTML ไปกับทุก PR"
𝟯. การออกแบบและการทำต้นแบบ
เช่นเดียวกับที่รากฐานของ Claude Design คือ HTML HTML ก็ดีมากในการแสดงออกทางดีไซน์ แม้ว่าการใช้งานจริงจะใช้ React หรือ Swift เวิร์กโฟลว์ของการร่างใน HTML ก่อนแล้วค่อยเขียนใหม่ก็มีประสิทธิภาพ
ตัวอย่าง prompt:
"ฉันต้องการทำต้นแบบสำหรับปุ่ม checkout ใหม่ มันควรมีแอนิเมชันและเปลี่ยนเป็นสีม่วงเมื่อคลิก สร้างไฟล์ HTML ที่ฉันสามารถลองพารามิเตอร์แอนิเมชันแต่ละตัวด้วยแถบเลื่อนและตัวเลือก รวมปุ่มเพื่อคัดลอกพารามิเตอร์ที่ใช้ได้ดี"
𝟰. รายงาน การวิจัย และการเรียนรู้
Claude Code เก่งในการสังเคราะห์ข้อมูลจากหลายแหล่งข้อมูลและสรุปเป็นรายงานที่อ่านได้ คุณสามารถให้มันค้นหา Slack, codebase, git history และอินเทอร์เน็ตเพื่อสร้างรายงานสำหรับผู้บริหารหรือรายงานเหตุการณ์
ตัวอย่าง prompt:
"ฉันไม่เข้าใจว่า rate limiter ทำงานอย่างไร อ่านโค้ดที่เกี่ยวข้องและสร้างหน้า HTML อธิบายหนึ่งหน้า รวม token bucket flow diagram, โค้ดสั้นๆ ที่สำคัญ 3-4 ชิ้นพร้อมคำอธิบายประกอบ และสุดท้ายส่วน 'ข้อผิดพลาดที่พบบ่อย' ปรับให้เหมาะสมเพื่อให้ฉันเข้าใจได้ในการอ่านครั้งเดียว"
𝟱. อินเทอร์เฟซการแก้ไขแบบกำหนดเอง
นี่เป็นกรณีการใช้งานที่น่าตกใจที่สุดสำหรับฉันเป็นการส่วนตัว การตระหนักถึงการดำเนินการที่ยากจะสื่อสารในกล่องข้อความด้วยโปรแกรมแก้ไข HTML แบบใช้แล้วทิ้ง
ตัวอย่าง prompt:
"ฉันต้องการจัดลำดับความสำคัญของ Linear tickets 30 ตัวใหม่ สร้างไฟล์ HTML ที่แต่ละ ticket เป็นการ์ดที่ลากได้ และวางในสี่คอลัมน์: ตอนนี้ / ถัดไป / ทีหลัง / ตัดออก จัดเรียงตามการเดาของคุณในตอนแรก รวมปุ่ม 'คัดลอกเป็น Markdown' เพื่อส่งออกลำดับสุดท้ายพร้อมเหตุผลหนึ่งบรรทัดสำหรับแต่ละ bucket"
"ฉันกำลังปรับ system prompt นี้ สร้างโปรแกรมแก้ไขแบบ side-by-side ด้านซ้ายเป็น prompt ที่แก้ไขได้ (เน้นช่องตัวแปร) และด้านขวาเป็นตัวอย่าง input สามตัวอย่างเพื่อให้ template สะท้อนแบบเรียลไทม์ รวมตัวนับอักขระ/โทเค็นและปุ่มคัดลอก"
ไอเดียนี้เจ๋งมากไหม? การสร้าง UI ที่จำเป็นในทันที เฉพาะสำหรับงานนั้น ไม่จำเป็นต้องใช้ซ้ำ ไม่จำเป็นต้องสมบูรณ์แบบ แต่มันมีประสิทธิภาพมากกว่าการทำด้วยข้อความเพียงอย่างเดียวถึง 100 เท่า
■ คำตอบสำหรับคำถามทั่วไป
ในบทความ Thariq ยังตอบคำถามทั่วไปเกี่ยวกับ HTML
"มันไม่สิ้นเปลืองโทเค็นเหรอ?"
→ จริงที่มันใช้โทเค็นมากกว่า Markdown แต่เมื่อพิจารณาถึงพลังในการแสดงออกและ "ความน่าจะเป็นที่จะถูกอ่านจริงๆ" แล้ว มันมีประสิทธิภาพโดยรวม ด้วยบริบท 1 ล้านโทเค็นของ Opus 4.7 การเพิ่มขึ้นนั้นอยู่ในระดับที่ไม่สำคัญ
"มันใช้เวลาในการสร้างนานไหม?"
→ ใช้เวลานานกว่า Markdown 2-4 เท่า แต่ Thariq เองรู้สึกว่าผลลัพธ์นั้นคุ้มค่า
"แล้วเรื่อง version control ล่ะ?"
→ นี่เป็นข้อเสียจริงๆ HTML diffs มี noise มากกว่า Markdown และตรวจสอบได้ยากกว่า ปัจจุบันนี่เป็นหนึ่งในจุดอ่อนที่สุดของ HTML
"ดีไซน์ออกมาดูเชย?"
→ มันดีขึ้นถ้าคุณใช้ปลั๊กอิน frontend design ของ Claude Code ยิ่งไปกว่านั้น ถ้าคุณให้ Claude Code อ่าน codebase ของบริษัทคุณเพื่อสร้าง "ไฟล์ HTML ระบบดีไซน์" และใช้เป็นข้อมูลอ้างอิงหลังจากนั้น คุณก็สามารถรวมเข้ากับสไตล์ของบริษัทคุณได้
■ ทำไม HTML "ตอนนี้"?
เหตุผลที่บทความนี้โดนใจคือช่วงเวลา
ตอนนี้ Claude Code สามารถจัดการงานที่ซับซ้อนได้ ผลลัพธ์จึงยาวและหนาแน่น การรับมันใน Markdown ซึ่งเป็นรูปแบบที่เป็นแค่ "ข้อความที่มีลูกเล่นเล็กน้อย" กลายเป็นคอขวด
ข้อสรุปของ Thariq คือ:
"ฉันรู้สึกว่าอยู่ในวงรอบมากกว่าที่เคยเมื่อใช้ HTML"
แทนที่จะปล่อยให้ Claude Code ทำทุกอย่าง โดยการทำให้ผลลัพธ์เป็น HTML วงจรของ "ความเข้าใจของมนุษย์ การตัดสินใจ และการตอบกลับ" ก็หมุนไป นี่คือแก่นแท้ของการทำงานร่วมกับ AI
■ สรุปจุดปฏิบัติ
- ไม่ต้องใช้ทักษะหรือการตั้งค่าที่ยาก แค่บอก Claude Code ว่า "สร้างไฟล์ HTML"
- อย่าพยายามสร้างไฟล์ทักษะตั้งแต่เริ่มต้น ลองใช้ prompt ดิบๆ ก่อน
- เริ่มจาก "สิ่งที่คุณอยากให้คนอื่นอ่าน" เช่น แผน การตรวจสอบ รายงาน และต้นแบบ
- ผลลัพธ์จะเพิ่มเป็นสองเท่าเมื่อคุณคำนึงถึง "การโต้ตอบ" เช่น แถบเลื่อนและปุ่มคัดลอก
- เปิด HTML ที่สร้างขึ้นในเบราว์เซอร์หรืออัปโหลดไปยัง S3 เพื่อแชร์
Markdown ไม่ได้แย่ แต่ตอนนี้เมื่อผลลัพธ์ของ Claude Code ก้าวหน้าขึ้นขนาดนี้ ก็ถึงเวลาที่จะอัปเกรดรูปแบบของผู้รับเช่นกัน
ครั้งหน้าที่คุณให้ Claude Code สร้างแผน ลองเพิ่มหนึ่งบรรทัด: "ทำให้เป็น HTML" คุณจะประหลาดใจกับความแตกต่าง
สำหรับผู้ที่พบว่าบทความนี้มีประโยชน์แม้เพียงเล็กน้อย:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) คือ
บัญชีที่ดำเนินการโดยผู้ที่ชื่นชอบ Claude Code สามคน
เราโพสต์ทุกวันเกี่ยวกับการใช้งาน CLI เชิงปฏิบัติและระบบอัตโนมัติ
ปัจจุบันเรากำลังพัฒนา AI agent ร่วมกับบริษัทจดทะเบียน
โพสต์ปกติของเรา 👇
- กรณีการพัฒนาผลิตภัณฑ์จริงโดยใช้ Claude Code และ Claude
- การจัดระเบียบการใช้งาน Claude Code / Vibe Coding / แนวโน้มการพัฒนา
- ข้อมูลล่าสุดเกี่ยวกับ Claude Code จากต่างประเทศ
จากปรัชญาการพัฒนาไปจนถึงการออกแบบ การนำไปใช้ และการปรับปรุง
เราสรุปข้อมูลจากต่างประเทศและข้อมูลปฐมภูมิจนถึงจุดที่นำผลิตภัณฑ์ที่ใช้งานได้ออกสู่โลก ไม่ใช่แค่ "สร้างเสร็จ"
ถ้าสนใจ โปรดติดตามและลองดูนะ 👀 ฉันคิดว่ามันจะมีประโยชน์!
