รายการ How I AI ดำเนินรายการโดย Claire Vo ได้พูดคุยกับ Thariq Shihipar วิศวกรในทีม Claude Code ของ Anthropic ในงาน Code with Claude และเขาเสนอประเด็นที่กลายเป็นแกนหลักของทั้งตอนว่า "HTML is the new Markdown" หรือ HTML กำลังกลายเป็นรูปแบบใหม่ในการทำงานร่วมกับ AI agent แทนที่ Markdown ที่เคยเป็นมาตรฐาน เหตุผลตามที่ Thariq อธิบายในคลิปคือ ช่วงที่โมเดลอย่าง Opus 4 และ Claude 3.5 ยังรันงานสั้น ไฟล์ plan แบบ Markdown ยาวราว 50 บรรทัด คนยังนั่งอ่านและแก้เองได้ทัน แต่เมื่อ agent รุ่นใหม่อย่าง Opus 4.5 และ 4.7 รันงานต่อเนื่องเป็นชั่วโมง ไฟล์ plan ก็ยาวขึ้นจนแตะหลักพันบรรทัด เขายอมรับตรง ๆ ว่าตัวเองเลิกอ่านมันไปแล้ว และมองว่านี่คือความผิดพลาด เพราะคนยังจำเป็นต้องอยู่ในลูปและเข้าใจว่า agent กำลังทำอะไรอยู่ ทางออกที่ทีม Claude Code เริ่มใช้กันเองคือเปลี่ยนมาเขียน plan และ spec เป็นไฟล์ HTML ที่อ่านง่ายและโต้ตอบได้ บทความนี้จึงสรุปแนวคิดและ workflow ที่ Thariq สาธิตในคลิปทั้งหมด

1. ทำไม Markdown ถึงไม่พอ เมื่อ agent รันงานยาวขึ้น

ตามที่ Thariq เล่าในคลิปของ How I AI ปัญหาไม่ได้อยู่ที่โมเดลอ่าน Markdown ไม่ออก เพราะโมเดลอ่านโค้ดทุกรูปแบบได้สบาย ปัญหาอยู่ที่ฝั่งคนต่างหาก เมื่อ plan ยาวเป็นพันบรรทัด คนจะเริ่มกวาดสายตาผ่าน ๆ แล้วคิดในใจว่าเดี๋ยวมันก็คงโอเค ทำให้คุณภาพของงานโดยรวมตกลง เขาตั้งกฎง่าย ๆ ให้ตัวเองข้อหนึ่งว่า จะไม่อ่าน output ที่ยาวเกินหนึ่งหน้าจอของ Claude Code เพราะถ้า agent ให้ไอเดียมา 8 ข้อในรูปแบบข้อความยาว เขาก็จะไม่ได้เห็นครบทุกข้ออยู่ดี

จุดแข็งของ HTML ที่ Thariq ชี้คือ มันเป็นสื่อกลางการสื่อสารระหว่างคนกับ Claude ที่รวยข้อมูลกว่า ไฟล์ HTML scroll ดูง่ายกว่า ใส่ข้อมูลได้มากกว่า และเมื่อ agent ต้องอธิบายหน้าตาของฟีเจอร์ มันก็วาด mockup ที่ดูได้จริง แทนที่จะพยายามวาดกล่องด้วยตัวอักษร ASCII แบบฝืน ๆ ส่วนฝั่งโมเดลนั้น เขายืนยันว่า Claude ยังเขียน HTML ได้ดีมากและมี context ให้ใช้มากขึ้น จึงยอมจ่าย token เพิ่มเพื่อให้ได้ผลลัพธ์ที่คนเข้าถึงได้ง่ายขึ้น Claire Vo สรุปประเด็นนี้ในคลิปว่า HTML ไม่ได้ทำให้ agent อ่านง่ายขึ้นหรือยากขึ้น แต่ทำให้คนมีส่วนร่วมกับ spec มากขึ้น จนยกระดับคุณภาพงานปลายทาง

