Vibe Code 1 App 1 Day: Claude Design + Claude Code Workshop

Build -> Deploy -> Ship ภายในวันเดียว

ปลาใหญ่ไม่ได้กินปลาเล็กอีกต่อไปแล้ว ปลาที่ "ใช้ AI เป็น" ต่างหากที่จะกินรวบทุกตลาด

6 มิถุนายน 2569 ที่ผ่านมา เจ้าของธุรกิจ นักการตลาด และผู้บริหารมารวมตัวกันใน Workshop ชื่อ 1 App 1 Day: Claude Design + Claude Code ซึ่งดำเนินการโดย โค้ชบอยด์ อัจฉริยะ ดาโรจน์ ไม่ใช่มาฟังบรรยาย แต่มา ลงมือสร้างแอปจริง และ Deploy ได้จริงก่อนเที่ยง

ทำไมต้องเรียนเรื่องนี้ตอนนี้

สิ่งที่เคยต้องใช้เงิน 500,000+ บาท และเวลา 3–6 เดือน กับทีม Dev วันนี้ทำได้ใน 1 วัน ด้วยตัวคุณเอง

สิ่งที่ต้องรอ Developer หลายรอบ หลายขั้นตอน วันนี้ Claude Code ทำงานหนักแทน คุณแค่กำหนดทิศทาง

สิ่งที่ต้องทีม 10 คน ขยายตัวช้า วันนี้ AI Agents ทำงานแบบอัตโนมัติ ไม่ต้องมีคนดูแลตลอดเวลา

Workflow ทั้งวัน: Design → Code → Deploy

สิ่งที่ทำให้ Workshop นี้ต่างจากคอร์ส AI ทั่วไปคือโครงสร้างที่ออกแบบให้ทุกอย่างต่อเนื่องกันเป็น pipeline เดียว ตั้งแต่ออกแบบ UI ด้วย Claude Design ไปจนถึง deploy บน Vercel พร้อม Supabase database ไม่ต้อง copy-paste ไม่ต้องอธิบายซ้ำ Claude Design แพ็ก design spec ทั้งหมดเป็น Handoff Bundle แล้วส่งให้ Claude Code ด้วย instruction เดียว

ช่วงเช้า: จาก Idea สู่ Live URL

Workshop เริ่มต้นด้วยการให้ทุกคน กำหนด scope ของแอปตัวเอง กฎสำคัญคือเลือก app ที่คุณอยากใช้จริงๆ ไม่ใช่ app ที่ดูเก่งหรือซับซ้อน เพราะเป้าหมายคือ Finish ได้ใน 1 วัน

ถัดมาคือ Claude Design เปิด claude.ai/design วาง App Brief เข้าไป ได้ UI Mockup ออกมาพร้อม Handoff Bundle ที่ Claude Code อ่านได้ทันที ไม่ต้องออกแบบด้วยมือเลยแม้แต่ pixel เดียว

จากนั้น Claude Code รับ bundle นั้น scaffold project ขึ้นมา และก็ Run ให้ดูในเครื่องก่อน deploy คำสั่งหลักที่ใช้ทั้งวันมีแค่ไม่กี่อย่าง

โค้ชบอยด์เน้นย้ำตลอดวันว่า:

Commit บ่อยๆ เป็นนิสัยที่ดีที่สุดที่จะได้จาก workshop นี้ ถ้า Claude พัง ย้อนกลับได้เสมอ

เป้าหมายช่วงเช้า: ได้ Live URL บน Vercel ก่อน 12:00 น.

ช่วงบ่าย: ต่อยอดแบบที่ Developer มืออาชีพทำ

หลังจากมี app ที่ deploy ได้แล้ว ช่วงบ่ายเป็นการ ต่อยอดด้วยเครื่องมือระดับโปร

Sub-agents คือ Claude Code ที่สามารถรัน task หลายอย่างพร้อมกันในแบบ background ได้ เช่น review code ขณะเขียน test พร้อมกัน หรือรัน smoke test บน live URL ขณะ fix bug ในเครื่อง workshop ในวันนี้ใช้ 4 Custom Agents ที่ทำงานเป็นทีม:

code-reviewer หา bug, security issue, performance ก่อน deploy
unit-test-writer เขียน unit tests ให้อัตโนมัติ
code-debugger debug อย่างเป็นระบบ ตั้งแต่ reproduce จนถึง verify fix
tester รัน Playwright smoke test บน live URL จริง

MCP + Supabase คือการเชื่อม Claude Code เข้า database โดยตรงผ่าน Model Context Protocol Claude สามารถสร้าง table เขียน SQL query และตั้งค่า Row Level Security ได้โดยไม่ต้องเปิด dashboard เลย

Hooks ช่วยตั้งค่า automation รอบการทำงานของ Claude เช่น run lint ทุกครั้งที่แก้ไฟล์ หรือส่ง desktop notification เมื่อ Claude ทำเสร็จ ทั้งหมดนี้ตั้งค่าในไฟล์

.claude/settings.json

ไม่กี่บรรทัด

ก่อน Show & Tell: QA ด้วย Claude

ก่อนที่ทุกคนจะ present ผลงาน workshop สอนวิธี QA ด้วย Claude เอง ให้ Claude review ความปลอดภัย ตรวจว่า API key ไม่หลุดไป client-side code ตรวจ RLS policy และหา bug ที่มองข้ามไป ทั้งหมดด้วย prompt เดียว

ปิดท้ายด้วย Show & Tell แต่ละคน demo live URL ที่สร้างขึ้นมาเอง พร้อมเล่า prompt ที่ประทับใจที่สุดในวัน และสิ่งที่จะ iterate ต่อหลังจากนี้