วันที่ 17 เมษายน 2026 Anthropic เปิดตัวเครื่องมือใหม่ชื่อ Claude Design

หนึ่งวันก่อนหน้านั้น Opus 4.7 เพิ่งออก

หนึ่งสัปดาห์ก่อนหน้านั้น Krieger ลาออกจากบอร์ด Figma แล้วเดินไปนั่งตำแหน่ง CPO ของ Anthropic

จิ๊กซอว์เริ่มต่อรูปได้ชัด

คนในวงการเรียก Claude Design ว่า “Figma killer” ตั้งแต่วันแรก

ใครที่ต้องทำสไลด์ ทำเว็บ ทำ pitch deck ทำ mockup ทำ launch video ควรอ่านบทความนี้ให้จบ

---

Claude Design ไม่ใช่โหมดในแชท Claude

อันนี้คือสิ่งที่หลายคนเข้าใจผิด

Claude Design คือแอปแยกในระบบของ Anthropic เหมือน Claude Cowork และ Claude Code

มี usage meter ของตัวเอง รีเซ็ตรายสัปดาห์ ไม่กิน quota เดียวกับ Claude แชทปกติ

ใช้ Opus 4.7 เป็น vision model ที่ตรวจงานตัวเองด้วยสายตา ก่อนส่งคืนให้คุณ

ไม่ต้องเขียนโค้ด ไม่ต้องเปิด Figma สั่งด้วยภาษาไทยหรืออังกฤษได้ทันที

---

การใช้งาน

Free plan ใช้ไม่ได้

Pro plan 20 ดอลลาร์ต่อเดือน ลองเล่นได้ ทำเว็บ 1 ชิ้นใหญ่ก็เกือบหมด quota แล้ว

Max 5x ที่ 100 ดอลลาร์ต่อเดือน เหมาะกับคนทำงาน design ประจำ ทำได้ราว 4-5 builds ต่อสัปดาห์

Max 20x ที่ 200 ดอลลาร์ต่อเดือน เหมาะกับ agency หรือคนทำ full pipeline

ตัวเลขจริงจากคนที่ลองใช้แล้ว Max 200 ดอลลาร์ ทำ design system + pitch deck + landing page + mobile app + launch video ครบ ใช้ไป 95% ของ session

ถ้าจะใช้จริงจัง อย่างน้อยควร Max 100 ดอลลาร์ขึ้นไป

---

Design System สำคัญที่สุดในการใช้ Calude Design

Design system คือไฟล์ design.md ที่บอก Claude ว่าแบรนด์ของคุณหน้าตาแบบไหน

โลโก้ พาเลตต์สี ฟอนต์ ปุ่ม การ์ด เสียงของแบรนด์

สร้างครั้งเดียว ใช้ได้ทุกชิ้นในอนาคต

ทำ pitch deck ก็ on-brand ทำเว็บก็ on-brand ทำวิดีโอเปิดตัวก็ on-brand

ตอนสร้าง design system ครั้งแรกกินไปราว 6% ของ session limit สำหรับ plan 200 ดอลลาร์

ไม่น้อย แต่คุ้มกว่ามากเทียบกับการสั่ง Claude Design ทำชิ้นใหม่ทุกครั้งโดยไม่มี context

คำเตือนสำคัญ ทำ design system ตัวเดียวพอ อย่าทำ 5 ตัว

วิธีสร้างใน Claude Design:

1. ไปที่เมนู Design Systems แล้วอัปโหลดโลโก้ (PNG) หรือไฟล์ Markdown ที่เตรียมไว้

2. หากมีเว็บไซต์เดิมอยู่แล้ว สามารถป้อน URL หรือ GitHub Repo เพื่อให้ AI ดึงสไตล์มาใช้ได้เลย

3. AI จะสร้างหน้าต่างแสดงผล UI Kit เช่น ปุ่มกด, โทนสี, การจัดช่องไฟ และตัวอักษรให้เราตรวจสอบ

สามารถแก้ไขได้หาก AI ทำโลโก้เพี้ยน (ซึ่งเป็นบั๊กที่พบได้บ่อย) เมื่อพอใจแล้วให้กด Publish

---

Pipeline 5 ขั้น ที่ช่วยประหยัด token

