สั่งงาน AI ไปหนึ่งรอบ ได้คำตอบกลับมายาวเหยียด แค่เห็นก็ท้อแล้วยังไม่ได้รวมถึงต้องไปทำความเข้าใจอีกว่ามันสรุปอะไรให้เราบ้าง
ปัญหานี้ไม่ได้อยู่ที่เนื้อหา แต่อยู่ที่ User Experience เพราะข้อความไม่ใช่รูปแบบที่มนุษย์จะจับประเด็นได้ดีที่สุด
วันนี้ทีมงาน Geist จะพาทุกคนมาดูไอเดียที่จะเปลี่ยนข้อความจาก AI ให้กลายเป็นผลลัพธ์ที่อ่านง่าย สบายตา และนำไปใช้งานต่อได้ทันที
ที่มาของไอเดีย HTML แทน Markdown
ไอเดียนี้เริ่มจากคุณ Thariq Shihipar ทีมงาน Anthropic ที่โพสต์ ไว้บน X ในชื่อ HTML is the new Markdown โดยเขาให้เหตุผลไว้ว่า HTML ทำให้เขา "รู้สึกเข้าใจสิ่งที่ Claude สร้างขึ้นมา" มากกว่าการอ่าน Markdown
ขอย้ำก่อนเข้าเรื่อง ตรงนี้ ไม่ใช่การสร้างเว็บไซต์ ไม่มีโดเมน ไม่มีเซิร์ฟเวอร์ ไม่มีการ deploy เราใช้ HTML เป็นแค่ รูปแบบการนำเสนอ หรือ presentation format เท่านั้น ได้ไฟล์มาหนึ่งไฟล์ เปิดดูเอง ส่งต่อให้คนอื่นเปิดดูได้ จบแค่นั้น
ทำไมการให้ AI ตอบเป็น HTML ถึงแก้ปัญหาคำตอบยาวได้
ข้อความยาวๆ บังคับให้เราอ่านเรียงบรรทัดจากบนลงล่างส่วนหน้า UI จะให้เราสามารถโฟกัสที่เนื้อหาที่เราสนใจได้ ปัญหาของการ "อ่านยาก" จริง ๆ แล้วก็คือปัญหาที่เรา "หาไม่เจอ"
สังเกตว่าฝั่งขวาจริงๆ แล้วมันก็คือของชิ้นเดียวกันที่ถูกจัดรูปแบบใหม่ให้สามารถอ่านและค้นหาเนื้อหาที่ต้องการได้ง่ายขึ้น นี่คือความหมายของคำว่า presentation format
พอย้ายผลลัพธ์มาเป็น HTML จะได้รับประโยชย์ถึง 4 อย่างต่อไปนี้
- Layout จัดวางให้อ่านง่าย แบ่ง Column, ทำ Card หรือทำ Table of Contents ให้กดข้ามไปหัวข้อที่ต้องการได้ ประเด็นสำคัญที่สุดจะอยู่บนสุดและตัวใหญ่ที่สุด
- แปลงตัวเลขแน่นๆ เป็น Data Visualization เปลี่ยนตารางตัวเลขหลายสิบแถวให้กลายเป็น Bar Chart, Line Graph, Timeline หรือ Stat Cards ใหญ่ๆ อ่านแป๊บเดียวรู้เรื่อง
- ใส่ลูกเล่น Interactive ที่กดได้ มีปุ่มพับ-กางรายละเอียด แท็บสลับมุมมอง หรือสไลด์อธิบายแบบ Step-by-Step ให้ผู้ใช้นำเสนอและเลือกดูเฉพาะจุดที่ต้องการ
- ส่งต่อได้ทั้งไฟล์ ไฟล์ HTML ไฟล์เดียวจบในตัวเอง สามารถแนบ Email, ส่งแชท หรือโยนใส่ Drive ให้ทีมเปิดดูได้ทันทีโดยไม่ต้อง Capture หน้าจอ
สั่ง Claude Cowork ให้สร้าง HTML อย่างไร
ขั้นตอนมีสามขั้น และมีขั้นเดียวที่ต่างจากที่คุณทำอยู่ทุกวัน
- Select Folder: เลือกโฟลเดอร์ที่จะให้ Claude Cowork ทำงานด้วย (จะเป็นโฟลเดอร์ที่มีไฟล์ข้อมูลอยู่แล้ว หรือโฟลเดอร์เปล่าก็ได้)
- Write Prompt: พิมพ์สั่งงานตามปกติ แล้วระบุให้ชัดเจนว่าต้องการผลลัพธ์เป็นไฟล์ HTML ไฟล์เดียว
- Open & Iterate: เมื่อ Cowork ทำงานเสร็จ ให้เปิดโฟลเดอร์แล้ว ดับเบิลคลิกไฟล์ .html เพื่อดูผลงานใน Browser หากต้องการปรับแก้ เช่น อยากเปลี่ยนตารางเป็น Bar Chart หรือย้ายสรุปไว้บนสุด สามารถพิมพ์สั่งเพิ่มในแชทให้มันปรับแก้ไฟล์เดิมได้ทันที
ถ้าเปิดมาแล้วยังไม่ถูกใจ ไม่ต้องเริ่มใหม่ พิมพ์บอกต่อได้เลยว่า "ตัวเลขสรุปเอาขึ้นไปไว้บนสุด" หรือ "ตารางนี้ทำเป็นกราฟแท่งแทน" แล้วมันจะแก้ไฟล์เดิมให้ กด refresh ในเบราว์เซอร์ก็เห็นของใหม่
ตัวอย่างคำสั่ง
สร้างออกมาเป็น HTML ไฟล์เดียวในสไตล์ clean, modern, airy, better spacing
ตัวอย่างการใช้งาน HTML มีอะไรบ้าง
Prompt ที่ดีควรมีส่วนประกอบหลัก 4 ส่วนดังนี้:
ลองนำ Template 3 อันนี้ไปปรับใช้ได้เลย:
1. สรุปบทสนทนายาวๆ ให้กลายเป็น Executive Summary Report
สรุปเนื้อหาเป็นไฟล์ HTML ไฟล์เดียวไว้ในโฟลเดอร์นี้ ชื่อ summary.html
สไตล์ clean, modern, airy, better spacing
มีสารบัญกดข้ามหัวข้อได้ด้านบน ไฮไลต์ข้อสรุปสำคัญ
และปิดท้ายด้วยตารางสิ่งที่ต้องทำต่อ
2. เปลี่ยนไฟล์ข้อมูลให้เป็น Dashboard หน้าสรุปพร้อมกราฟ
อ่านไฟล์ sales.csv ในโฟลเดอร์นี้
ทำเป็นไฟล์ HTML ไฟล์เดียว ชื่อ report.html
ด้านบนใส่การ์ดตัวเลขสรุป 4 ใบ ถัดมาเป็นกราฟแท่งเทียบยอดรายเดือน
เพิ่ม infographic และ data visualization
ทำให้อ่านบนมือถือได้ด้วย
3. เทียบตัวเลือกหลายๆ แบบในหน้าเดียว
เทียบตัวเลือกทั้ง 6 แบบ
ให้แต่ละแบบต่างกันจริง ๆ ทั้งการจัดวาง โทน และความแน่นของข้อมูล
วางเรียงเป็น grid ในไฟล์ HTML ไฟล์เดียว ให้เทียบกันได้ในหน้าจอเดียว
ใต้ชื่อแต่ละแบบใส่ข้อดีข้อเสียสั้น ๆ
Keywords สำคัญที่ควรใส่ใน Prompt:
- Layout & Styling:
clean,modern,airy,better spacing,well organize - Virtual Element:
add more infographic,add more data visualization
ตัวอย่าง Use Cases การนำไปประยุกต์ใช้งาน
- Research & Chat Summary — สรุปผลการค้นคว้าหรือแชทยาวๆ ให้กลายเป็น Report สวยงาม มีสารบัญ และ Highlight ประเด็นสำคัญ
- Data & Analytics Report — แปลงยอดขาย ผลสำรวจ หรือตัวเลขสถิติให้กลายเป็น Dashboard สรุปผลที่มี Stat Cards และกราฟสีสันสดใส
- Travel Itinerary — จัดแผนการท่องเที่ยวรายวัน พร้อมใส่ไทม์ไลน์ และ Link แผนที่ของแต่ละจุด ให้เปิดดูบนมือถือได้ง่าย
- Stock & Portfolio Monitor — ทำ Widget สรุปราคาหุ้น และแนวโน้มพอร์ตการลงทุนในรูปแบบที่คุณต้องการ
- Concept Explainer: — อธิบายเรื่องซับซ้อนให้เข้าใจง่ายด้วยสื่อ Interactive สไตล์ Slide ที่กดดูทีละขั้นตอนได้
HTML กับ Markdown ต่างกันอย่างไร
| หัวข้อ | Markdown | HTML |
|---|---|---|
| การเปิดดูไฟล์ | เปิดได้เป็นข้อความธรรมดา ถ้าไม่มีตัวช่วยแสดงผล | ดับเบิลคลิกแล้วเห็นหน้าตาจริงทันที |
| Data Vitualize | ไม่มี | มี |
| interactivity (กดพับ/กาง/แท็บ) | ไม่ได้ | ได้ |
| ความสะดวกในการส่งต่อ | ต้องอธิบายวิธีเปิดให้ Non-tech | ส่งไฟล์แล้วให้คลิ๊กเปิดได้เลย |
| การแปลงเป็น PDF | ต้องใช้โปรแกรมแปลงไฟล์ | สั่ง Print จาก Browser แล้ว Save as PDF ได้ทันที |
| การแก้ไขข้อความ | แก้ไขง่ายมาก เปิด Text Editor ก็แก้ได้ | แก้ไขได้ แต่ต้องระวังโครงสร้าง HTML |
ไม่ต้องจำทั้งตาราง ถามตัวเองข้อเดียวก็พอ
ต้องเขียนโค้ด HTML เป็นไหม
ไม่ต้องเลย ทั้งบทความนี้ไม่มีจุดไหนที่คุณต้องพิมพ์แท็ก HTML สักตัว คุณสั่งให้ AI เป็นคนเขียน และคุณเห็นแต่ผลลัพธ์ที่เปิดในเบราว์เซอร์
สิ่งเดียวที่ต้องเปลี่ยนคือประโยคที่คุณพิมพ์ จากเดิมที่บอกแค่ว่าอยากได้อะไร ให้บอกเพิ่มว่าอยากได้ ในรูปแบบไหน ด้วย
ไฟล์ HTML ที่ได้ เอาไปให้คนอื่นดูที่ไหนได้บ้าง
ไฟล์เดียวจบในตัวเอง เพราะฉะนั้นส่งได้เหมือนไฟล์ทั่วไป แนบอีเมล ส่งในแชท หรืออัปขึ้นไดรฟ์แล้วแชร์ลิงก์ก็ได้ คนรับดับเบิลคลิกก็เปิดได้ ไม่ต้องลงโปรแกรมอะไรเพิ่ม
ถ้าปลายทางเป็นคนที่ต้องการ PDF ให้เปิดไฟล์ในเบราว์เซอร์แล้วสั่ง Print จากนั้นเลือกบันทึกเป็น PDF จะได้ไฟล์ที่หน้าตาเหมือนที่เห็นบนจอ
เมื่อไหร่ที่ยังควรใช้ Markdown อยู่
งานที่ต้องเอาไปแก้ต่ออีกหลายรอบ ไฟล์บันทึกที่คุณอ่านคนเดียว หรือข้อความที่จะเอาไปวางต่อในเครื่องมืออื่น Markdown เบากว่าและแก้ง่ายกว่าชัดเจน
เส้นแบ่งที่ใช้ได้จริงคือ งานระหว่างทางใช้ Markdown งานที่จะส่งให้คนอื่นดูใช้ HTML