comparison — เปรียบเทียบ Markdown plan แบบเดิม (กล่องข้อความยาวหลายพันบรรทัด คนกวาดตาผ่าน เลิกอ่าน) กับ HTML plan แบบใหม่ (scroll ได้ มี mockup โค้ด ภาพประกอบ คนอ่านจริง) แบ่งครึ่งซ้าย-ขวา

2. คนกลายเป็น "compute allocator" ฉะนั้น spec และ plan จึงสำคัญกว่าเดิม

ก่อนเข้าสู่ workflow Claire Vo ขอให้ Thariq ยืนยันประเด็นสำคัญว่า plan, PRD และ spec ยังจำเป็นไหม แม้โมเดลจะฉลาดขึ้นเรื่อย ๆ Thariq ตอบว่าจำเป็น 100% และมองว่าจะเป็นเช่นนี้ตลอดไป โดยอธิบายด้วยตรรกะเรื่องต้นทุนว่า เมื่อพูดว่า Claude รันงานได้ 8 ชั่วโมง ความหมายจริง ๆ คือ Claude ใช้เงินไปราว 500 ดอลลาร์ ทุกคนจึงกำลังกลายเป็น "compute allocator" หรือผู้จัดสรรกำลังประมวลผล หน้าที่ของคนคือ ต้องตัดสินใจว่าอะไรคุ้มค่าที่จะลงแรงประมวลผล และการตัดสินใจนั้นเกิดขึ้นในขั้นตอน spec และ planning เป็นหลัก

Claire Vo ต่อยอดประเด็นนี้ด้วยมุมที่เธอเคยพูดว่า product management ตายแล้ว แล้วอะไรคือสิ่งต่อไป คำตอบที่ทั้งสองเห็นตรงกันในคลิปคือ งานยังเป็นงานเดิม นั่นคือการเขียนเอกสารเพื่อตัดสินใจว่าจะให้สิ่งอื่นทำงานในรูปแบบไหน เพียงแต่ชื่อเรียกเปลี่ยนเป็น compute allocator Thariq เสริมว่าหัวใจของยุคนี้คือการ "เข้าจังหวะ" กับ Claude เพื่อดูว่ามันกำลังสร้างอะไร บางครั้งคนเองก็ยังไม่รู้ว่าตัวเองต้องการอะไร จึงต้องดึงสิ่งนั้นออกมาผ่านการคุยกับ Claude และค้นหา unknown unknowns ที่ยังมองไม่เห็น

Note: ตรรกะที่ Thariq ใช้ในคลิปคือ "Claude รัน 8 ชั่วโมง" เท่ากับ "Claude ใช้เงิน 500 ดอลลาร์" มูลค่าจึงไม่ได้อยู่ที่การพิมพ์ prompt แต่อยู่ที่การตัดสินใจว่าจะจัดสรรกำลังประมวลผลที่มีต้นทุนจริงไปกับงานชิ้นไหน

3. Workflow จริงจากคลิป: brainstorm-in-HTML ถึง plan-in-HTML

Thariq สาธิต workflow จริงในคลิปโดยเริ่มจากการคุยกับ Claude เหมือนคุยกับคน เขาบอกว่าตัวเองชอบเริ่มด้วยการ brainstorm และ prompt ที่ใช้ก็เรียบง่ายมาก คือบอกว่ากำลังจะไปออกรายการของ Claire อยากทำ demo จึงขอให้ช่วย brainstorm ไอเดียลงในไฟล์ HTML ผลที่ได้คือ visual demo 8 ไอเดียพร้อม mockup เล็ก ๆ ประกอบแต่ละข้อ เช่น whiteboard sketch to working UI และ CSV to interactive dashboards ซึ่งเป็นไอเดียที่เขาเลือกในที่สุด จุดที่ Thariq เน้นในคลิปคือ HTML ทำให้เขา scroll ดูครบทั้ง 8 ข้อจริง ๆ ต่างจากข้อความยาวที่มักดูไม่ครบ และ diagram ประกอบก็ทำให้เห็นภาพว่าแต่ละไอเดียจะออกมาเป็นอย่างไร

