จากโพสต์ที่แล้วที่นั่งตื่นเต้นกับ Claude Design มา https://x.com/cattodata/status/2045384160152522762?s=20

วันนี้มาลองใช้ Claude Design กับโปรเจกต์จริงแล้วฮะ เลยอยากสรุปแบบคนลองของ เผื่อใครกำลังสงสัยว่ามันใช้ยังไง และต่างจากพวก AI ทำ UI ทั่วไปแค่ไหน 🎨

ออกตัวก่อนว่าไม่ได้เป็น Designer ใด ๆ ตอนนี้เป็น AI Engineer ที่ลองสร้างเว็บเอง ก่อนหน้านี้ก็พยายามเอา Skill, MCP หลายตัวมาช่วยว่าทำยังไงให้มันสวยขึ้น จนเกือบจะไปอ่าน UI/UX เองแล้ว แต่ก็ยังไม่ค่อยโดนใจเท่าไหร่

พอเจอ Claude Design คือแบบ…อึ้งเลย สวยจริง

Claude Design คืออะไร

มันคือ AI design tool ตัวใหม่จาก Anthropic ที่เพิ่งปล่อยมาไม่นาน ตอนนี้ยังเป็น research preview อยู่ และเข้าได้สำหรับคนที่ใช้ Pro ขึ้นไปผ่าน Anthropic Labs

พูดง่าย ๆ คือมันเป็น design tool ที่ built on top of Claude โดยตรง

เพราะงั้นมันเลยไม่ใช่แค่ “AI ช่วยออกแบบ” แบบทั่ว ๆ ไป แต่มัน คุยได้ ปรับได้ และอ่าน context รอบ ๆ ได้ด้วย ไม่ว่าจะเป็น code, ไฟล์ หรือ reference จากของจริง

ถ้าเราเชื่อม GitHub ไว้ มันก็ไปดู codebase เราได้จริง หรือถ้ายังไม่อยากต่อ GitHub จะเริ่มจาก text prompt, รูป, หรือไฟล์เอกสารก่อนก็ได้เหมือนกัน

อันนี้คือจุดที่รู้สึกว่ามันต่าง เพราะมันไม่ได้บังคับว่าต้องเริ่มจากศูนย์แบบไม่มีอะไรเลย หรือจะต้องมี codebase ก่อนเสมอไป

แล้วที่ขนลุกคือมันไม่ได้รับ prompt แล้วเดาอย่างเดียว มันจะถามต่อเหมือนสัมภาษณ์เราด้วย ว่าอยากได้ประมาณไหน ชอบโทนแบบไหน อยากให้มันไปทางไหนต่อ

ฟีลมันเหมือนคุยกับ UI/UX จริง ๆ มากกว่า

พอมันเริ่มเห็นของ มันก็จะเริ่มจับทางได้ว่าโปรเจกต์นี้ใช้โทนประมาณไหน component น่าจะไปทรงไหน แล้วค่อย redesign ต่อบนของเดิม

วิธีเริ่มคร่าว ๆ จากที่ลองวันนี้

1) ให้มันเกาะ codebase ของจริงก่อน

อันนี้เป็นจุดที่ชอบมาก

พอมันเห็น codebase จริง มันไม่ใช่แค่ “ช่วยออกแบบหน่อย” แต่มันเริ่มกลายเป็น “ช่วยดูของที่มีอยู่ แล้วทำให้มันดีขึ้น” มากกว่า

สำหรับคนที่ไม่ได้เริ่มจาก Figma หรือไม่ได้มี designer นั่งข้าง ๆ ตลอดเวลา อันนี้ตอบโจทย์มาก เพราะก่อนหน้านี้คือโค้ดไปแล้ว แล้วพยายามลาก Skill, MCP มาช่วยทำให้สวยขึ้นยังไงก็ไม่สุดสักที

แต่รอบนี้คือ…สวยเลย

2) เข้า Claude Design แล้วสั่งได้เลย

