คู่มือเรียงตามลำดับของวันเรียน แต่ละ Workshop มีเป้าหมาย เครื่องมือที่ใช้ ขั้นตอนทีละข้อ และ Prompt Card ภาษาไทยที่คัดลอกไปวางใน Claude Design ได้ทันที หลังเรียนใช้เล่มนี้เป็นคู่มือหยิบใช้ เมื่อต้องทำสื่อชุดใหม่ให้แบรนด์จริงของคุณ
ผู้สอนสาธิต → คุณทำตาม Prompt Card → สั่งสองงานคู่กันระหว่างรอผล ถ้าตามไม่ทัน มี Checkpoint files ให้ทำต่อจากจุดเดียวกับเพื่อนได้ทันที
เปิดหน้า Playbook และ Prompt Cheat Sheet ท้ายเล่มไว้ใกล้มือ เปลี่ยนข้อมูลในวงเล็บเป็นแบรนด์ของคุณ แล้วทำซ้ำได้ทั้งชุด
ข้อความในกล่องนี้คือ Prompt Card คัดลอกไปวางในช่องพิมพ์ของ Claude Design ได้เลย ส่วนที่อยู่ใน [วงเล็บสีแดง] เปลี่ยนเป็นข้อมูลแบรนด์ของคุณได้คู่มือฉบับเว็บมีปุ่ม "คัดลอก Prompt" ที่มุมกล่อง กดแล้วนำไปวางได้ทันที
สิ่งที่ควรเห็นหรือควรมี เมื่อทำแต่ละขั้นสำเร็จ
เคล็ดลับ ข้อควรระวัง และทางสำรองของแต่ละ Workshop
คุณเป็นคนคุมทิศทาง — เขียน brief ให้ชัด เลือกโมเดลให้เหมาะ ตรวจข้อเท็จจริงเอง และเลือก export ให้ตรงปลายทาง ทั้งวันใช้แบรนด์ตัวอย่างเดียวคือ "ชาละมุน" และ Design System เดียว ("Chalamun DS") ที่สร้างครั้งเดียวช่วงเช้า
ไม่ต้องเป็นดีไซเนอร์และไม่ต้องเขียนโค้ด จบวันคุณมี ชุดสื่อเปิดตัวแบรนด์ 14 ชิ้น ที่หน้าตาเป็นแบรนด์เดียวกัน พร้อม Playbook สำหรับทำซ้ำกับธุรกิจจริงได้ตั้งแต่วันถัดไป
เตรียมให้พร้อมก่อนวันเรียน โดยเฉพาะบัญชีและเบราว์เซอร์ เพราะทุก Workshop ใช้ต่อกันตลอดวัน
Claude Design ครบทุกเครื่องมือบนหน้าแรก · การเขียน brief และการแก้งาน · ภาษาไทยในงานออกแบบ · ภาพประกอบด้วย ZenityX Studio เฉพาะส่วนที่ใช้ในงาน · การต่อยอดจากโค้ดโดยไม่เขียนโค้ดเอง · โควตาและการเลือกโมเดล
การเขียนโค้ดเอง · Figma หรือ Photoshop · การพัฒนาแอปจริงจนขึ้น store · เทคนิคเจนภาพหรือวิดีโอเชิงลึก (สอนในคอร์ส AI Content Workshop) · Handoff to Claude Code เป็นการสาธิตเท่านั้น
เครื่องมือออกแบบของ Anthropic Labs ที่ claude.ai/design — เริ่มงานที่หน้า home แล้วแก้ต่อบนหน้า canvas
อัปเดตบ่อย ชื่อปุ่ม เมนู โมเดล และรูปแบบ export อาจต่างตามแพ็กเกจหรือช่วงเวลา ผู้สอนจะปรับเนื้อหาให้ตรงหน้าจอจริงในวันเรียน และมีทางสำรองทุก Workshop · แชทยาวมาก ระบบจะเสนอ "Start a new chat to save … tokens" กด New chat ได้เลย ไฟล์โปรเจกต์ยังอยู่
Public Workshop · Hands-on 1 วัน 10:00–17:00 · 8 Workshop · พักกลางวัน 12:30–13:30
| เวลา | ช่วง | หัวข้อ |
|---|---|---|
| ภาคเช้า · FOUNDATION | ||
| 10:00–10:30 | Workshop 1 | Overall Introduction: Claude Design 101 + First Win |
| 10:30–11:30 | Workshop 2 | Brand DNA: Color + Type → Design System |
| 11:30–12:30 | Workshop 3 | From Sketch to Landing Page |
| 12:30–13:30 | พัก | พักรับประทานอาหาร · ทีมงานช่วยเช็คโควตาและแจก Checkpoint files |
| ภาคบ่าย · CREATE & SHIP | ||
| 13:30–14:15 | Workshop 4 | Print & Inbox: Flier + HTML Email |
| 14:15–15:00 | Workshop 5 | Pitch Pack: Diagram + Slides |
| 15:00–15:45 | Workshop 6 | App Prototype from Code: </> + Mobile App + UI Mockups |
| 15:45–16:30 | Workshop 7 | 3D & Motion: 3D Object + Animation |
| 16:30–17:00 | Workshop 8 | Final Project: Launch Kit Showcase |
ตารางเวลาเป็นแนวทาง ผู้สอนอาจปรับเวลาแต่ละช่วงให้เหมาะกับความคืบหน้าของผู้เรียน โดยเนื้อหาและผลลัพธ์หลักยังครบถ้วน
ใช้ทั้งวัน ทุก Workshop — ข้อ 3 เรื่องการเลือกโมเดลช่วยให้โควตาพอถึงงานสุดท้าย
| # | กติกา | ทำอย่างไร |
|---|---|---|
| 1 | Claude Design สร้างภาพถ่าย/ภาพคนไม่ได้ | ภาพสินค้าเจนด้วย ZenityX Studio (GPT Image) · ภาพคนด้วย Nano Banana Pro → แนบเข้างานผ่านปุ่ม + |
| 2 | โควตาใช้ร่วมกับ Claude ทั้งบัญชี | วางแผนให้พอทั้งวัน ใช้รุ่นเร็วร่างงาน เก็บรุ่นเก่งไว้งานสำคัญ |
| 3 | กฎเลือกโมเดล | ดูตารางด้านล่าง · ปรับ effort ได้ (Low / Medium / High) |
| 4 | สั่งสองงานคู่กัน | ระหว่างรอผลงานชิ้นหนึ่ง เปิดอีก template ทำคู่กัน (Workshop 1, 4, 6) |
| 5 | เก็บงานเดิมก่อนลองแนวใหม่ | สั่ง Save what we have and try a completely different approach |
| 6 | ตรวจข้อมูลเอง | ตัวเลขจาก Research ต้องคลิกดูแหล่งอ้างอิงก่อนนำไปใช้ทุกครั้ง |
| 7 | ภาษาไทย | ใช้ฟอนต์ไทยจาก Google Fonts ระบุชื่อให้โหลดจริง · line-height ≥ 1.6 · ไม่ใส่ letter-spacing กับภาษาไทย · เช็คฟอนต์ทุกครั้งหลัง export (PPTX และอีเมลเพี้ยนง่าย) |
ร่างงานและงานเบา เช่น Résumé และ Wireframe รอบแรก
งานทั่วไปและรอบแก้ เช่น แก้คลิปทีละฉากใน Workshop 7
สร้าง Design System (WS2) และเก็บงานสำคัญ เช่น Landing Page (WS3)
ชื่อรุ่นอาจเปลี่ยนตามหน้าจอจริง ให้ยึดหลัก "เร็ว / กลาง / เก่ง" เป็นสำคัญ
ชาละมุน (Chalamun) ชาพร้อมดื่มหวานน้อย ขวดแก้ว 250 มล. — ทุก Workshop ต่อยอดจากแบรนด์นี้ หรือจะใช้แบรนด์ของคุณเองก็ได้ (เฉพาะโลโก้และภาพที่มีสิทธิ์ใช้)
ข้อมูลสมมติเพื่อการเรียน
Brand Brief คือไฟล์ที่แนบเข้า Research (Workshop 1) และ Design System (Workshop 2) ยิ่งข้อมูลครบ งานรอบแรกยิ่งใกล้เคียงที่ต้องการ ถ้าใช้แบรนด์ตัวเอง ให้เตรียมข้อมูลตามคอลัมน์ซ้ายให้ครบ
| ข้อมูลที่ควรเตรียม | ตัวอย่าง: ชาละมุน (ข้อมูลสมมติเพื่อการเรียน) |
|---|---|
| ชื่อแบรนด์ | ชาละมุน (Chalamun) |
| สินค้าและบรรจุภัณฑ์ | ชาพร้อมดื่มหวานน้อย ขวดแก้ว 250 มล. |
| รุ่น / รสชาติ | 3 รส: ชาเขียวมะลิ · ชาไทยหวานน้อย · อู่หลงพีช |
| ราคา | 55 บาท/ขวด |
| ช่องทางขาย | LINE OA · Pop-up · ร้านค้าส่ง (ร้านกาแฟ ซูเปอร์มาร์เก็ต) |
| วันเวลาและที่ขายหน้าร้าน | Pop-up ทุกเสาร์–อาทิตย์ 10:00–18:00 |
| ผู้ก่อตั้ง | คุณมิ้นท์ (ใช้ทำโปรไฟล์ผู้ก่อตั้งใน Workshop 1 และหน้าทีมใน Pitch Deck) |
| น้ำเสียงของแบรนด์ | เป็นกันเองแต่มืออาชีพ |
| ทิศทางภาพลักษณ์ที่จะลอง | ไร่ชายามเช้า · ชาไทยร่วมสมัย · มินิมอลพรีเมียม (เลือก 1 ทิศทางใน Workshop 2) |
| ไฟล์ที่ใช้แนบ | โลโก้ + ภาพขวดชาจาก Starter Pack · ภาพที่เจนจาก ZenityX Studio |
| ตลาด คู่แข่ง กลุ่มลูกค้า | ยังไม่ต้องรู้ — ให้ Research หาใน Workshop 1 แล้วตรวจแหล่งอ้างอิงเองก่อนใช้ |
| ข้อห้าม | ใช้เฉพาะโลโก้และภาพที่มีสิทธิ์ใช้ · ห้ามใช้ตัวเลขที่ไม่มีแหล่งอ้างอิง |
สร้างครั้งเดียวใน Workshop 2 จากนั้นทุกงานให้เลือก Chalamun DS ใน dropdown Design system ก่อนกดส่ง ทุกชิ้นจึงออกมาเป็นแบรนด์เดียวกัน
เป้าหมาย: รู้จักทุกปุ่ม ตั้งกติกาโควตา แล้วสั่งงาน 2 ชิ้นคู่กัน ให้ได้ผลงานชิ้นแรกก่อน 10:30
วิจัยตลาดชาพร้อมดื่มแบบหวานน้อยในประเทศไทย สำหรับแบรนด์ [ชาละมุน] ตามไฟล์ Brand Brief ที่แนบ สรุป 1) คู่แข่ง 5 เจ้า พร้อมช่วงราคาต่อขวด 2) ช่องทางขายหลัก 3) กลุ่มลูกค้าที่โตเร็ว 4) โอกาสของแบรนด์ใหม่ 3 ข้อ ใส่แหล่งอ้างอิงทุกตัวเลข และแยกข้อเท็จจริงกับความเห็นให้ชัดทำโปรไฟล์ผู้ก่อตั้ง 1 หน้า A4 ของ [คุณมิ้นท์ ผู้ก่อตั้งชาละมุน] ภาษาไทย มีส่วน: แนะนำตัว 3 บรรทัด, เส้นทางก่อนตั้งแบรนด์, ความเชี่ยวชาญ 4 ข้อ, ความสำเร็จที่วัดได้ 3 ข้อ, ช่องทางติดต่อ ใช้ฟอนต์ไทยจาก Google Fonts และ line-height 1.6
รายงาน Research ใช้เวลารัน จึงสั่ง Résumé คู่กันไปเลย · ตัวเลขไหนเปิดแหล่งอ้างอิงไม่ได้ อย่านำไปใช้ต่อ
เป้าหมาย: เปลี่ยนสีและฟอนต์ที่ชอบให้เป็นระบบที่ AI จำได้ แล้วทดสอบระบบทันทีด้วยเอกสารแบรนด์
เสนอชุดสีและคู่ฟอนต์ 3 ทิศทางสำหรับแบรนด์ชาพร้อมดื่ม [ชาละมุน]: 1) ไร่ชายามเช้า 2) ชาไทยร่วมสมัย 3) มินิมอลพรีเมียม แต่ละทิศทางมีสี 5 สีพร้อมรหัส HEX และคู่ฟอนต์จาก Google Fonts ที่รองรับภาษาไทย (หัวข้อ + เนื้อหา) พร้อมตัวอย่างหัวข้อภาษาไทยจริงสร้าง Design System ชื่อ "Chalamun DS" จากชุดสีทิศทางที่ [2] โลโก้และ Brand Brief ที่แนบ กำหนด: สีหลัก/รอง/พื้นหลัง/ข้อความ, ฟอนต์หัวข้อและเนื้อหาภาษาไทย (line-height 1.6 ไม่ใส่ letter-spacing), ขนาดตัวอักษร 5 ระดับ, ปุ่ม 3 แบบ, การ์ด, ระยะห่าง 8 px grid, tone of voice เป็นกันเองแต่มืออาชีพ
ทำ Brand Book 3 หน้า A4 ของชาละมุน ใช้ Design System ที่เลือกไว้: หน้า 1 โลโก้และเรื่องราวแบรนด์ · หน้า 2 สีพร้อมรหัสและฟอนต์ · หน้า 3 tone of voice และ Do / Don't อย่างละ 4 ข้อ
สร้าง Design System ไม่ทัน ใช้ DESIGN.md สำรอง จาก Starter Pack แทน แล้วทำ Brand Book ต่อได้ทันที
เป้าหมาย: เริ่มจากลายเส้นบนกระดาษ จบที่หน้าเว็บเปิดตัวสินค้าที่เปิดได้ทุกเครื่อง และได้ฝึกแก้งานบน canvas ครบทุกวิธี
จากภาพสเก็ตช์ที่แนบ ทำ wireframe หน้า Landing Page เปิดตัวชาละมุน 3–5 แนวทางที่ต่างกันชัดเจน ถามคำถามฉันก่อนเริ่ม
สร้าง Landing Page เปิดตัวชาละมุนตาม wireframe แบบที่ [2] ใช้ Chalamun DS มีส่วน: hero พร้อมภาพขวด, จุดขาย 3 ข้อ, รสชาติและราคา, รีวิวลูกค้า 3 รีวิว, ปุ่มสั่งผ่าน LINE, วันเวลาและที่ตั้ง Pop-up · อ่านง่ายบนมือถือSave what we have and try a completely different approach
รีวิวหน้านี้ในฐานะ UX designer: contrast สีอ่านได้ไหม ลำดับข้อมูลเข้าใจใน 5 วินาทีไหม บนมือถือกดปุ่มง่ายไหม เสนอจุดแก้ 5 ข้อเรียงตามความสำคัญ แล้วแก้ 3 ข้อแรกให้เลย
ประโยค "ถามคำถามฉันก่อนเริ่ม" ท้าย prompt ช่วยให้ได้งานรอบแรกใกล้เคียงที่ต้องการ · อย่าลืมเก็บไฟล์ .zip ไว้ในเครื่อง
เลือกวิธีแก้ให้ตรงกับขนาดของการเปลี่ยนแปลง — วิธีเหล่านี้ใช้ได้ในทุก Workshop หลังจากนี้
เปลี่ยน โครงสร้าง เช่น เพิ่มส่วน สลับลำดับ เปลี่ยนเลย์เอาต์
ปักหมุด แก้เฉพาะจุด เช่น ปุ่มนี้ หัวข้อนี้ ภาพนี้
แก้ตรงบน canvas เช่น คำผิด ตัวเลขราคา ข้อความสั้น
ปรับ สีและระยะ ด้วยแถบเลื่อน เห็นผลทันที
ก่อนลองแนวทางใหม่ทุกครั้ง สั่ง Save what we have and try a completely different approach เพื่อเก็บงานเดิมไว้ก่อน
Claude Design จัดเลย์เอาต์ได้ แต่ สร้างภาพถ่ายและภาพคนเองไม่ได้ ช่องรูปจึงว่าง — ให้เจนภาพก่อน แล้วแนบเข้างานผ่านปุ่ม +
เจนใน ZenityX Studio ด้วย GPT Image เช่น ขวดชาบนโต๊ะไม้ในแสงเช้า
เจนด้วย Nano Banana Pro เช่น ลูกค้าถือขวดชาที่ Pop-up
กดปุ่ม + แนบภาพ แล้วสั่งให้วางในช่องรูปที่ต้องการ · ในคลาสใช้ภาพจาก Starter Pack ได้เลย
หลักสูตรนี้ใช้ ZenityX Studio เฉพาะส่วนที่ใช้ในงาน เทคนิคเจนภาพเชิงลึกสอนในคอร์ส AI Content Workshop
เป้าหมาย: สั่งสองงานคู่กันระหว่างรอผล ได้ทั้งสื่อออฟไลน์และอีเมลที่ใช้ภาพชุดเดียวกับหน้าเว็บ
ทำใบปลิว A4 งาน Pop-up เปิดตัวชาละมุน ใช้ Chalamun DS หัวเรื่องไม่เกิน 6 คำ บอกครบว่าขายอะไร เมื่อไหร่ ที่ไหน ราคาเท่าไร มี QR สำหรับแอด LINE และคูปองแบบฉีกด้านล่าง ต้องอ่านรู้เรื่องแม้พิมพ์ขาวดำ
ทำอีเมลเปิดตัวชาละมุน กว้าง 600px มี preheader, ภาพขวดชา, ข้อความสั้น 3 ย่อหน้า, ปุ่ม "จองรับที่ Pop-up" และ footer ที่มีลิงก์ยกเลิกรับข่าว ใช้ Chalamun DS
ใบปลิวที่ดีต้องอ่านรู้เรื่องแม้พิมพ์ขาวดำ — ลองดูแบบไม่มีสีก่อน Export ทุกครั้ง
เป้าหมาย: ทำชุดเสนอขายสำหรับร้านกาแฟและซูเปอร์มาร์เก็ต ดึงข้อมูลและโปรไฟล์จากงานช่วงเช้ามาต่อยอด
ทำแผนภาพเส้นทางสินค้าชาละมุน: ไร่ชา → สกัดเย็น → บรรจุขวด → 3 ช่องทาง (LINE OA / Pop-up / ร้านค้าส่ง) และไทม์ไลน์เปิดตัว 30 วัน แบ่ง 4 สัปดาห์ ใช้ Chalamun DS
ทำ Pitch Deck 8 หน้าเสนอขายส่งให้ร้านกาแฟและซูเปอร์มาร์เก็ต จากรายงาน Research ยอดขาย .xlsx และโปรไฟล์ที่แนบ: 1 ปก 2 ปัญหาลูกค้า 3 ชาละมุนคืออะไร 4 ตลาดและตัวเลข (กราฟจากไฟล์) 5 เส้นทางสินค้า 6 เงื่อนไขขายส่ง 7 ทีมผู้ก่อตั้ง 8 ติดต่อ · 1 ภาพเด่นต่อหน้า ไม่เกิน 20 คำต่อหน้า มี speaker notes ทุกหน้า
ตัวเลขในสไลด์ "ตลาดและตัวเลข" ต้องตรงกับแหล่งอ้างอิงในรายงาน Research ที่ตรวจไว้ตั้งแต่ Workshop 1
เป้าหมาย: ต่อยอดจากโค้ดเว็บเมื่อเช้า ให้แอปและหน้าจอหลังบ้านหน้าตาเข้าชุดกับเว็บ โดยไม่ต้องเขียนโค้ด
จากโค้ดเว็บที่แนบ ทำแอปมือถือ "Chalamun Club" 4 หน้า: สมัครสมาชิก → สะสมแต้ม → สั่งล่วงหน้า → คูปอง QR ใช้สี ปุ่ม และข้อความเดียวกับเว็บ กดสลับหน้าได้จริง
ทำหน้าจอหลังบ้านสำหรับเจ้าของร้าน "ยอดจองและสต็อกวันนี้" มียอดจองแยกรส สต็อกคงเหลือ และรายการรับที่ Pop-up เสนอ 3 แบบ ใช้ Chalamun DS
ถ้าปุ่ม </> แนบโฟลเดอร์ไม่ได้ ใช้ + Attach folder แนบโฟลเดอร์เว็บแทน แล้วใช้ prompt เดิม
เป้าหมาย: พาสินค้าออกจากหน้ากระดาษ ได้โมเดล 3D ไว้ทำม็อกอัป และคลิปสั้นแนวตั้งพร้อมโพสต์
สร้างขวดแก้ว 250 มล. ของชาละมุน ฉลากใช้สีและโลโก้ของแบรนด์ หมุนดูได้รอบทิศ แล้วทำอีก 1 สีสำหรับรุ่น limited
ทำคลิปแนวตั้ง 9:16 ยาว 15 วินาที 4 ฉาก: 1) hook 2) ขวดชาละมุน 3) จุดขาย 3 ข้อ 4) วันเวลา Pop-up + ปุ่ม LINE ใช้ภาพจาก ZenityX Studio และโลโก้ที่แนบ ตัวอักษรใหญ่พออ่านบนมือถือ
ไฟล์ MP4 ได้ขนาด 1080×1920 · 24fps สร้างได้บน Chrome หรือ Edge เท่านั้น · ถ้าบัญชีไม่มีปุ่มนี้ ให้ export HTML แล้วอัดหน้าจอ
เป้าหมาย: รวมงานทั้งวันให้ครบ 14 ชิ้นในเครื่อง แชร์ลิงก์ และเล่าแบรนด์ให้ได้ใน 60 วินาที
ไม่มีสอบ ประเมินจากผลงานและการ pitch
| สิ่งที่ประเมิน | เกณฑ์ |
|---|---|
| ความครบของ Launch Kit | ครบ 14 template และ export เก็บในเครื่องได้ ชิ้นที่ไม่ทันต่อยอดจาก Checkpoint files |
| ความตรงแบรนด์ | ทุกชิ้นใช้ Design System เดียวกัน สี ฟอนต์ โลโก้สอดคล้องทั้งชุด |
| คุณภาพภาษาไทย | อ่านง่าย ตัวอักษรไม่ชนหรือขาด ฟอนต์ถูกต้องในไฟล์ที่ export |
| ความถูกต้องของข้อมูล | ตัวเลขจาก Research ที่ใช้ใน deck ตรวจกับแหล่งอ้างอิงแล้ว |
| การนำเสนอ 60 วินาที | เล่าที่มาของแบรนด์ แล้วแสดง deck, landing page และคลิปได้กระชับ |
ครบทุกข้อ = ใช้ครบทุก template บนหน้าแรกของ Claude Design · เก็บทุกไฟล์ไว้ในโฟลเดอร์ "Launch Kit" ในเครื่อง
| # | Template | ชิ้นงาน | WS | ไฟล์ | |
|---|---|---|---|---|---|
| 1 | Research | รายงานตลาดชาพร้อมดื่มหวานน้อย + แหล่งอ้างอิง | 1 | HTML | |
| 2 | Résumé | โปรไฟล์ผู้ก่อตั้ง 1 หน้า | 1 | ||
| 3 | Color + type pairing | บอร์ดสี 3 ทิศทาง + คู่ฟอนต์ไทย-อังกฤษ | 2 | — | |
| 4 | Document | Brand Book 3 หน้า A4 | 2 | ||
| 5 | Wireframe | โครงหน้าเว็บ 3–5 แนวทาง | 3 | — | |
| 6 | Blank | Landing Page เปิดตัวสินค้า | 3 | HTML + .zip | |
| 7 | Flier | ใบปลิว Pop-up A4 | 4 | ||
| 8 | HTML email | อีเมลเปิดตัว | 4 | .html | |
| 9 | Diagram | แผนภาพเส้นทางสินค้า + ไทม์ไลน์ 30 วัน | 5 | PDF/PNG | |
| 10 | Slides | Pitch Deck 8 หน้า | 5 | PDF + PPTX | |
| 11 | Mobile app design | แอปสะสมแต้ม 4 หน้า | 6 | ลิงก์แชร์ | |
| 12 | UI mockups | หน้าจอหลังบ้าน ยอดจองและสต็อก | 6 | ลิงก์แชร์/PNG | |
| 13 | 3D object | ขวดชา 3D + ภาพ 3 มุม | 7 | OBJ+MTL / GLB + PNG | |
| 14 | Animation | คลิปเปิดตัว 15 วินาที 9:16 | 7 | MP4 |
ใช้ตลอดวันร่วมกับทุกชิ้น: Design system · ปุ่ม + · ปุ่ม </> · Model picker · Export / Share / Handoff
งานชิ้นเดียวกันส่งออกได้หลายแบบ ให้เลือกตามว่าใครจะใช้ต่อและใช้ที่ไหน
| ปลายทาง | เลือก | ใช้กับงาน |
|---|---|---|
| พิมพ์ / ส่งเป็นเอกสาร | Export PDF | Résumé · Brand Book · ใบปลิว · Pitch Deck (ไฟล์หลัก) |
| แก้สไลด์ต่อ | Export PPTX · Send to Canva · Google Slides | Pitch Deck — เปิดเทียบฟอนต์ไทยกับ PDF ทุกครั้ง |
| เว็บที่เปิดได้ทุกเครื่อง | Export standalone HTML / .zip | Landing Page · รายงาน Research |
| ระบบส่งอีเมล | ดาวน์โหลดไฟล์ .html | อีเมลเปิดตัว |
| ให้คนอื่นดูหรือคอมเมนต์ | Share (Can view / Commenter) | แอปต้นแบบ · UI mockup · Pitch Deck |
| เว็บออนไลน์ (สาธิต) | Send to Netlify / Vercel | Landing Page ที่ใครก็เปิดได้ |
| ส่งต่อทีม dev (สาธิต) | Handoff to Claude Code | ไฟล์ดีไซน์ + แชท + README |
| ไฟล์ 3D และวิดีโอ | Download OBJ + MTL / GLB · MP4 + Music | ขวดชา 3D · คลิปเปิดตัว (Chrome หรือ Edge) |
ปัญหาที่พบบ่อยในวันเรียนและทางแก้ที่ทำได้ทันที ถ้ายังไม่หาย ยกมือเรียกผู้สอนหรือทีมงานได้ตลอด
| อาการ | วิธีแก้ |
|---|---|
| ฟอนต์ไทยเพี้ยนในไฟล์ PPTX | ใช้ PDF เป็นไฟล์หลักสำหรับส่งงาน · เปิด PPTX เทียบกับ PDF ทุกครั้ง · ถ้าต้องแก้สไลด์ต่อ ลอง Send to Canva หรือ Google Slides |
| ฟอนต์ในอีเมลไม่ตรงกับที่ออกแบบ | ปกติของอีเมล — ฟอนต์ไทยจะแสดงเป็นฟอนต์ของเครื่องผู้รับ ตรวจว่ายังอ่านง่ายทั้งจอกว้างและจอมือถือ |
| รูปในอีเมลไม่ขึ้น | รูปต้องอยู่บนลิงก์ https ก่อนนำอีเมลเข้าระบบส่งจริง |
| โควตาใกล้หมด | สลับเป็นรุ่นเร็วหรือรุ่นกลางสำหรับร่างและรอบแก้ · ลด effort · แชทยาวให้กด New chat · แจ้งทีมงานช่วงพักกลางวัน (ทีมงานช่วยเช็คโควตา) |
| งานใหม่ไม่ใช้ Chalamun DS | เลือก Chalamun DS ใน dropdown Design system ก่อนกดส่งทุกครั้ง · จุดไหนไม่ตรงแบรนด์ ใช้ Open → Remix แก้ที่ระบบ |
| สร้าง Design System ไม่ทัน | ใช้ DESIGN.md สำรองจาก Starter Pack แนบเข้างานแทน |
| ไม่มีปุ่ม Download MP4 หรือเปิดใน Safari | เปิดโปรเจกต์ใน Chrome หรือ Edge · ถ้าบัญชีไม่มีปุ่มนี้ ให้ export HTML แล้วอัดหน้าจอ |
| ช่องรูปว่าง ไม่มีภาพสินค้า/ภาพคน | Claude Design สร้างภาพถ่ายเองไม่ได้ — เจนภาพด้วย ZenityX Studio หรือใช้ภาพจาก Starter Pack แล้วแนบผ่านปุ่ม + |
| อยากได้งานแบบเดิมคืน | แจ้งผู้สอนทันที · ครั้งต่อไปสั่ง Save what we have and try a completely different approach ก่อนลองแนวใหม่ทุกครั้ง |
| ปุ่ม </> แนบโฟลเดอร์ไม่ได้ | ใช้ + Attach folder แนบโฟลเดอร์เว็บแทน (แนบเฉพาะโฟลเดอร์เว็บ ไม่ใช่ทั้งเครื่อง) |
| แก้แอปต้นแบบบนมือถือไม่ได้ | บนมือถือดูได้อย่างเดียว การแก้งานต้องทำบนคอม |
| ระบบเสนอ "Start a new chat to save … tokens" | กด New chat ได้เลย ไฟล์โปรเจกต์ยังอยู่ครบ |
| ตามเพื่อนไม่ทัน | ขอ Checkpoint files จากทีมงาน แล้วทำต่อจาก Workshop ปัจจุบัน |
| ชื่อปุ่มหรือเมนูไม่ตรงกับคู่มือ | Claude Design ยังเป็น beta และอัปเดตบ่อย ผู้สอนจะบอกชื่อปุ่มที่ถูกต้อง ณ วันเรียน |
สรุปวิธีทำงานทั้งวันให้เหลือ 6 ข้อ ใช้ได้ตั้งแต่สินค้าตัวถัดไปของคุณ
เร็ว = ร่าง · กลาง = แก้ · เก่ง = สร้างระบบ / เก็บงานสำคัญ
สอน AI รู้จักแบรนด์ครั้งเดียว แล้วเลือกใช้ทุกงาน
งานอะไร · ให้ใคร · ใช้ที่ไหน · ต้องมีอะไร · ข้อห้าม · "ถามคำถามฉันก่อนเริ่ม"
ต้องการภาพถ่ายสินค้า ภาพคน หรือฉากจริง → เจนก่อน แล้วแนบผ่าน +
ฟอนต์ถูกตัว · line-height ≥ 1.6 · ไม่มี letter-spacing · ไม่มีคำไทยขาดกลางบรรทัด · เปิดไฟล์ปลายทางดูอีกครั้ง (PPTX/อีเมล)
Share Commenter รับ feedback · Export ตามปลายทาง · Handoff to Claude Code ให้ทีม dev
งาน: [ทำอะไร เช่น ใบปลิว A4] ให้ใคร: [กลุ่มผู้อ่าน / ลูกค้า] ใช้ที่ไหน: [พิมพ์ / อีเมล / มือถือ / จอนำเสนอ] ต้องมี: [ข้อมูลและองค์ประกอบที่ขาดไม่ได้] ข้อห้าม: [สิ่งที่ไม่ต้องการ] ถามคำถามฉันก่อนเริ่ม
Prompt Card ทั้งหมดของวัน เรียงตาม Workshop · เปลี่ยน [ตัวแดง] และชื่อแบรนด์เป็นของคุณ · ก่อนส่งทุกงานเลือก Design System ของแบรนด์ใน dropdown
วิจัยตลาดชาพร้อมดื่มแบบหวานน้อยในประเทศไทย สำหรับแบรนด์ [ชาละมุน] ตามไฟล์ Brand Brief ที่แนบ สรุป 1) คู่แข่ง 5 เจ้า พร้อมช่วงราคาต่อขวด 2) ช่องทางขายหลัก 3) กลุ่มลูกค้าที่โตเร็ว 4) โอกาสของแบรนด์ใหม่ 3 ข้อ ใส่แหล่งอ้างอิงทุกตัวเลข และแยกข้อเท็จจริงกับความเห็นให้ชัดทำโปรไฟล์ผู้ก่อตั้ง 1 หน้า A4 ของ [คุณมิ้นท์ ผู้ก่อตั้งชาละมุน] ภาษาไทย มีส่วน: แนะนำตัว 3 บรรทัด, เส้นทางก่อนตั้งแบรนด์, ความเชี่ยวชาญ 4 ข้อ, ความสำเร็จที่วัดได้ 3 ข้อ, ช่องทางติดต่อ ใช้ฟอนต์ไทยจาก Google Fonts และ line-height 1.6
เสนอชุดสีและคู่ฟอนต์ 3 ทิศทางสำหรับแบรนด์ชาพร้อมดื่ม [ชาละมุน]: 1) ไร่ชายามเช้า 2) ชาไทยร่วมสมัย 3) มินิมอลพรีเมียม แต่ละทิศทางมีสี 5 สีพร้อมรหัส HEX และคู่ฟอนต์จาก Google Fonts ที่รองรับภาษาไทย (หัวข้อ + เนื้อหา) พร้อมตัวอย่างหัวข้อภาษาไทยจริงสร้าง Design System ชื่อ "Chalamun DS" จากชุดสีทิศทางที่ [2] โลโก้และ Brand Brief ที่แนบ กำหนด: สีหลัก/รอง/พื้นหลัง/ข้อความ, ฟอนต์หัวข้อและเนื้อหาภาษาไทย (line-height 1.6 ไม่ใส่ letter-spacing), ขนาดตัวอักษร 5 ระดับ, ปุ่ม 3 แบบ, การ์ด, ระยะห่าง 8 px grid, tone of voice เป็นกันเองแต่มืออาชีพ
ทำ Brand Book 3 หน้า A4 ของชาละมุน ใช้ Design System ที่เลือกไว้: หน้า 1 โลโก้และเรื่องราวแบรนด์ · หน้า 2 สีพร้อมรหัสและฟอนต์ · หน้า 3 tone of voice และ Do / Don't อย่างละ 4 ข้อ
จากภาพสเก็ตช์ที่แนบ ทำ wireframe หน้า Landing Page เปิดตัวชาละมุน 3–5 แนวทางที่ต่างกันชัดเจน ถามคำถามฉันก่อนเริ่ม
สร้าง Landing Page เปิดตัวชาละมุนตาม wireframe แบบที่ [2] ใช้ Chalamun DS มีส่วน: hero พร้อมภาพขวด, จุดขาย 3 ข้อ, รสชาติและราคา, รีวิวลูกค้า 3 รีวิว, ปุ่มสั่งผ่าน LINE, วันเวลาและที่ตั้ง Pop-up · อ่านง่ายบนมือถือรีวิวหน้านี้ในฐานะ UX designer: contrast สีอ่านได้ไหม ลำดับข้อมูลเข้าใจใน 5 วินาทีไหม บนมือถือกดปุ่มง่ายไหม เสนอจุดแก้ 5 ข้อเรียงตามความสำคัญ แล้วแก้ 3 ข้อแรกให้เลย
ทำใบปลิว A4 งาน Pop-up เปิดตัวชาละมุน ใช้ Chalamun DS หัวเรื่องไม่เกิน 6 คำ บอกครบว่าขายอะไร เมื่อไหร่ ที่ไหน ราคาเท่าไร มี QR สำหรับแอด LINE และคูปองแบบฉีกด้านล่าง ต้องอ่านรู้เรื่องแม้พิมพ์ขาวดำ
ทำอีเมลเปิดตัวชาละมุน กว้าง 600px มี preheader, ภาพขวดชา, ข้อความสั้น 3 ย่อหน้า, ปุ่ม "จองรับที่ Pop-up" และ footer ที่มีลิงก์ยกเลิกรับข่าว ใช้ Chalamun DS
ทำแผนภาพเส้นทางสินค้าชาละมุน: ไร่ชา → สกัดเย็น → บรรจุขวด → 3 ช่องทาง (LINE OA / Pop-up / ร้านค้าส่ง) และไทม์ไลน์เปิดตัว 30 วัน แบ่ง 4 สัปดาห์ ใช้ Chalamun DS
ทำ Pitch Deck 8 หน้าเสนอขายส่งให้ร้านกาแฟและซูเปอร์มาร์เก็ต จากรายงาน Research ยอดขาย .xlsx และโปรไฟล์ที่แนบ: 1 ปก 2 ปัญหาลูกค้า 3 ชาละมุนคืออะไร 4 ตลาดและตัวเลข (กราฟจากไฟล์) 5 เส้นทางสินค้า 6 เงื่อนไขขายส่ง 7 ทีมผู้ก่อตั้ง 8 ติดต่อ · 1 ภาพเด่นต่อหน้า ไม่เกิน 20 คำต่อหน้า มี speaker notes ทุกหน้า
จากโค้ดเว็บที่แนบ ทำแอปมือถือ "Chalamun Club" 4 หน้า: สมัครสมาชิก → สะสมแต้ม → สั่งล่วงหน้า → คูปอง QR ใช้สี ปุ่ม และข้อความเดียวกับเว็บ กดสลับหน้าได้จริง
ทำหน้าจอหลังบ้านสำหรับเจ้าของร้าน "ยอดจองและสต็อกวันนี้" มียอดจองแยกรส สต็อกคงเหลือ และรายการรับที่ Pop-up เสนอ 3 แบบ ใช้ Chalamun DS
สร้างขวดแก้ว 250 มล. ของชาละมุน ฉลากใช้สีและโลโก้ของแบรนด์ หมุนดูได้รอบทิศ แล้วทำอีก 1 สีสำหรับรุ่น limited
ทำคลิปแนวตั้ง 9:16 ยาว 15 วินาที 4 ฉาก: 1) hook 2) ขวดชาละมุน 3) จุดขาย 3 ข้อ 4) วันเวลา Pop-up + ปุ่ม LINE ใช้ภาพจาก ZenityX Studio และโลโก้ที่แนบ ตัวอักษรใหญ่พออ่านบนมือถือ
Save what we have and try a completely different approach
ไม่ได้แค่ "รู้จัก" Claude Design แต่มี Launch Kit 14 ชิ้นอยู่ในเครื่องของตัวเอง และมีขั้นตอนที่นำไปทำซ้ำกับแบรนด์จริงได้ทันที
รายงานวิจัยตลาดพร้อมแหล่งอ้างอิง, Design System ของแบรนด์, บอร์ดสี-ฟอนต์, Brand Book 3 หน้า (PDF)
Wireframe 3–5 แนวทาง + Landing Page เปิดตัวสินค้า (standalone HTML + .zip)
ใบปลิว A4 พร้อมพิมพ์ (PDF) + อีเมลเปิดตัว (.html) พร้อมนำเข้าระบบส่งอีเมล
Pitch Deck 8 หน้า (PDF + PPTX) + ไดอะแกรมเส้นทางสินค้า + โปรไฟล์ผู้ก่อตั้ง 1 หน้า
ต้นแบบแอปสะสมแต้ม 4 หน้าที่คลิกได้จริง + UI mockup หน้าจอหลังบ้าน
ขวดสินค้า 3D หมุนได้พร้อมภาพ 3 มุม + คลิปเปิดตัว 15 วินาที แนวตั้ง 9:16
กฎเลือกโมเดล, checklist ภาษาไทยก่อน export, จังหวะที่ควรใช้ ZenityX Studio เติมภาพ, วิธีส่งต่องานให้ทีม
มีคำถามหลังเรียน หรืออยากต่อยอดกับแบรนด์จริงของทีม ติดต่อสถาบัน ZenityX ได้ทุกช่องทาง
062-262-9644
admin@zenityxai.com
@zenityx
zenityxai.com
ออกแบบหลักสูตรโดยสถาบัน ZenityX · บริษัท เซนนิตี้เอ็กซ์ จำกัด · Vibe Design Workshop