ออกแบบ UI mockup

ร่างหน้าตาเว็บ/แอปด้วย AI

ความคืบหน้าเวิร์กช็อป

รู้ใน 30 วิ

ร่างหน้าตาเว็บหรือแอปด้วย AI ได้ในไม่กี่นาที จุดสำคัญคือ Claude Code เปลี่ยน mockup เป็นเว็บจริงที่รันได้ ไม่ใช่แค่ภาพนิ่ง

v0 = ร่างไวFigma AI = ดีไซน์Claude Code = โค้ดจริง

เลือกทางร่าง UI

ร่างหน้าตาด้วยตัวไหนก็ได้ แต่ตอนทำเป็นเว็บจริงให้ส่งต่อ Claude Code

▲

พิมพ์อธิบายแล้วได้หน้า UI พร้อมโค้ด React เหมาะร่างเร็วและลองหลายแบบ

ร่าง+โค้ด

🎨

Figma AI

ร่างเลย์เอาต์และปรับดีไซน์ละเอียด เหมาะงานที่ต้องคุยกับทีมดีไซน์

ออกแบบภาพ

⚡

Claude Code

เปลี่ยน mockup หรือคำอธิบายเป็นเว็บ HTML/CSS จริงที่เปิดรันได้ในเครื่องคุณ

ทำเป็นเว็บจริง

เครื่องมือดีไซน์ให้แค่ ภาพ mockup แต่ Claude Code เปลี่ยนภาพนั้นเป็น เว็บจริงที่รันได้ เริ่มร่างที่ไหนก็ได้ แล้วจบที่ Claude Code

ดู Claude Code เปลี่ยน mockup เป็นเว็บ

โยนภาพ mockup ให้ แล้วดูมันสร้างหน้าเว็บจริงทีละขั้น

ดู Claude Code ทำงาน

คุณนี่คือภาพ mockup หน้า landing page ช่วยทำเป็นเว็บ HTML จริงให้หน่อย

›ดูภาพ mockup แล้วแยกส่วน header, hero, ปุ่ม CTA
›สร้างไฟล์ index.html และ style.css ตามเลย์เอาต์
›จัดสี ฟอนต์ และระยะห่างให้ตรงกับภาพ
›รันเซิร์ฟเวอร์ดูผลที่ localhost
✓เสร็จ ได้หน้าเว็บจริงที่กดปุ่มได้ ไม่ใช่แค่ภาพ

ลองเลยจับมือทำ

เปิด v0 (v0.dev) แล้วพิมพ์อธิบายหน้าที่อยากได้เป็นภาษาคน จะได้ร่าง UI พร้อมโค้ด
เซฟภาพ mockup หรือก๊อปโค้ดที่ได้เก็บไว้
เปิดเทอร์มินัลพิมพ์ claude แล้วลากภาพ mockup เข้าไปพร้อม prompt นี้
พิมพ์ Prompt นี้
นี่คือภาพ mockup หน้าเว็บที่ฉันร่างไว้ ช่วยทำเป็นเว็บ HTML/CSS จริงให้หน่อย ใช้เลย์เอาต์ สี และฟอนต์ตามภาพ ทำให้ responsive บนมือถือด้วย แล้วบอกวิธีเปิดดูผล
ดู Claude Code สร้างไฟล์แล้วเปิดดูหน้าเว็บจริงในเบราว์เซอร์ ปรับต่อด้วยคำสั่งภาษาคนได้เลย

ลองใช้ Prompt นี้

ช่วยร่าง UI หน้า [landing page/หน้า login/dashboard] สำหรับ [ประเภทแอป] มีส่วน [เช่น header, hero, ปุ่ม CTA, ส่วนรีวิว] สไตล์ [มินิมอล/สดใส] โทนสี [สีหลัก] ทำเป็น HTML/CSS จริงที่ responsive และเปิดรันได้

สรุปเวิร์กช็อป

ร่าง UI เร็ว ๆ ด้วย v0 หรือออกแบบละเอียดใน Figma AI ตามความต้องการ
ขั้นเปลี่ยน mockup เป็นเว็บจริงที่รันได้ ให้ Claude Code ทำ เพราะมันเขียนโค้ดและรันในเครื่องได้
ลากภาพ mockup ให้ Claude Code โดยตรง แล้วสั่งปรับต่อด้วยภาษาคนได้เลย

← ก่อนหน้าสร้าง brand kit เวิร์กช็อปถัดไป →ทำคลิปสั้นด้วย AI