Claude Design No Break New Arrival
Claude Design was relaunched and shared it.
https://claude.ai/design
.
✅ → It takes a few minutes. Order it to do the UI in front of the app.
✅ → Continue with an interactive Prototype.
✅ → Let's build a design system with token.
✅ → Request a Storybook of all components.
.
So fast that the process that used to take days was squeezed to minutes.
.
But there are still restrictions to be mentioned.
❎ not → Claude Design can not export works directly to Figma, as Google Stitch can.
.
For teams whose main workflow is on Figma, this is still the point to wait for updates.
Let's see who will develop superior features in the future.
.
The competition in AI design tools is getting more and more intense.
.
🤔 The only thing that's certain is that designers keep adjusting to the tools.
.
Because if we can't resist, we have to join, hahahaha. Let's try. 🤣
.
P.S. Add the Claude Pro Plan.
.
.
🔥 is almost full. UXUI Model 49 - UXUI Process Complete Finish In One Place
.
Unlocked Skill UX / UI Model 49
25, 26 April and 10, 23, 24 May 69
✅ /
.
👉 Reservation / Inquiry
FB PAGE: https://m.me/uxuistudio9
.
# uxuistudio # uxdesign # uidesign # Graphicdesign # uxui# uxuiworkshop # uxworkshop # uiworkshop
# Because we understand what newbies want
ถ้าใครกำลังค้นหาเรื่อง “claude ui / claude design” แล้วอยากรู้ว่ามันช่วยงาน UX/UI ได้จริงแค่ไหน นี่คือสิ่งที่ผมลองแล้วเวิร์ก (และสิ่งที่ยังต้องทำมืออยู่) แบบประสบการณ์ใช้งานจริงๆ 1) เริ่มต้นให้ได้ผลเร็ว: เขียนโจทย์ให้ชัด ผมพบว่า Claude Design ทำงานเร็วมากเมื่อเรา “ล็อกโจทย์” ตั้งแต่ต้น เช่น ประเภทแอป + ผู้ใช้ + flow หลัก + สไตล์ภาพรวม ตัวอย่างที่ผมลองคือแอปจองตั๋วรถทัวร์ (แนว “Tour by Claude”) เลยกำหนดหน้าที่อยากได้ชัดๆ: หน้าหลัก, ผลการค้นหา, เลือกที่นั่ง, E-ticket/QR Code แล้วขอให้ทำเป็น mobile-first ทิปเล็กๆ: ระบุด้วยว่าอยากได้แนว material/ios-ish, โทนสี, ขนาดตัวอักษร, และสถานะหน้าจอ (loading/empty/error) จะได้ UI ที่ใช้งานต่อได้จริงมากขึ้น 2) ให้มันทำ “Prototype แบบ interactive” แล้วเช็ค flow จุดที่ผมชอบคือมันต่อ flow ให้ดูได้ไวมาก เหมาะกับช่วง validate ไอเดีย เช่น จากหน้าผลการค้นหา → เลือกรอบ → เลือกที่นั่ง → ชำระเงิน → ได้ E-ticket (มี QR) สิ่งที่ควรเช็คเองคือ copywriting, state ของปุ่ม (disabled/enabled), และ edge cases เช่น ไม่มีที่นั่งว่าง หรือกรอกข้อมูลไม่ครบ 3) Design System + Tokens: เอาไปใช้เป็นฐานมาตรฐานทีมได้ ลองสั่งให้ generate Design System พร้อม token แล้วรู้สึกว่าประหยัดเวลา “ตั้งต้น” มาก โดยเฉพาะสี (primary/secondary/surface), spacing, radius, shadow, typography scale และ component states (default/hover/pressed/disabled) แนะนำให้ขอเพิ่ม: - ชื่อ token ให้เป็นระบบ (เช่น color.primary.500) - กติกา accessibility คร่าวๆ (คอนทราสต์, ขนาดตัวอักษรขั้นต่ำ) - รายการ component ที่จำเป็นกับโปรเจกต์ (button, input, card, seat selector, ticket) 4) Storybook ของ components: เหมาะกับทีม dev ที่อยากเห็นภาพเร็ว การขอ Storybook ช่วยให้เห็นการแตก variant ของคอมโพเนนต์ไวขึ้น เช่น Button หลายขนาด/หลายสถานะ หรือ Card หลายรูปแบบ แต่ผมยังแนะนำให้ทีม dev ช่วยรีวิวโครงสร้าง props และ naming อีกที เพื่อให้เข้ากับ codebase จริง 5) ข้อจำกัดที่เจอ: ยังไม่ export ไป Figma ตรงๆ อันนี้เป็นจุดตัดสินใจสำคัญสำหรับหลายทีม เพราะ workflow หลักอยู่ใน Figma ถ้าต้องย้ายไป-มา อาจมี friction วิธีแก้ชั่วคราวที่ผมใช้คือเอา Claude Design เป็น “ตัวเร่งรอบแรก” (draft) แล้วค่อยย้ายไปจัดระเบียบใน Figma ด้วยมือ (หรือใช้วิธี capture/spec เป็น reference) สรุป: Claude Design เหมาะมากกับการทำ draft UI, ทดลอง flow, ตั้งต้น design system และสื่อสารกับทีมให้เห็นภาพเร็ว แต่ถ้าทีมคุณต้องส่งมอบไฟล์ Figma เป็นหลัก ให้เผื่อเวลาสำหรับขั้นตอนย้ายงาน/จัดระบบซ้ำอีกนิดครับ