สอนใช้ Claude Design ตั้งแต่ prompt แรกจนได้ design package ส่งให้ Claude Code กับเคส Habit Tracker Dashboard

เมื่อวานนี้ Anthropic เพิ่งปล่อย Claude Design ออกมาพร้อมโมเดล Opus 4.7 ที่มีทักษะการออกแบบดีขึ้นกว่าเดิมเยอะ ใครเคยใช้ Lovable, v0 หรือ Figma Make อยู่แล้วน่าจะสนใจตัวนี้เป็นพิเศษ เพราะจุดเด่นคือส่งงานต่อเข้า Claude Code ได้ในคลิกเดียว

ในบทความนี้ผมจะพาทำ dashboard ของ habit tracker app ตั้งแต่หน้าว่างเปล่าจนได้ design package พร้อมส่งต่อให้ Claude Code เอาไป implement เป็นโค้ดจริง

ของที่ต้องเตรียม

• Claude subscription แบบ Pro, Max, Team หรือ Enterprise
• เข้า Claude Design - claude.ai/design

เรื่องที่ต้องรู้ก่อนเริ่มคือ Claude Design มี usage limit ของตัวเอง แยกจาก chat ปกติและ Claude Code โควต้าไม่ปนกัน แต่ถ้าใช้หนักก็หมดเร็วพอกัน

Step 1: สร้าง Prototype Project

ให้เราเลือก High fidelity ซึ่งจะเหมาะกับงาน mockup ที่จะเอาไปใช้จริงๆ หรือส่งต่อให้ claude code ตั้งชื่อ Project name ว่า Habit Tracker

Step 2: เขียน prompt แรกให้ดี

Prompt แรกสำคัญที่สุดของทั้งงาน เพราะเป็นตัวกำหนดทิศทาง ถ้าเริ่มผิด refine กี่รอบก็ไม่ตรงใจ หลักของ Anthropic บอกว่า prompt ที่ดีต้องบอกสามเรื่องครบ ได้แก่ What (สร้างอะไร), Who (ใครใช้), และ What matters (อะไรคือหัวใจของงาน)

Prompt ที่ไม่ดี

สร้าง dashboard ของ habit tracker

ผลที่ได้จะ generic เพราะ Claude ต้องเดาเองหมด

Prompt ที่ดี

สร้าง dashboard ของ habit tracker app สำหรับคนทำงาน tech วัย 25-35 ที่อยากสร้างนิสัยประจำวัน เช่น ออกกำลัง อ่านหนังสือ meditate

สไตล์ clean minimal อารมณ์เดียวกับ Linear หรือ Notion ใช้ dark mode เป็นค่าตั้งต้น typography ใช้ฟอนต์ Inter เน้น spacing ปลอดโปร่ง

สิ่งที่อยากให้เห็นเด่นสุดคือ streak ของแต่ละ habit เพราะเป็นตัวเลขที่คนติดงอมแงม รวมถึงปุ่ม "done today" ที่กดง่าย

ใส่ habit ตัวอย่าง 4 อัน ได้แก่ Exercise, Read 30min, Meditate, Deep Work 2hr

ความต่างของ prompt สองอันนี้อยู่ที่อันที่สองให้ context, audience, reference และ priority ครบ Claude ไม่ต้องเดาเอง ผลที่ออกมาจะใกล้ภาพในหัวของคุณมากขึ้นเยอะ

พอกด enter แล้วรอสักครู่ canvas ตรงกลางจะมี dashboard เวอร์ชันแรกขึ้นมา

Step 3: Refine ด้วย Inline Comments

เวอร์ชันแรกมักจะไม่ตรงใจ 100% ต้องมองว่านี่คือจุดเริ่ม ไม่ใช่งานสุดท้าย วิธีแก้ที่เร็วที่สุดคือใช้ inline comment

วิธีใช้คือคลิกจุดที่อยากแก้บน canvas แล้วพิมพ์ comment ลงไป Claude จะอ่านแล้วแก้ให้ ทำงานแบบเดียวกับ comment ใน Figma แต่มี AI ลงมือแก้ให้

ตัวอย่าง comment ที่ผมใช้จริง

• ปักที่ streak number ว่า "ทำให้เด่นขึ้น ลองใช้ gradient จาก orange ไป red ให้รู้สึกร้อนแรง"
• ปักที่ header ว่า "เปลี่ยน greeting เป็น personalized เช่น 'Good evening, Krish' และแสดงเวลาปัจจุบันด้วย"
• ปักที่ พื้นที่ว่างด้านขวา ว่า "ใส่ weekly view เป็น heatmap แบบ GitHub contribution graph"

Tip ส่วนตัว อย่าแก้ทีละอันแล้วรอ ให้ใส่ comment หลายๆ จุดพร้อมกันไปเลย แล้วให้ Claude ประมวลผลในรอบเดียว เร็วกว่าและ consistent กว่า เพราะ AI เห็นภาพรวมก่อนลงมือ

