การใช้ Claude Code: ประสิทธิภาพอันเหลือเชื่อของ HTML

Markdown กลายเป็นรูปแบบไฟล์หลักที่เอเจนต์ใช้สื่อสารกับเราไปแล้ว มันเรียบง่าย พกพาสะดวก มีความสามารถในการจัดรูปแบบข้อความบ้าง และคุณแก้ไขได้ง่าย Claude ยังเก่งขึ้นอย่างน่าประหลาดใจในการใช้ ASCII เพื่อสร้างไดอะแกรมภายในไฟล์ markdown

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

อีกอย่างคือ ผมไม่ได้แก้ไขไฟล์เหล่านี้ด้วยตัวเองอีกต่อไปแล้ว แต่ใช้มันเป็นสเปก ไฟล์อ้างอิง ผลลัพธ์จากการระดมสมอง ฯลฯ เมื่อผมแก้ไขจริงๆ ผมมักจะให้ Claude แก้ไขให้ ซึ่งนั่นก็เอาข้อดีที่ใหญ่ที่สุดอย่างหนึ่งของ markdown ออกไป

ผมเริ่มชอบ HTML เป็นรูปแบบเอาต์พุตแทน Markdown และเริ่มเห็นคนอื่นๆ ในทีม Claude Code ใช้แบบนี้มากขึ้น นี่คือสาเหตุ