วันนี้ที่ลองคือเข้าไป New Prototype แล้วให้มันสร้าง Design System ก่อน

จากนั้นก็ให้มันอ่าน codebase นี้ แล้ว redesign หน้าเว็บให้หน่อย

หรือถ้ายังไม่มี codebase ก็เริ่มจาก prompt เปล่า ๆ ได้เหมือนกัน มันเริ่มจากศูนย์ได้ แล้วถ้ามี context เพิ่มค่อยโยนเข้าไปทีหลังก็ยังได้

แค่นี้มันก็เริ่มทำงานแล้ว

สิ่งที่ว้าวคือหลายครั้งยังไม่ทันบอก palette ยังไม่ทันบอกฟอนต์ละเอียด มันก็พอจับโทนจากของเดิมได้เองพอสมควร

โดยเฉพาะถ้ามีของเดิมให้มันดู มันจะจับทางได้เร็วมาก

3) ดูบน canvas ได้เลย แล้วคุยแก้ต่อได้ทันที

อันนี้ชอบมาก เพราะมันไม่ใช่ generate แล้วจบ

เราดู output ต่อได้ แล้วคุยแก้ต่อในแชตได้เลย เช่นบอกว่า

ฟีลมันเหมือนมีคนช่วยทำ design ให้อยู่ตรงนั้น แล้วเราก็เห็นภาพเร็วมากว่าที่ขอไปมันออกมาเป็นยังไง

4) พอเริ่มโอเคก็ export ต่อได้

มันส่งต่อได้หลายแบบพอสมควร

จะเอาไป present ต่อ แชร์ให้ทีม review หรือเอาไปทำต่อใน workflow อื่นก็สะดวกขึ้นเยอะ

ตอนนี้ที่ลองคือสามารถแชร์ต่อให้ Claude Code ได้เลย โดยใช้คำสั่งที่ก๊อปวางได้ แต่เหมือนงานนี้ยังไม่ได้เปิดเป็น public เลยยังคุยกันตรง ๆ ไม่ได้

สุดท้ายเลย export เป็น zip แล้วเอาไปคุยต่อใน Claude Code แทน

ตรงนี้เลยเริ่มรู้สึกว่า มันไม่ใช่แค่ tool ไว้ “ทำ mockup สวย ๆ” แล้ว แต่มันเริ่มแตะ flow งานจริงแล้ว

5) จุดที่โหดจริงคือมันวนแก้ผ่านแชตได้เรื่อย ๆ

อันนี้คือส่วนที่รู้สึกว่าโคตรอันตราย 555

เพราะมันไม่ได้เป็นฟีล generate แล้วไม่พอใจก็สั่งใหม่ทั้งก้อนอย่างเดียว แต่มันค่อย ๆ แก้ต่อผ่านแชตได้เรื่อย ๆ หรือจะกดแก้เองทีละส่วนก็ได้

ไม่ต้องรอ Gen ใหม่ทุกครั้ง

สรุปหลังลองมาครึ่งวัน

เมื่อก่อนยังบ่นอยู่เลยว่าใช้ MCP ใช้ Skill ลากอะไรมาก็เว็บไม่ค่อยสวย นั่งโค้ดไปกรี๊ดไป ถึงขั้นคิดว่าน่าจะต้องไปอ่าน UI/UX เองเพิ่มแล้วมั้ง

ตอนนี้ก็ยังคิดว่า fundamental สำคัญ ยังไงก็ควรเรียนอยู่ดี

แต่ก็ต้องยอมรับว่าเครื่องมือพวกนี้มันลดกำแพงลงไปเยอะมากจริง ๆ

โดยเฉพาะสำหรับคนที่ไม่ได้มาจากสาย design โดยตรง แต่อยากทำของให้ดูดีขึ้นเร็วขึ้น อันนี้เป็นอะไรที่น่าลองมาก

#claude #claudedesign #cattodata