Artifacts: ให้ Claude สร้างชิ้นงานจริง

Artifacts คืออะไร

ปกติ Claude ตอบเป็นข้อความในแชท แต่พอสั่งงานที่เป็น “ชิ้นงาน” — เว็บเพจ เกม แผนภาพ เอกสารยาว — Claude จะเปิดหน้าต่างพิเศษข้างแชทที่เรียกว่า Artifact แสดงผลงานจริงให้เห็นและลองใช้ได้ทันที แก้ไขต่อได้เรื่อย ๆ โดยไม่ปนกับบทสนทนา

สิ่งที่สร้างได้ (เท่าที่คนใช้กันจริงบ่อย ๆ):

• เว็บเพจ — หน้า portfolio, หน้าแนะนำร้าน, landing page, ป้ายประกาศสวย ๆ
• เกมและของโต้ตอบ — เกมง่าย ๆ, แบบทดสอบ, เครื่องคิดเลขเฉพาะทาง (เช่น คำนวณผ่อนบ้าน)
• แผนภาพ — flowchart, mind map, org chart, timeline
• เอกสาร — รายงาน คู่มือ สัญญา ที่จัดรูปแบบแล้วพร้อมส่งต่อ

Case จริง: เว็บ Portfolio ใน 15 นาที

สมมติคุณเป็นช่างภาพฟรีแลนซ์ อยากมีหน้าเว็บแนะนำตัวไว้ส่งลูกค้า ทำตามนี้:

รอบที่ 1 — สั่งงานแรก:

สร้างเว็บเพจ portfolio หน้าเดียวให้ฉันหน่อย ฉันเป็นช่างภาพฟรีแลนซ์รับถ่ายงานแต่งงานและงานอีเวนต์

- โทนสี: ขาว-ดำ มินิมอล ดูแพง
- ส่วนประกอบ: ชื่อ + คำแนะนำตัวสั้น ๆ, บริการและราคาเริ่มต้น 3 แพ็กเกจ, พื้นที่ใส่รูปผลงาน 6 ช่อง (ใส่ placeholder ไว้ก่อน), ช่องทางติดต่อ
- ต้องดูดีทั้งบนมือถือและคอม

รอบที่ 2-3 — สั่งแก้เหมือนคุยกับนักออกแบบ:

• “เปลี่ยนฟอนต์หัวข้อให้ดูมีสไตล์กว่านี้ และทำให้ส่วนราคาเด่นขึ้น”
• “เพิ่มปุ่ม ‘ทัก LINE’ สีเขียวลอยมุมขวาล่าง”

รอบสุดท้าย — เอาไปใช้: กดปุ่มดาวน์โหลด/คัดลอกโค้ดจาก Artifact เอาไปฝากไว้กับบริการโฮสต์ฟรี หรือจะกดแชร์ลิงก์ Artifact ให้คนอื่นดูตรง ๆ ก็ได้

จุดที่อยากให้สังเกต: ทั้งหมดนี้ไม่มีตรงไหนต้องเข้าใจโค้ด — บทบาทเราคือ “ลูกค้าที่บรีฟเก่ง” ซึ่งคุณมีทักษะนั้นแล้วจากบทที่ 8

เคล็ดลับสั่งงาน Artifact ให้ได้ของดี

1. บรีฟเหมือนจ้างมืออาชีพ — บอกโทน สี อารมณ์ กลุ่มคนดู อย่าบอกแค่ “สวย ๆ”
2. แก้ทีละจุด ระบุพิกัด — “ปุ่มตรง header ใหญ่ไป” ดีกว่า “เอาใหม่ทั้งหน้า”
3. ขอดูก่อนจริงเสมอ — Artifact แสดงผลสด ลองกดลองเลื่อนดูบนหน้าจอจริงก่อนเอาไปใช้
4. เกมและเครื่องมือ = ของขวัญชั้นดี — ลองสั่ง “ทำแบบทดสอบ 10 ข้อจากชีทที่แนบมา” ให้ลูกทำ หรือ “เครื่องคำนวณราคางานถ่ายภาพ” ฝังในเว็บตัวเอง

สร้างเกมจับคู่คำศัพท์ภาษาอังกฤษ-ไทยง่าย ๆ 8 คู่ ธีมคำศัพท์ในร้านกาแฟ มีนับคะแนนและปุ่มเริ่มใหม่ สีสันสดใสน่ารัก

ข้อจำกัดที่ควรรู้

• Artifact เหมาะกับชิ้นงาน “หน้าเดียวจบ” — เว็บหลายหน้า ระบบสมาชิก ฐานข้อมูล ต้องใช้เครื่องมือระดับถัดไป (Claude Code ในบทที่ 19)
• รูปภาพจริงต้องเตรียมเอง Claude ใส่ placeholder ให้ก่อนได้
• งานที่ซับซ้อนมาก ๆ อาจต้องวนแก้หลายรอบ — เป็นเรื่องปกติ ไม่ใช่เราสั่งไม่เก่ง