(ถ้าคุณอยากเริ่มดูตัวอย่าง คุณสามารถดูได้ที่นี่: https://thariqs.github.io/html-effectiveness แต่กลับมาอ่านต่อว่าทำไมนะ)

ทำไมถึงเป็น HTML?

ความหนาแน่นของข้อมูล

HTML สามารถสื่อข้อมูลที่สมบูรณ์กว่า markdown ได้มาก แน่นอนว่ามันสามารถทำโครงสร้างเอกสารพื้นฐานอย่างหัวข้อและการจัดรูปแบบได้ แต่ยังสามารถแสดงข้อมูลประเภทอื่นๆ ได้อีกมากมาย เช่น:

• ข้อมูลแบบตารางโดยใช้ตาราง
• ข้อมูลการออกแบบด้วย CSS
• ภาพประกอบด้วย SVG
• โค้ดตัวอย่างด้วยแท็ก script
• การโต้ตอบโดยใช้องค์ประกอบ HTML ร่วมกับ javascript + CSS
• เวิร์กโฟลว์โดยใช้ SVG และ HTML
• ข้อมูลเชิงพื้นที่โดยใช้ตำแหน่งสัมบูรณ์และ canvas
• รูปภาพโดยใช้แท็ก image

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

ผมพบว่าเมื่อไม่สามารถทำแบบนี้ได้ โมเดลอาจทำสิ่งที่มีประสิทธิภาพน้อยกว่าใน markdown เช่น ไดอะแกรม ASCII หรือที่ผมชอบคือ การประมาณสีด้วยอักขระ unicode ดังในภาพหน้าจอจาก Claude Code นี้

Claude Code พยายามแสดงสีใน markdown

ความชัดเจนทางภาพและความง่ายในการอ่าน

เมื่อ Claude สามารถทำงานที่ซับซ้อนขึ้นได้ มันก็เขียนสเปกและแผนที่ใหญ่ขึ้นเรื่อยๆ เช่นกัน ในทางปฏิบัติ ผมพบว่าผมมักจะไม่ได้อ่านไฟล์ markdown ที่มีความยาวเกิน 100 บรรทัดจริงๆ และแน่นอนว่าผมไม่สามารถให้คนอื่นในองค์กรอ่านมันได้

แต่เอกสาร HTML อ่านง่ายกว่ามาก Claude สามารถจัดโครงสร้างด้วยภาพให้เหมาะกับการนำทางด้วยแท็บ ภาพประกอบ ลิงก์ ฯลฯ มันยังปรับให้เข้ากับมือถือได้ด้วย คุณจึงอ่านมันแตกต่างกันไปตามรูปแบบอุปกรณ์ของคุณ

ความง่ายในการแชร์

ไฟล์ Markdown ค่อนข้างแชร์ยาก เพราะเบราว์เซอร์ส่วนใหญ่ไม่แสดงผลได้ดีนัก คุณมักต้องแนบไปกับอีเมลหรือข้อความ

ด้วย HTML ตราบใดที่คุณอัปโหลดไฟล์ (เช่น ไปยัง S3) คุณก็สามารถแชร์ลิงก์ได้ง่ายๆ เพื่อนร่วมงานของคุณสามารถเปิดได้ทุกที่ที่ต้องการและอ้างอิงได้ง่าย

โอกาสที่ใครสักคนจะอ่านสเปก รายงาน หรือบทสรุป PR ของคุณจริงๆ นั้นสูงกว่ามากถ้ามันเป็น HTML

การโต้ตอบสองทาง

HTML ช่วยให้คุณโต้ตอบกับเอกสารได้ เช่น คุณอาจขอให้มันเพิ่มแถบเลื่อนหรือปุ่มปรับเพื่อปรับแต่งการออกแบบ หรือให้คุณปรับแต่งตัวเลือกต่างๆ ในอัลกอริทึมเพื่อดูผลลัพธ์ คุณยังสามารถขอให้มันให้คุณคัดลอกการเปลี่ยนแปลงเหล่านี้เป็น prompt เพื่อวางกลับเข้าไปใน Claude Code

อ่านเพิ่มเติมเกี่ยวกับโพสต์ playgrounds ของผมเพื่อดูตัวอย่างการโต้ตอบสองทางนี้: https://x.com/trq212/status/2017024445244924382

การนำเข้าข้อมูล

ทำไมต้องใช้ Claude Code เพื่อสร้างไฟล์ HTML แทนที่จะใช้ ClaudeAI หรือ Claude Design เป็นต้น? เหตุผลที่ใหญ่ที่สุดประการหนึ่งคือบริบททั้งหมดที่ Claude Code สามารถนำเข้าได้

ตัวอย่างเช่น ตอนเขียนบทความนี้ ผมขอให้ Claude Code อ่านโฟลเดอร์โค้ดของผมและค้นหาไฟล์ HTML ทั้งหมดที่ผมสร้างไว้ จัดกลุ่มและจัดหมวดหมู่ แล้วสร้างไฟล์ HTML ที่มีไดอะแกรมทั้งหมดแทนแต่ละประเภท ไดอะแกรมที่คุณเห็นในบทความนี้เป็นผลโดยตรงจากสิ่งนั้น

นอกจากระบบไฟล์แล้ว Claude Code ยังสามารถค้นหาบริบทเพิ่มเติมโดยใช้ MCP ของคุณ (เช่น Slack, Linear ฯลฯ), เว็บเบราว์เซอร์ของคุณ (กับ Claude ใน Chrome), ประวัติ git ของคุณ ฯลฯ

มันสนุก

การสร้างเอกสาร HTML กับ Claude สนุกกว่าและทำให้ผมรู้สึกมีส่วนร่วมและทุ่มเทกับการสร้างสรรค์มากขึ้น และนั่นก็เพียงพอแล้ว

วิธีเริ่มต้น

ผมกลัวนิดหน่อยว่าคนจะอ่านบทความนี้แล้วเปลี่ยนมันเป็นทักษะ /html หรืออะไรทำนองนั้น แม้ว่ามันอาจมีประโยชน์บ้าง แต่ผมอยากเน้นว่าคุณไม่ต้องทำอะไรมากเพื่อให้ Claude ทำสิ่งนี้ คุณแค่ขอให้มัน "สร้างไฟล์ HTML" หรือ "สร้าง artifact HTML" ก็ได้

เคล็ดลับคือการรู้ว่าคุณต้องการให้ artifact ทำอะไรและคุณจะใช้มันอย่างไร เมื่อเวลาผ่านไปคุณอาจสร้างทักษะขึ้นมา แต่สำหรับตอนนี้ผมแนะนำให้ลอง prompt จากศูนย์เพื่อให้ชินกับการใช้งานในกรณีต่างๆ

กรณีการใช้งาน

เพื่อให้เป็นรูปธรรมมากขึ้น ผมได้สร้างไฟล์ HTML มากมายสำหรับกรณีการใช้งานต่างๆ คุณสามารถดูทั้งหมดได้ที่นี่: https://thariqs.github.io/html-effectiveness/ แต่ต่อไปนี้คือภาพรวม

สเปก การวางแผน และการสำรวจ

HTML เป็น canvas ที่สมบูรณ์สำหรับ Claude ในการเจาะลึกปัญหา เมื่อผมเริ่มทำงานกับปัญหา แทนที่จะเป็นแผน markdown ง่ายๆ ผมคาดว่าจะสร้างเว็บของไฟล์ HTML ตัวอย่างเช่น ผมอาจเริ่มด้วยการขอให้ Claude Code ระดมสมองและสร้างการสำรวจตัวเลือกต่างๆ จากนั้นผมจะขอให้มันขยายเพิ่มเติมในตัวเลือกใดตัวเลือกหนึ่ง อาจทำ mockup หรือโค้ดตัวอย่าง สุดท้ายเมื่อผมพอใจแล้ว ผมจะขอให้มันเขียนแผนการนำไปใช้ เมื่อผมพอใจกับแผนแล้ว ผมจะสร้างเซสชันใหม่และส่งไฟล์ทั้งหมดนี้ให้มันนำไปใช้

เมื่อตรวจสอบ ผมจะขอให้เอเจนต์ตรวจสอบอ่านไฟล์เหล่านี้ และมันจะมีบริบทที่กว้างขึ้นเกี่ยวกับสิ่งที่ต้องการ

ตัวอย่าง Prompt:

• ฉันไม่แน่ใจว่าจะใช้ทิศทางไหนกับหน้าต้อนรับ สร้างแนวทางที่แตกต่างกันอย่างชัดเจน 6 แนวทาง — เปลี่ยนรูปแบบเลย์เอาต์ โทน และความหนาแน่น — และจัดวางเป็นไฟล์ HTML เดียวในรูปแบบกริดเพื่อให้ฉันเปรียบเทียบเคียงข้างกัน ติดป้ายแต่ละอันด้วยข้อแลกเปลี่ยนที่มันทำ
• สร้างแผนการนำไปใช้อย่างละเอียดในไฟล์ HTML อย่าลืมทำ mockup บางอย่าง แสดงการไหลของข้อมูล และเพิ่มโค้ดตัวอย่างสำคัญที่ฉันอาจต้องการตรวจสอบ ทำให้อ่านและเข้าใจง่าย

กรณีการใช้งาน:

• สำรวจวิธีอื่นในการนำไปใช้ในโค้ด
• สำรวจการออกแบบภาพหลายแบบ

การตรวจสอบโค้ดและความเข้าใจ

โค้ดอ่านยากในไฟล์ Markdown แต่ด้วย HTML เราสามารถแสดง diffs, คำอธิบายประกอบ, ผังงาน, โมดูล ฯลฯ ใช้สิ่งนี้เพื่อทำความเข้าใจโค้ดที่เอเจนต์เขียน รับการตรวจสอบโค้ด หรืออธิบาย PR ให้คนที่ตรวจสอบโค้ดของคุณฟัง ผมพบว่าสิ่งนี้มักทำงานได้ดีกว่ามุมมอง diff ของ Github เริ่มต้น และตอนนี้ผมแนบไฟล์อธิบายโค้ด HTML ไปกับทุก PR ที่ผมทำ

ตัวอย่าง prompt:

ช่วยฉันตรวจสอบ PR นี้โดยสร้าง artifact HTML ที่อธิบายมัน ฉันไม่คุ้นเคยกับตรรกะ streaming/backpressure มากนัก ดังนั้นให้เน้นที่ส่วนนั้น แสดง diff จริงพร้อมคำอธิบายประกอบในระยะขอบ ระบายสีรหัสตามความรุนแรง และอะไรก็ตามที่จำเป็นเพื่อสื่อแนวคิดได้ดี

กรณีการใช้งาน:

• สร้าง PR
• ตรวจสอบ PR
• ทำความเข้าใจหัวข้อในโค้ด

การออกแบบและต้นแบบ

Claude Design ใช้ HTML เป็นพื้นฐาน เพราะ HTML แสดงออกทาง design ได้อย่างเหลือเชื่อ แม้ว่าพื้นผิวปลายทางของคุณจะไม่ใช่ HTML ก็ตาม Claude สามารถร่างการออกแบบใน HTML แล้วเขียนในภาษาที่คุณเลือก ไม่ว่าจะเป็น React, Swift ฯลฯ

คุณยังสามารถสร้างต้นแบบการโต้ตอบ เช่น แอนิเมชัน การกระทำ ฯลฯ ลองขอให้ Claude ทำแถบเลื่อน ปุ่มปรับ ฯลฯ เพื่อปรับแต่งสิ่งที่คุณต้องการได้อย่างแม่นยำ

ตัวอย่าง prompt:

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

ใช้สำหรับ:

• สร้าง artifacts ระบบการออกแบบ
• ปรับแต่งคอมโพเนนต์
• แสดงภาพไลบรารีคอมโพเนนต์
• สร้างต้นแบบแอนิเมชันที่สนุกสนาน

รายงาน การวิจัย และการเรียนรู้

Claude Code เก่งมากในการสังเคราะห์ข้อมูลจากหลายแหล่งและแปลงเป็นรายงานที่อ่านง่าย คุณสามารถ prompt ให้ Claude ค้นหา Slack, โค้ดเบส, ประวัติ git, อินเทอร์เน็ต ฯลฯ และใช้มันเพื่อสร้างรายงานที่อ่านง่ายอย่างยิ่งสำหรับตัวคุณเอง สำหรับผู้บริหาร สำหรับทีมของคุณ ฯลฯ

คุณสามารถประกอบสิ่งนี้ในรูปแบบของเอกสาร HTML ยาวๆ, คำอธิบายแบบโต้ตอบ หรือแม้แต่สไลด์โชว์/เด็ค ขอให้ Claude ใช้ SVG สำหรับไดอะแกรมเพื่อช่วยให้เห็นภาพ

ตัวอย่างเช่น สำหรับโพสต์ของผมเกี่ยวกับ prompt caching ผมขอให้ Claude เตรียมไฟล์วิจัยเชิงลึกใน HTML ให้ผมอ่านเกี่ยวกับการเปลี่ยนแปลงทั้งหมดของเราต่อ prompt caching หลังจากอ่านประวัติ git

ตัวอย่าง prompt:

ฉันไม่เข้าใจว่าตัวจำกัดอัตราของเราทำงานอย่างไรจริงๆ อ่านโค้ดที่เกี่ยวข้องและสร้างหน้า HTML อธิบายหน้าเดียว: ไดอะแกรมของการไหลของ token-bucket, โค้ดตัวอย่างสำคัญ 3–4 ชิ้นพร้อมคำอธิบายประกอบ และส่วน "ข้อควรระวัง" ที่ด้านล่าง ปรับให้เหมาะสมสำหรับคนที่อ่านครั้งเดียว

ใช้สำหรับ:

• สรุปว่าฟีเจอร์ทำงานอย่างไร
• อธิบายแนวคิดให้ฉันฟัง
• รายงานสถานะประจำสัปดาห์ถึงเจ้านายของคุณ
• รายงานเหตุการณ์ถึงผู้บริหารของคุณ
• ภาพประกอบ SVG, ผังงาน, ไดอะแกรมทางเทคนิค ฯลฯ

อินเทอร์เฟซการแก้ไขแบบกำหนดเอง

บางครั้งการอธิบายสิ่งที่คุณต้องการในกล่องข้อความล้วนๆ เป็นเรื่องยาก ในกรณีนี้ ผมจะขอให้ Claude สร้างตัวแก้ไขแบบใช้แล้วทิ้งสำหรับสิ่งที่ผมกำลังทำอยู่โดยเฉพาะ ไม่ใช่ผลิตภัณฑ์ หรือเครื่องมือที่ใช้ซ้ำได้ แต่เป็นไฟล์ HTML ไฟล์เดียว ที่สร้างขึ้นเพื่อข้อมูลชิ้นนี้โดยเฉพาะ

เคล็ดลับคือต้องลงท้ายด้วยการส่งออก: ปุ่ม "คัดลอกเป็น JSON" หรือ "คัดลอกเป็น prompt" ที่เปลี่ยนสิ่งที่คุณทำใน UI กลับเป็นสิ่งที่คุณสามารถวางใน Claude Code ได้

ตัวอย่าง prompts:

• ฉันต้องจัดลำดับความสำคัญของตั๋ว Linear 30 ใบนี้ใหม่ สร้างไฟล์ HTML ที่มีแต่ละตั๋วเป็นการ์ดที่ลากได้ในคอลัมน์ ตอนนี้ / ถัดไป / ทีหลัง / ตัด ทิ้ง จัดเรียงไว้ล่วงหน้าตามการเดาที่ดีที่สุดของคุณ เพิ่มปุ่ม "คัดลอกเป็น markdown" ที่ส่งออกการจัดลำดับสุดท้ายพร้อมเหตุผลหนึ่งบรรทัดต่อกลุ่ม
• นี่คือการกำหนดค่าฟีเจอร์ flag ของเรา สร้างตัวแก้ไขแบบฟอร์มสำหรับมัน จัดกลุ่ม flag ตามพื้นที่ แสดงการพึ่งพาระหว่างกัน เตือนฉันถ้าฉันเปิด flag ที่ prereq ของมันปิดอยู่ เพิ่มปุ่ม "คัดลอก diff" ที่ให้เฉพาะคีย์ที่เปลี่ยนแปลง
• ฉันกำลังปรับแต่ง system prompt นี้ สร้างตัวแก้ไขแบบเคียงข้างกัน: prompt ที่แก้ไขได้ทางซ้ายพร้อมช่องตัวแปรที่ไฮไลต์ ตัวอย่างอินพุตสามตัวอย่างทางขวาที่แสดงเทมเพลตที่เติมแล้วแบบสด เพิ่มตัวนับอักขระ/โทเค็นและปุ่มคัดลอก

ใช้สำหรับ:

• จัดลำดับใหม่ จัดหมวดหมู่ หรือจัดกลุ่มอะไรก็ได้ (ตั๋ว, กรณีทดสอบ, ข้อเสนอแนะ)
• แก้ไขโครงสร้าง config (ฟีเจอร์ flag, env vars, JSON/YAML ที่มีข้อจำกัด)
• ปรับแต่ง prompts, templates หรือ copy พร้อมพรีวิวสด
• จัดการชุดข้อมูล อนุมัติ/ปฏิเสธแถว ติดแท็กตัวอย่าง ส่งออกการเลือก
• ใส่คำอธิบายประกอบในเอกสาร บทถอดความ หรือ diff และส่งออกคำอธิบายประกอบ
• เลือกค่าที่แสดงเป็นข้อความได้ยาก: สี, เส้นโค้ง easing, พื้นที่ครอบ, ตาราง cron, regex

คำถามที่พบบ่อย

ผมบอกหลายคนเกี่ยวกับการเปลี่ยนมาใช้ HTML และเห็นคำถามซ้ำๆ สองสามข้อ

มันใช้โทเค็นน้อยกว่าไม่ใช่เหรอ?

แม้ว่า markdown มักจะใช้โทเค็นน้อยกว่า แต่ผมพบว่าความสามารถในการแสดงออกที่เพิ่มขึ้นของ HTML และโอกาสที่ผมจะอ่านมันสูงขึ้นมาก ทำให้ผมได้ผลลัพธ์โดยรวมที่ดีกว่า ด้วยหน้าต่างบริบท 1MM ใน Opus 4.7 การใช้โทเค็นที่เพิ่มขึ้นนั้นไม่สังเกตเห็นได้ชัดในหน้าต่างบริบท

ตอนนี้คุณใช้ markdown เมื่อไหร่?

พูดตามตรงผมเลิกใช้ markdown ไปเลยสำหรับเกือบทุกอย่าง แต่ผมคงอยู่ฝั่ง HTML แม็กซิมัลลิสต์มากเกินไป

ฉันจะดูไฟล์ HTML ได้อย่างไร?

ผมมักจะเปิดในเบราว์เซอร์ในเครื่อง (คุณสามารถขอให้ Claude เปิดให้) หรืออัปโหลดไปยัง S3 ถ้าคุณต้องการลิงก์ที่แชร์ได้

มันใช้เวลาสร้างนานกว่า markdown ไม่ใช่เหรอ?

มันใช้เวลานานกว่า! HTML อาจใช้เวลานานกว่า Markdown 2-4 เท่า แต่ผมพบว่าผลลัพธ์คุ้มค่า

แล้วการควบคุมเวอร์ชันล่ะ?

นี่เป็นหนึ่งในข้อเสียที่ใหญ่ที่สุดของ HTML จริงๆ HTML diffs มีสัญญาณรบกวนและตรวจสอบยากเมื่อเทียบกับ Markdown

ฉันจะให้ Claude ตรงกับรสนิยมของฉัน / ไม่ทำให้มันน่าเกลียดได้อย่างไร?

ปลั๊กอิน frontend design ช่วยให้ Claude สร้างไฟล์ HTML ที่ดี แต่เพื่อให้ตรงกับสไตล์ของบริษัทคุณ คุณสามารถสร้างไฟล์ระบบการออกแบบ HTML ไฟล์เดียวโดยให้ Claude ดูที่โค้ดเบสของคุณ จากนั้นคุณสามารถใช้ไฟล์ระบบการออกแบบนั้นเป็นข้อมูลอ้างอิงสำหรับไฟล์ HTML อื่นๆ

อยู่ในวงจร

ทั้งหมดที่กล่าวมาคือผมคิดว่าเหตุผลที่แท้จริงที่ผมใช้ HTML คือผมรู้สึกว่าอยู่ในวงจรกับ Claude มากขึ้น ผมเริ่มกลัวว่าเพราะผมหยุดอ่านแผนอย่างละเอียด ผมจะต้องปล่อยให้ Claude เลือกเอง

แต่ผมยินดีที่จะบอกว่าแทนที่จะเป็นอย่างนั้น ผมกลับรู้สึกอยู่ในวงจรมากกว่าที่เคยเมื่อใช้ HTML หวังว่าคุณจะรู้สึกเช่นนั้นเช่นกัน