1. ระดมไอเดียและเขียน brand concept ใน Claude แชทปกติ ไม่ใช่ใน Claude Design
2. เอา brand concept มาสร้าง design system ใน Claude Design
3. สร้าง artifact ที่ต้องการ pitch deck เว็บ app วิดีโอ ใน Claude Design โดยใช้ design system ตัวเดิม
4. ปรับละเอียดด้วย Edit inline และ Tweaks panel ไม่สั่งใหม่ในแชท
5. Export zip แล้ว deploy ผ่าน Claude Code เชื่อม GitHub และ Vercel

ขั้นที่ 1 สำคัญที่สุด

หากไม่ระดมไอเดียก่อนใน Claude Design = เปลือง token สุด เพราะ Opus 4.7 ใน Design แพงกว่าใน chat ปกติ

ควรระดมในแชทปกติเพื่อสร้างแนวทางการ Design ก่อนจะช่วยประหยัดได้ 30-50%

---

3 วิธีบอก Claude Design ให้แก้งาน

วิธีที่ 1 พิมพ์ภาษาธรรมชาติ ใช้ตอนต้องเปลี่ยนภาพรวม กิน token เยอะที่สุด

วิธีที่ 2 Edit inline คลิกที่ element ที่ต้องการ แล้วแก้ขนาด สี หรือข้อความใน UI ตรงๆ ประหยัด token ที่สุด

วิธีที่ 3 Draw วาดวงกลมรอบจุดที่ต้องการ แล้วใส่ comment ใช้ตอนอ้างถึงสิ่งที่ click ไม่ได้ เช่น gradient หรือระยะห่าง

ลำดับการใช้ที่ดี เริ่มจาก Edit inline ก่อน คลิกได้ก็คลิก แก้ได้ก็แก้

ของที่ click ไม่ได้ค่อย Draw

ภาษาธรรมชาติเก็บไว้ตอนต้องเปลี่ยนใหญ่จริงๆ

---

โปรเจกต์ที่ 1 – การสร้างสไลด์นำเสนอ (Pitch Deck)

• ขั้นตอนการทำงาน:
  1. นำข้อมูลโครงสร้างเนื้อหา (Outline) ที่วิจัยมาจาก Claude ปกติ มาวางใน Claude Design
  2. เลือก Design System ที่เราสร้างไว้ในบทที่ 2
  3. AI จะสร้างสไลด์และมี “Verifier Agent” (เอเจนต์ตรวจสอบ) คอยดูภาพรวมและแก้ไขข้อผิดพลาดบนสไลด์ให้โดยอัตโนมัติ
• การปรับแต่งแก้ไข:
  • สามารถคลิกแก้ไขข้อความ หรือเปลี่ยนสีที่องค์ประกอบนั้นๆ ได้โดยตรง
  • แนะนำให้ใช้ฟีเจอร์ “Tweaks”: เป็นแผงควบคุมที่ให้เราสลับเปลี่ยนโทนสี พื้นผิวแบคกราวด์ (เช่น ลายจุด, ลายกระดาษ) หรือเปลี่ยนเลย์เอาต์ได้ทันทีโดยไม่ต้องพิมพ์ Prompt ใหม่ ซึ่งช่วยประหยัดโควตาได้มาก

Tweaks Panel ฟีเจอร์ลับที่ทุกคนควรใช้

หลังสั่งให้ Claude Design ทำงานชิ้นแรก พิมพ์สั้นๆ

“ให้ tweaks ที่เล่นได้เยอะๆ สี ฟอนต์ layout texture ขนาด”

Claude จะสร้าง slider และ toggle ให้คุณเล่นใน UI โดยไม่ต้องส่ง prompt ใหม่

ลากเล่นได้ทันที สีไม่ชอบเลื่อนใหม่ ฟอนต์ไม่ชอบเปลี่ยนใหม่

ประหยัด token มหาศาลเทียบกับการพิมพ์แชทกลับไปกลับมา

ใช้ตอนนึกไม่ออกว่าจะปรับอะไรดี ปล่อยให้ AI เป็นฝ่าย creative

---

เลือกโมเดลตามขั้นงาน

ตอน planning และ design system ใช้ Opus 4.7

ตอน iterate เปลี่ยนสี เปลี่ยนฟอนต์ เปลี่ยน copy ใช้ Sonnet 4.6

ตอนแก้ label หรือข้อความเล็กน้อย ใช้ Haiku หรือ Edit inline เอง

หลายคนอาจจะไม่รู้ว่า Sonnet 4.6 ทำงานส่วนใหญ่ได้ดีเกินคาด

ใช้ Opus เฉพาะตอน “อย่ามั่ว” เท่านั้น

