𝗔𝗿𝘁𝗶𝗳𝗮𝗰𝘁𝘀 𝗶𝗻 𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲: 𝗧𝗵𝗲 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿'𝘀 𝗚𝘂𝗶𝗱𝗲
Anthropic ได้เพิ่ม Artifacts เข้ามาใน Claude Code ฟีเจอร์นี้จะเปลี่ยนงานเขียนโค้ดของคุณให้กลายเป็นหน้าเว็บแบบ Live ที่คุณสามารถแชร์ให้กับทีมของคุณได้
Artifacts ไม่ใช่ไฟล์แบบ Static แต่เป็นหน้า HTML แบบ Interactive ซึ่งจะอัปเดตตามการทำงานของคุณ โดยจะใช้โค้ด ไฟล์ และผลการทดสอบจริงของคุณในการสร้างมุมมองต่างๆ (views)
คุณสามารถใช้สิ่งนี้สำหรับ:
- การทำ PR walkthrough พร้อมกับ code diffs
- แผนผังโครงสร้างระบบ (System architecture diagrams)
- แดชบอร์ดแบบ Interactive
- หน้าสถานะเหตุการณ์ (incident status) แบบเรียลไทม์
- การตรวจสอบความปลอดภัยและลิขสิทธิ์ (Security and license audits)
วิธีใช้งาน:
- ลงชื่อเข้าใช้: รัน
/loginในเซสชัน Claude Code ของคุณ - สั่งการ: บอกให้ Claude สร้างแดชบอร์ดหรือแผนผัง
- สร้าง: Claude จะสร้างหน้า HTML ขึ้นมา
- แชร์: คลิกปุ่มแชร์เพื่อส่งลิงก์ส่วนตัวให้กับทีมของคุณ
ความพร้อมใช้งานและความเป็นส่วนตัว:
- ฟีเจอร์นี้อยู่ในช่วง Beta สำหรับแผน Team และ Enterprise
- แผน Individual ยังไม่สามารถใช้งานได้
- Artifacts เป็นแบบส่วนตัว เฉพาะสมาชิกที่ผ่านการยืนยันตัวตนในองค์กรของคุณเท่านั้นที่สามารถมองเห็นได้
Anthropic ยังได้อัปเดต Claude Design เพื่อลดช่องว่างระหว่างการออกแบบและโค้ด โดยตอนนี้คุณสามารถใช้คำสั่ง /design-sync ได้แล้ว
เวิร์กโฟลว์ของ /design-sync:
- ดึง (Pull) design system ของคุณจาก GitHub เข้าสู่ Claude Design
- ใช้
/design-syncใน terminal เพื่อนำดีไซน์เหล่านั้นเข้ามาอยู่ในโค้ดของคุณ - ส่ง (Push) โค้ดกลับไปยัง Claude Design เพื่อทำการแก้ไขในเชิงภาพ (visual edits)
สิ่งนี้ช่วยสร้างวงจรการทำงานที่สมบูรณ์ (full loop) คุณสามารถเปลี่ยนจากงานออกแบบ ไปสู่การเขียนโค้ด และไปจนถึงการทำเอกสาร (documentation) ได้โดยไม่ต้องออกจากระบบ AI
สิ่งนี้ช่วยแก้ปัญหาใหญ่ที่มักเกิดขึ้น โดยปกติแล้ว งานเขียนโค้ดด้วย AI มักจะถูกซ่อนอยู่ใน terminal ทำให้เหล่านักพัฒนาต้องมาเขียนอัปเดตใน Slack หรือ Jira ด้วยตัวเอง แต่ Artifacts จะทำให้งานเหล่านั้นแสดงผลให้เห็นได้ทันที
ตัวงานจะกลายเป็นเครื่องมือในการสื่อสารในตัวมันเอง
Source: https://dev.to/max_quimby/artifacts-in-claude-code-the-operators-guide-4fb0
Optional learning community: https://t.me/GyaanSetuAi