ขั้นถัดมา Thariq ขอให้ Claude สัมภาษณ์เขาเกี่ยวกับไอเดียที่เลือก เพื่อขุด unknown unknowns ออกมาเหมือนการทำ spec และ PRD จากนั้นจึงสั่งให้สร้างไฟล์ HTML เป็น plan ที่ช่วยให้เห็นภาพว่าแผนการ implement เป็นอย่างไร โดยให้ใส่ excerpt, mockup และโค้ดเท่าที่จำเป็นเพื่อให้ context มากที่สุด ผลคือไฟล์ HTML ที่มีทั้งโครงสร้างไฟล์ ตัวอย่าง skill.md mood board คอมโพเนนต์ตัวอย่าง logic และ template ซึ่ง Thariq บอกว่านี่คือ plan ที่เขาจะอ่านจริง ประเด็นที่ Claire Vo ย้ำในคลิปคือ prompt ที่ใช้นั้นเรียบง่ายมาก ไม่ต้องเครียดว่าจะใส่อะไรลงไปบ้าง แค่ระบุว่าต้องการอะไรแล้วปล่อยให้โมเดลทำงานก็ได้คุณภาพสูง Thariq เสริมว่าหลักการ prompt คือให้ข้อมูลพอที่จะได้สิ่งที่ต้องการ แต่ไม่ over-constrain Claude และมักลงท้าย prompt ด้วยการเปิดช่องว่าง "เท่าที่จำเป็นเพื่อให้ context มากที่สุด" เพื่อบอก Claude ว่าไว้ใจให้ตัดสินใจเอง

flowchart — 5 ขั้นตอน workflow ของ Thariq: brainstorm ใน HTML → เลือก 1 ไอเดีย → ให้ Claude สัมภาษณ์ขุด unknown unknowns → สั่งสร้าง plan เป็น HTML ที่มี mockup/โค้ด/excerpt → ใช้ HTML เป็น artifact ส่งให้ agent implement

4. Micro software: สร้าง UI ใช้แล้วทิ้งเพื่อแก้ spec ทีละโมดูล

ส่วนที่ Claire Vo บอกว่าคนดูอาจมองข้ามไป คือเทคนิคที่ Thariq เรียกว่า micro software ในคลิปเขาเล่าว่า plan HTML มีตารางกฎการ render และ visualization ตามชนิดข้อมูลใน CSV แต่เขาไม่ชอบกฎชุดนั้น แทนที่จะกลับไปแก้กันไปมาใน terminal เขา prompt ให้ Claude สร้าง HTML artifact ที่แก้ไขได้ เป็น custom UI ที่มีโครงสร้างแต่ยังยืดหยุ่น โดยให้ Claude ออกแบบ interface ที่เหมาะที่สุดสำหรับปัญหานี้เอง ผลที่ได้คือหน้าจอเฉพาะตัวที่แก้ field ซ่อน คัดลอก หรือเพิ่ม field ใหม่ได้ และมีปุ่ม copy กลับออกมาเป็น Markdown เพื่อ paste กลับเข้า output