Step 4: Edit เลือก component แล้วปรับตรงจุด

Inline comment เหมาะกับการบอกทิศทางกว้างๆ ส่วน Edit ใช้ตอนที่อยากแก้ component แบบเจาะจง

วิธีใช้คือกดตรง Edit ขวาบน แล้วคลิกตรง component ที่เราอยากจะปรับ มันจะมี panel ขึ้นมาทางขวาให้เราปรับสี ปรับขนาดไหน เหมือนปรับ css เลยครับ

ใช้ Tweaks แล้วรู้สึกเหมือนทำงานกับ designer เราสามารถปรับสี ปรับขนาดระดับ pixel แล้วดูผลได้จริงเลย

Step 5: Custom Sliders ให้ Claude สร้าง control ให้คุณเล่นเอง

ข้อนี้คือฟีเจอร์ที่ผมชอบที่สุด และไม่เคยเห็นในเครื่องมือตัวอื่นเลย

เวลา fine-tune ผ่านการพิมพ์มักจะช้า เช่น "ขยับ spacing ใหญ่ขึ้นหน่อย... อืม เล็กไปนิด... ใหญ่กว่าเดิมแต่น้อยกว่าเมื่อกี้..." สิบรอบก็ยังไม่ลงตัว

Custom sliders แก้ปัญหานี้ด้วยการให้ Claude สร้าง UI control ขึ้นมา แล้วคุณเลื่อนปรับเองได้ทันที

แค่พิมพ์ขอ Claude ตรงๆ เช่น

ขอ slider 3 ตัวให้ผมปรับborder-radius ของ card (0 ถึง 24px)gap ระหว่าง card (8 ถึง 32px)opacity ของ background gradient (0 ถึง 100%)

Claude จะสร้าง panel ที่มี slider ครบทั้งสามตัวมาให้ พอเลื่อน canvas ก็อัพเดทสดทันที

ใช้ได้กับทุกอย่าง ทั้ง font size, color intensity, animation duration, padding หรือจะขอ control แปลกๆ อย่าง "slider ปรับความ playful ของ design" ก็ได้ Claude ตีความให้เอง

จุดนี้เองคือสิ่งที่ทำให้ Claude Design ต่างจาก v0 หรือ Lovable ชัดสุด เพราะไม่ได้สร้างแค่รูป แต่สร้าง tool ให้คุณใช้ fine-tune ต่อได้ด้วย

Step 6: Handoff ส่งต่อให้ Claude Code

dashboard สวยเรียบร้อยแล้ว เหลือแค่ package เป็นไฟล์ส่งต่อ

Claude Design มี export ให้เลือกหลายแบบ ทั้ง PDF, PPTX, ZIP, Canva, HTML และ Export to Claude Code ตรงๆ

เลือก Handoff to Claude Code แล้ว Claude Design จะ ให้เรา copy prompt เพื่อส่งต่อให้ Claude Code เลย หรือจะอัพ load zip file แล้วเราแตกไฟล์เป็นโฟลเดอ แล้วไปพิมพ์คำสั่ง claude ใน folder นั้นก็ได้

Mindset ที่อยากฝากทิ้งท้าย

อย่าคิดว่า Claude Design คือเครื่อง generate รูปสวยๆ ให้ฟรี ให้คิดว่าเป็น junior designer ที่รับ direction เร็วมาก คุณยังต้องรู้ว่าตัวเองอยากได้อะไร และต้องมี taste พอที่จะตัดสินว่าอันไหนดีอันไหนพัง

คนที่ไม่มี design sense เลย พอใช้ Claude Design แล้วจะได้งานที่ดูโอเค แต่ไม่โดดเด่น ส่วนคนที่มี taste ชัดเจน พอใช้แล้วจะรู้สึกเหมือนมี designer ส่วนตัวทำงานให้ตลอด 24 ชั่วโมง

ฝึกเขียน prompt ให้ specific ฝึกดู reference ดีๆ บ่อยๆ และฝึกให้ feedback ที่ชัดเจน skill พวกนี้สำคัญกว่าการจำ shortcut ทุกอันของ Figma หลายเท่า

สรุป 6 ขั้นตอนใช้ Claude Design

1. สร้าง Prototype Project
2. Prompt แรก บอก what, who, what matters ให้ครบ
3. Inline comments ปัก note บน canvas ให้ Claude แก้ทิศทาง
4. Edits เลือก component แล้วสั่งแก้แบบตรงจุด
5. Custom sliders ขอให้ Claude สร้าง control มาให้ fine-tune เอง
6. Handoff ส่งต่อไปให้ Claude Code

รวมแล้วใช้เวลาราว 30 ถึง 45 นาที ถ้าเทียบกับการเปิด Figma แล้วลากจากศูนย์ ประหยัดไปได้หลายชั่วโมงแน่นอน