Claude Code Artifacts เปลี่ยนงานในเซสชันเป็นหน้าเว็บที่อัปเดตสดและกดแชร์ให้ทีมดูได้ทันที

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

artifact คือหน้าเว็บ HTML หน้าเดียวที่ Claude Code สร้างขึ้นและ host ไว้บนเซิร์ฟเวอร์ของ Anthropic บริษัทผู้พัฒนา Claude ความต่างจากการ export ไฟล์ธรรมดาคือ Claude สร้างหน้านี้จาก context ทั้งหมดของเซสชัน ทั้งโค้ดในโปรเจกต์ ข้อมูลที่ดึงมาจากเครื่องมือภายนอกที่ต่อไว้ และบทสนทนาทั้งหมดในงานนั้น พองานเดินต่อ Claude ก็อัปเดตหน้าเดิมให้เองโดยไม่เปลี่ยนลิงก์ ใครที่ถือลิงก์อยู่จึงเห็นเวอร์ชันล่าสุดทันที ไม่ต้องส่งไฟล์ใหม่ ไม่ต้องตั้งเซิร์ฟเวอร์เอง

ปัญหาไม่ใช่ Claude ทำงานไม่เก่ง แต่อยู่ที่การส่งต่อ

เวลา AI ทำงานแทนเราจนเสร็จ ผลลัพธ์ส่วนใหญ่มักจบเป็นข้อความยาวเหยียดบนหน้าจอ terminal คนที่ลงมือทำเข้าใจดีว่ามันทำอะไรไป เพราะอยู่ดูมาตลอด แต่คนที่เหลือในทีมไม่ได้อยู่ตรงนั้น พอจะส่งต่อก็ต้องมาเล่าซ้ำทุกครั้งว่า AI เจออะไรบ้าง

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

ข้อดีอีกอย่างคือไม่ต้องเตรียมอะไรล่วงหน้าเลย ตามที่ claude.com อธิบายไว้ ไม่ต้องต่อแหล่งข้อมูล ไม่ต้องตั้งเซิร์ฟเวอร์ แค่ขอหน้าเว็บ แล้ว Claude Code ก็ประกอบมันขึ้นมาจากสิ่งที่มีอยู่แล้วในเซสชัน

ลองสร้างจริงใน 3 ขั้นตอน

วิธีเริ่มไม่ต้องจำคำสั่งพิเศษอะไร คุณอธิบาย output ที่อยากได้เป็นภาษาธรรมดาในเซสชันได้เลย เช่น

1. พิมพ์สิ่งที่อยากเห็นเป็นหน้าเว็บ เช่น walk me through this PR (พาดูทีละจุดของ PR นี้หน่อย) หรือ show a dashboard of deploy failures (ทำแดชบอร์ดรวม deploy ที่ล้มให้ดูหน่อย)
2. ครั้งแรกที่จะ publish Claude จะถามยืนยันก่อน ให้พิมพ์ Yes ส่วน artifact ที่เคยอนุมัติแล้ว ครั้งต่อ ๆ ไป Claude จะ republish ให้เองโดยไม่ถามซ้ำ
3. Claude พิมพ์ลิงก์ออกมาแล้วเปิดหน้าเว็บใน browser ให้ทันที จากนั้นกดปุ่ม Share ที่ส่วนหัวของหน้าเว็บ เพื่อให้สิทธิ์คนในองค์กรเข้ามาดู

ถ้าทำงานอยู่ใน terminal แล้วอยากเปิด artifact ล่าสุดเร็ว ๆ กด Ctrl+] ได้เลย และถ้าไม่อยากให้ browser เด้งขึ้นมาเองทุกครั้งที่ publish ให้ตั้งค่า CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 เพื่อปิดการเปิดอัตโนมัติ หน้าเว็บทุกอันที่เคยสร้างจะไปรวมอยู่ในแกลเลอรีที่ claude.ai/code/artifacts ให้ย้อนกลับไปเปิด หรือกู้เวอร์ชันก่อนหน้าได้จากตรงนั้น

เอาไปทำอะไรได้บ้าง

จุดที่ artifact คุ้มที่สุดคืองานที่ดูแล้วเข้าใจง่ายกว่าอ่านเป็นข้อความ ตัวอย่างที่เห็นภาพชัด

• พารีวิว PR แบบมี diff กำกับ — คนรีวิวอ่านเหตุผลของแต่ละการแก้ไปพร้อมกับโค้ด ไม่ต้องเดาเองว่าทำไมถึงแก้ตรงนี้
• แดชบอร์ดจากข้อมูลที่เซสชันดึงมาแล้ว — กรองและเรียงข้อมูลได้ในหน้าเดียว
• ไทม์ไลน์สำหรับสอบสวนปัญหา ที่ค่อย ๆ เติมข้อมูลเข้าไประหว่างที่งานยังเดินอยู่
• เช็กลิสต์ปล่อยรุ่น ที่ติ๊กความคืบหน้าให้เองระหว่างเซสชัน ไม่ต้องมาอัปเดตสถานะด้วยมือ
• ปุ่มและสไลเดอร์ให้ลองปรับค่า ดูผลได้เลย แทนที่จะอธิบายเป็นข้อความว่าค่าไหนให้ผลยังไง

ตัวอย่างที่เห็นภาพชัดคือกรณีสอบสวนเหตุระบบล่ม วิศวกรเปิดเซสชันก่อนประชุมเช้า Claude สร้าง artifact เป็นไทม์ไลน์พร้อม commit ที่น่าสงสัยและกราฟอัตราความผิดพลาด จากนั้นวิศวกรแชร์ลิงก์ให้ทีมดู ระหว่างที่สอบสวนต่อ Claude ก็ republish หน้าเดิมอีกสองครั้ง ทุกคนเลยเห็น context เดียวกันตลอด โดยไม่มีใครต้องถามว่าสรุป AI เจออะไร

ของจริงที่ต้องรู้ก่อนคาดหวังเกินไป

artifact ไม่ใช่เว็บแอปที่ deploy ไว้ใช้งานจริง แต่เป็นสถานะของงาน ณ ตอนนั้น ไม่ใช่เครื่องมือภายในที่ host ไว้ใช้ถาวร ข้อจำกัดนี้สำคัญเพราะกำหนดว่าทำอะไรได้และทำไม่ได้

หน้าเว็บนี้ไม่มี backend จึงเก็บข้อมูลที่กรอกในฟอร์มไม่ได้ ยืนยันตัวตนคนดูเองไม่ได้ และเรียก API ตอนเปิดดูไม่ได้ นอกจากนี้ยังโหลดไฟล์หรือทรัพยากรจากเว็บอื่นไม่ได้เลย Claude จึงฝัง CSS กับ JavaScript ลงในหน้า และแปลงรูปเป็น data URI ไว้ในตัวให้จบในหน้าเดียว ลิงก์ไปไฟล์อื่นแบบ relative จะไม่ทำงาน ต้องใช้ anchor ภายในหน้าแทน ขนาดหน้าที่ render ออกมาก็จำกัดที่ 16 MiB ฉะนั้นถ้าต้องวาดไดอะแกรม แนะนำให้ใช้ SVG หรือ HTML/CSS แทนรูป raster จะได้ไม่บวมเกินขนาด

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

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

งานที่ดีที่สุดคืองานที่ไม่ต้องเล่าซ้ำ

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

---

ที่มา:

• บทความ Claude Code now supports artifacts จาก claude.com
• เอกสาร Share session output artifacts จาก Claude Code Docs