---

โปรเจกต์ที่ 2 – การสร้างหน้าเว็บไซต์ (Landing Page)

• การร่างโครงสร้าง (Wireframing): สามารถสั่งให้สร้าง Wireframe ก่อน เพื่อดูแนวทางเลย์เอาต์ (เช่น ธีมมืดหรือธีมสว่าง) ก่อนลงรายละเอียดจริง
• ฟีเจอร์การวาด (Sketch): สามารถใช้เครื่องมือวาดกล่องสี่เหลี่ยมง่ายๆ ใน Claude Design เพื่อกำหนดโครงสร้างหน้าเว็บให้ AI เข้าใจตรงกัน เช่น “วิดีโออยู่ขวา”, “ข้อความอยู่ซ้าย”, “แถบเมนูอยู่ด้านบน”

• การใส่แอนิเมชันพื้นหลัง: สามารถสร้างวิดีโอแอนิเมชันแบบสั้นๆ (ไฟล์ .mp4 ขนาดไม่เกิน 30-40 MB) จากเครื่องมือ AI อื่นๆ แล้วนำมาอัปโหลดใส่ในเว็บ เพื่อทำเป็นภาพพื้นหลังแบบวนลูป (Endless loop) หรือพื้นหลังแบบเลื่อนตามเมาส์ (Parallax scrolling)

Bug และข้อจำกัดที่ต้องรู้ก่อนใช้

โลโก้ Claude Design มักจะแก้โลโก้ที่คุณอัปโหลดเองโดยไม่ได้รับอนุญาต

วิธีแก้ feedback ตรงๆ “อย่าเปลี่ยน logo จาก PNG ที่ให้ไป”

Mobile ไม่ responsive อัตโนมัติ ต้องสั่งใน Claude Code หลัง deploy ว่า “optimize for mobile” และเปิด DevTools กด F12 ทดสอบ

Wireframe project เปลือง session ถ้าทำเว็บหน้าเดียว ข้ามไป high-fidelity เลยจะดีกว่า

อัปโหลดวิดีโอได้ไม่เกิน 30 ถึง 40 MB ต่อไฟล์

ถ้า session หมด export zip ทันที แล้วทำต่อใน Claude Code ที่มี quota แยก

---

โปรเจกต์ที่ 3 – การทำต้นแบบแอปพลิเคชันมือถือ (Mobile App Prototype)

• ส่งไฟล์ความต้องการของแอป (App Spec) ที่ละเอียดมากๆ ให้ AI
• ผลลัพธ์ที่ได้จะไม่ใช่แค่ภาพนิ่ง แต่เป็น Mockup ที่สามารถกดโต้ตอบได้จริง (Interactive) เช่น การพิมพ์ข้อความ, การกดสลับแท็บเมนู, หรือการกดปุ่มเพื่อดูหน้าต่างที่ซ่อนอยู่
• สามารถใช้ Tweaks เพื่อปรับความหนาของเงา (Drop shadow) หรือเปลี่ยนสไตล์การ์ดจากแบบแบน (Flat) เป็นแบบมีมิติ (Lifted) ได้

---

โปรเจกต์ที่ 4 – การสร้างวิดีโอแอนิเมชันเปิดตัว (Launch Video)

• Claude Design สามารถสร้างวิดีโอแอนิเมชันจาก HTML ได้ โดยใช้ชุดคำสั่งที่เรียกว่า Hyperframes
• เพียงแค่อัปโหลดไฟล์ Markdown ของ Hyperframes เข้าไป และสั่งให้ AI “เล่าเรื่องราวที่น่าตื่นเต้น” AI จะสร้างกราฟิกเคลื่อนไหว (Motion Graphics) พิมพ์ข้อความแบบเทอร์มินัล และการเปลี่ยนฉากให้โดยอัตโนมัติ
• คุณสามารถคัดลอก URL ของเว็บไซต์ที่มีแอนิเมชันสวยๆ ไปแปะให้ Claude Design ดึงโค้ดมารวมในโปรเจกต์ของคุณได้เลย

---

Deploy ขึ้นเว็บจริง 5 นาที

หลังทำเว็บเสร็จใน Claude Design

1. คลิก share แล้ว download as zip
2. แตกไฟล์ในโฟลเดอร์ใหม่ เปิดด้วย VS Code
3. เปิด Claude Code สั่ง “push เข้า GitHub repo”
4. เข้า vercel.com สมัครด้วยบัญชี GitHub กด Add New Project แล้ว Import repo
5. Vercel จะ auto-deploy ให้ทุกครั้งที่ push GitHub