Claire Vo สรุปสิ่งที่เกิดขึ้นในคลิปว่า นี่ไม่ใช่แค่ personal software แต่เป็น micro software ซ้อนบน micro software คือสร้าง plan ที่ปรับแต่งเฉพาะตัว แล้วซูมเข้าไปที่โมดูลหนึ่งในนั้นด้วย UI เฉพาะที่ใช้แล้วทิ้ง เพื่อดึงคนเข้าไปมีส่วนร่วมกับเนื้อหาจนได้คุณภาพสูงขึ้น Thariq ยืนยันว่าตอนนี้เขาสร้างงานแบบนี้จริง ๆ และเสริมว่า token ที่เขาผลิตแล้วกลายเป็นโค้ด production จริงนั้นมีน้อยมาก อาจราว 1% แต่ token ส่วนใหญ่ใช้ไปกับ dashboard และ interface เฉพาะตัวเหล่านี้ เพื่อทำความเข้าใจว่าตัวเองต้องการอะไร นอกจากนี้ Thariq ยังเล่าว่า HTML ช่วยเรื่องการ verify ด้วย เพราะสามารถให้ verification agent ตรวจว่าสิ่งที่ตั้งใจไว้ตรงกับ output ที่ออกมาจริงหรือไม่ และเชื่อมโยงกับแนวคิด type interface กับ test criteria ที่เขามองว่าเป็นสองหมุดหัวท้ายของ spec ที่ดี

5. Living design system และการทำงานข้ามทีมด้วย HTML

ในช่วงท้าย Thariq แสดงตัวอย่างที่เขาชอบที่สุดในคลิป คือ living design system ซึ่งเป็นไฟล์ HTML ไฟล์เดียวที่เก็บสี typography spacing radius และ core component ของ design system ไว้ วิธีใช้คือชี้ Claude ไปที่โฟลเดอร์ของ project แล้วสั่งให้หา design system สร้างเป็น HTML artifact แล้วส่งต่อไปได้เลย ไฟล์นี้ทำหน้าที่เหมือนความเข้าใจ design system แบบบีบอัดที่ส่งต่อข้าม project ได้ Thariq เปรียบเทียบในคลิปว่า design.md ตายแล้ว ขอให้ design.html จงเจริญ ส่วน Claire Vo เสริมเวอร์ชันขั้นสูงของเธอว่าทำถึงระดับ component แล้วสร้างหน้ารวมคอมโพเนนต์ที่กดใช้ได้จริง เพื่อให้ฝ่ายการตลาดเข้าไปดึงคอมโพเนนต์ในรูปแบบที่ดู "เหมือนจริง" และดาวน์โหลดเป็น PNG พื้นหลังโปร่งใสไปใช้ในสไลด์หรือวิดีโอได้

ประเด็นที่ Thariq สรุปในคลิปคือ ต้นทุนของการสร้าง ค้นหา และบริโภคเอกสาร spec กำลังลดลงเข้าใกล้ศูนย์ จึงเลิกกังวลได้แล้วว่า single source of truth ต้องอยู่ที่เดียว format เดียว template เดียว เพราะโมเดลเก่งในการใช้เครื่องมือไปค้น context ที่ต้องการเอง สิ่งที่ควรยกระดับมาสนใจแทนคือเนื้อหาของ plan ว่าเป็นไอเดียที่ดีไหมและจะ execute ได้ดีไหม เขาเรียกแนวทางนี้ว่า just-in-time documentation คือเอกสารคุณภาพสูงที่ทำตอนต้องการ ใช้แล้วทิ้งได้เพราะมันถูก นอกจากช่วยคนทำงานคนเดียวแล้ว HTML ยังช่วยการทำงานข้ามทีม เพราะอัปโหลดขึ้น cloud แล้วแชร์ลิงก์ได้ ทำให้โอกาสที่คนในทีมจะเปิดอ่านจริงสูงขึ้นมาก Thariq ยกตัวอย่างว่าตัวเองส่ง weekly status update ให้หัวหน้าเป็น HTML ที่ Claude สรุปจาก Slack ให้ และยกกรณีทีม Stripe ที่สร้างแพลตฟอร์ม vibe coding ของตัวเองในรูปแบบ HTML เพื่อกำหนดวิธีที่อยากให้ทีม review งานและ spec ได้ตามต้องการ

ที่มา: How I AI: Why this Claude Code engineer uses HTML files as AI specs (YouTube, ดำเนินรายการโดย Claire Vo, แขกรับเชิญ Thariq Shihipar จากทีม Claude Code ของ Anthropic, 18 พฤษภาคม 2026)