ถ้าเปิดแล้วเจอ 404 not found สั่ง Claude Code ว่า “rename ไฟล์เป็น index.html” เพราะ Vercel หาไฟล์ root ที่ชื่อนี้

หลังจากนั้นจะมี 2 environment localhost สำหรับทดลอง และ vercel.app สำหรับเผยแพร่

---

แหล่ง inspiration ที่ใช้ได้เลย

motionsites.ai รวม animated background พร้อม prompt copy ได้ฟรี (premium 99 ดอลลาร์ตลอดชีพ)

godly.website เลื่อนดู inspiration เว็บสวยทั่วโลก

awwwards.com งานชนะรางวัล

21st.dev components แยกชิ้น เช่น ปุ่ม badge animated background

วิธีใช้คือ copy prompt จากเว็บเหล่านี้ มาวางใน Claude Design พร้อมบอกว่า “ทำตามนี้ แต่ใช้ design system ของแบรนด์ผม”

AI website building ในยุคนี้คือการ copy prompt วาง

---

เคล็ดลับเพื่อบริหารโควตาการใช้งาน (Best Practices)

• วางแผนข้างนอกเสมอ: ห้าม Brainstorm ใน Claude Design ให้คิดงานใน Claude ปกติให้จบ แล้วนำข้อสรุป (Spec) มาป้อนใส่ทีเดียว
• คลิกแก้แทนการพิมพ์สั่ง: หากต้องการแก้คำผิดหรือแก้ขนาด ให้ดับเบิลคลิกแก้ไขบนหน้าจอโดยตรง หรือใช้ฟีเจอร์ Tweak แทนการพิมพ์สั่งยาวๆ เพราะช่วยประหยัด Token ได้ดีกว่า
• เปลี่ยนโมเดลเมื่อจำเป็น: ตอนสร้างโปรเจกต์ใหม่ให้ใช้ Opus 4.7 แต่ถ้าแค่ต้องการปรับปรุงจุดเล็กๆ น้อยๆ ให้ลดโมเดลลงมาใช้ Sonnet 4.6 หรือ Haiku
• สั่งแก้ทีละอย่าง (Iterate in Chunks): อย่าสั่งแก้ 5 อย่างพร้อมกันใน Prompt เดียว AI มักจะทำตกหล่น ให้สั่งแก้ทีละจุด
• อ้างอิงให้ชัดเจน (Reference, don’t describe): ให้ใช้ภาพสเก็ตช์, วงกลมไฮไลต์จุดที่ต้องการแก้ (Draw tool) หรือส่ง URL ตัวอย่างให้ AI ดู จะดีกว่าการพิมพ์อธิบายลอยๆ

• งานที่ Canva หรือ PowerPoint ทำเสร็จใน 5 วินาที อย่าเสียเวลาสั่ง AI
• โปสเตอร์ static ที่ไม่ต้อง iterate Canva เร็วกว่า
• แก้แค่โลโก้ สี ฟอนต์ Edit inline หรือทำมือเลย
• ของที่ต้อง custom code เยอะ ใช้ Claude Code โดยตรงดีกว่า
• AI เก่งจริง แต่บางงานมือเร็วกว่า

---

คำถามที่ต้องถามตัวเอง

ถ้ามีเครื่องมือที่ทำ pitch deck เว็บ app และวิดีโอเปิดตัวได้ในวันเดียว ด้วยภาษาธรรมชาติ

งานของนักออกแบบเปลี่ยนไปแค่ไหน

งานของเจ้าของแบรนด์เปลี่ยนไปแค่ไหน

แล้วคนที่ยังบอกว่า “AI ทำ design แทนมนุษย์ไม่ได้” จะอยู่ตรงไหนของอุตสาหกรรมในอีก 12 เดือน

ลองเปิด Claude Design วันนี้ แล้วถามตัวเองอีกครั้ง

---

genaispace.net : A Space to learn Generative AI Together

รับเทรนนิ่งองค์กรเกี่ยวกับการใช้ Generative AI เพื่อพัฒนาทักษะของพนักงาน เป็นองค์กร,บริษัท,กลุ่ม,เดี่ยว ด้วยประสบการณ์กว่า 3 ปี ผ่านองค์กรใหญ่ๆมากกว่า 50 แห่งและพนักงานกว่า 2,000 คน