เคยไหมครับ ใช้ AI ทำ Slide, Dashboard หรือ เว็บไซต์ ออกมาแล้ว งานเสร็จไวมาก แต่หน้าตาไม่เหมือนแบรนด์ของเราเลยสักชิ้น ต้องมานั่งไล่เปลี่ยนสี เปลี่ยนฟอนต์ทีละหน้า โพสนี้ผมจะพาคุณสร้าง “Design System” ด้วย Claude แบบจับมือทำ 3 วิธี แล้วเอาไปใช้เปลี่ยนหน้าตางานทุกชิ้นให้ตรง CI ด้วยคำสั่งเดียวครับ
.
ขอแอบสปอยนิดนึงครับ พอมี Design System แล้ว เวลาจะทำงานชิ้นใหม่ ผมแค่พิมพ์ว่า “ใช้ Design System ของเรา ปรับให้หน่อย” เท่านั้นเลยครับ Claude จะเปลี่ยนสี ฟอนต์ และโลโก้ ให้ตรงกับแบรนด์ให้เองหมด จาก Dashboard หน้าตาธรรมดาๆ ก็กลายเป็นแบบนี้ได้เลยครับ 👇
.
Design System คืออะไร?
สำหรับคนที่ยังไม่รู้จัก Design System มันคือ “คู่มือหน้าตาแบรนด์” ที่ AI อ่านเข้าใจได้ครับ ข้างในจะบอกหมดเลยว่าแบรนด์ของเราใช้ สีอะไร, ฟอนต์อะไร, ปุ่มหน้าตาแบบไหน, ไอคอน, โลโก้ ไปจนถึง น้ำเสียงในการสื่อสาร ว่าเป็นทางการหรือเป็นกันเอง และอะไรที่แบรนด์ห้ามทำ
.
ฟังชื่อแล้วอาจจะคิดว่า “เฮ้ย ซับซ้อนแน่เลย ยากแน่เลย” ใช่ไหมครับ แต่ต้องบอกว่าในยุคที่มี AI แล้ว การสร้าง Design System ง่ายขึ้นเยอะมากๆ ครับ
.
ในโพสนี้ผมจะพาไปดูครบทั้ง 3 กรณีครับ
- 📌 เริ่มต้นใหม่ทั้งหมด ยังไม่มีอะไรเลย เหมือนกำลังจะเปิดบริษัทใหม่
- 📌 มีโลโก้หรือเว็บไซต์บริษัทแล้ว แต่ยังไม่เคยมีกฎหรือ CI อะไรเลย
- 📌 มี CI อยู่แล้ว เช่น ได้ Brand Guideline มาจากนักออกแบบ
แล้วปิดท้ายด้วยการเอา Design System ไปใช้จริงกับ Dashboard, Slide Presentation และ Web App ครับ ถ้าพร้อมแล้ว เปิดคอมพิวเตอร์แล้วทำตามไปพร้อมกันได้เลยครับ 🚀
.
เริ่มต้น: รู้จัก Claude Design
ในคลิปนี้ผมใช้ AI ที่ชื่อว่า Claude ครับ จริงๆ แล้ว AI ตัวอื่นก็ทำได้เหมือนกันนะครับ แต่ผมคิดว่า Claude ใช้งานง่าย และเรื่องงานดีไซน์ทำออกมาได้ค่อนข้างโอเคเลยครับ
.
ใน Claude จะมีฟังก์ชันที่ชื่อว่า Claude Design อยู่ในเมนู Design ด้านซ้ายครับ ถ้าอยากสร้าง Design System แบบถาม-ตอบทีละขั้น ก็กดเข้าไปสร้างจากตรงนี้ได้เลย
ระบบจะถามเราว่าจะสร้าง Design System จากอะไร ให้แนบไฟล์ได้ แล้วก็มีคำถามเรื่องสี ฟอนต์ ระยะห่าง ให้ตอบไปทีละข้อ เหมือนเรากำลังคุยกับดีไซน์เนอร์เลยครับ
แต่ผมจะไม่ลงลึกวิธีนี้นะครับ เพราะคำถามค่อนข้างเยอะ ผมจะพาไปดูวิธีที่ ง่ายกว่านี้ แทนครับ
.
วิธีที่ 1: เริ่มจากไฟล์ design.md (เหมาะกับคนที่เริ่มจากศูนย์)
วิธีแรกคือสร้างไฟล์ที่เรียกว่า design.md ขึ้นมาก่อนครับ ไฟล์นี้เป็นไฟล์ที่เขียนกฎการดีไซน์ของแบรนด์ไว้ทั้งหมด ว่าสีต้องเป็นสีอะไร ฟอนต์ต้องใช้ฟอนต์อะไร คำพูดต้องเป็นแบบไหน
.
ถ้ายังไม่มีภาพในหัวเลยว่าอยากได้ประมาณไหน ผมแนะนำให้ไป ก๊อปปี้ design.md ของแบรนด์ดังๆ มาเป็นต้นแบบก่อนครับ แล้วค่อยปรับเป็นของเรา
Step 1: หา design.md ของแบรนด์ดังจาก awesome-design-md
ให้ไปที่ GitHub ชื่อ awesome-design-md ครับ เขารวบรวม design.md ของแบรนด์ดังๆ ไว้เยอะมาก ไม่ว่าจะเป็น Claude, Vercel, Binance, Coinbase ไปจนถึง Starbucks ก็มีครับ
👉 https://github.com/VoltAgent/awesome-design-md
💡 ทริค: ให้เลือกแบรนด์ที่ใกล้เคียงกับธุรกิจของเรามากที่สุดครับ ในตัวอย่างนี้ผมจะทำร้านคาเฟ่มัทฉะ เลยเลือกของ Starbucks ครับ
.
กดเข้าไปที่แบรนด์ที่ต้องการ แล้วกดปุ่ม Download DESIGN.md ครับ (ระบบจะให้ Sign in ด้วย Google ก่อนดาวน์โหลด) ถ้าเลื่อนลงมาด้านล่าง จะเห็นตัวอย่างข้อมูลในไฟล์ ทั้งสี ฟอนต์ Typography ปุ่มต่างๆ และกฎว่าแบรนด์ควรสื่อสารแบบไหน อะไรที่ห้ามทำครับ
Step 2: ให้ Claude ปรับ design.md ให้เป็นของธุรกิจเรา
เอาไฟล์ design.md ที่โหลดมา ไปวางในแชทของ Claude แล้วพิมพ์ Prompt บอกว่าให้ช่วยปรับไฟล์นี้ให้เป็นของธุรกิจเราครับ
.
ตรงนี้สำคัญนะครับ ใส่ข้อมูลธุรกิจไปให้เยอะที่สุด ครับ ในตัวอย่างนี้ผมสมมุติว่าเปิดร้านคาเฟ่มัทฉะชื่อ Matcha Monster ผมก็บอกไปหมดเลยว่า
- ร้านชื่ออะไร ตั้งอยู่ที่ไหน
- ร้านเน้นอะไร สินค้าอยู่ในเกรดไหน
- อยากให้รูปลักษณ์ร้านออกมาประมาณไหน สื่อสารกับลูกค้าแบบไหน
- แนบ โลโก้ ไปด้วย เพื่อให้เขาเอากลิ่นอายของโลโก้ใส่เข้าไปใน design.md
เราจะได้ design.md ใหม่ที่ยังมีกลิ่นอายของ Starbucks อยู่บ้าง เช่น บางสีที่ยังคงไว้ แต่เปลี่ยนเป็นของร้านเราแล้วครับ
💡 ถ้าไม่อยากเปลี่ยนอะไรเยอะ อยากได้แบบต้นฉบับเลย ก็บอกให้เปลี่ยนแค่ชื่อแบรนด์ หลักการที่เหลือเอาตามไฟล์ที่โหลดมาได้เหมือนกันครับ
Step 3: เปิดดู design.md เป็นหน้าเว็บ
ไฟล์ design.md อ่านเป็นตัวหนังสือแล้วค่อนข้างเข้าใจยากครับ ผมเลยแนะนำให้สั่งว่า
“ฝากนำ design.md นี้ ไปเปลี่ยนให้เป็นเว็บแอปพลิเคชันที่เราสามารถดูข้อมูลได้ง่ายขึ้น”
แค่นี้เราก็จะได้หน้าเว็บที่โชว์ CI ของเรา ทั้งสีหลัก สีเสริม ฟอนต์ ตัวอย่างการใช้งาน ทำให้เช็คได้ง่ายๆ เลยครับว่าตรงใจเราหรือยัง
Step 4: แปลง design.md เป็น Design System
ถ้าดูแล้วโอเค สเต็ปสุดท้ายก็สั่งต่อได้เลยครับ
“ฝากเปลี่ยน design.md ใหม่นี้ ให้กลายเป็น Design System ของร้าน Matcha Monster”
เรียบร้อยครับ! เราได้ Design System มาแล้ว ข้างในมีข้อมูลละเอียดมากๆ ทั้งข้อมูลธุรกิจ น้ำเสียงการสื่อสาร สี ตัวอักษร ระยะห่าง โลโก้ ไอคอน ปุ่มต่างๆ พร้อมเอาไปใช้กับ Artwork หรือเว็บไซต์ได้ทันทีครับ
Design System เก็บไว้ที่ไหน? แก้ไขยังไง?
Design System ทั้งหมดจะอยู่ในเมนู Design แถบซ้ายมือครับ กดเข้าไปจะเห็นไฟล์และรายละเอียดทั้งหมด
ถ้าอ่านแล้วเจอตรงไหนที่ไม่ชอบหรือผิด ก็กลับไปที่แชทเดิม หรือเปิดแชทใหม่ แล้วบอก Claude ให้แก้ส่วนนั้นได้เลยครับ หรือจะพิมพ์แก้เองก็ได้เหมือนกันครับ
.
วิธีที่ 2: สร้างจากเว็บไซต์ธุรกิจ (ง่ายที่สุด!)
ถ้าคุณ มีเว็บไซต์ของธุรกิจอยู่แล้ว วิธีนี้ต้องบอกว่าง่ายมากๆ ครับ
.
ตัวอย่างเช่น ผมมีร้านอาหารชื่อ Shabu Monster ที่มีเว็บไซต์อยู่แล้ว
ให้ Copy URL ของเว็บไซต์ มาวางในแชท แล้วพิมพ์ต่อว่า
“ฝากนำเอาข้อมูลในเว็บไซต์นี้ มาสร้างให้เป็น Design System ให้หน่อย”
แล้วอธิบายธุรกิจของเราสั้นๆ เพิ่มไปด้วยครับ (ถ้าในเว็บมีข้อมูลไม่เยอะ แนะนำให้อธิบายเพิ่มให้มากที่สุด) กดส่ง แล้ว Claude จะวิ่งเข้าไปดึงข้อมูลจากเว็บไซต์ของเรา แล้วสร้าง Design System ให้อัตโนมัติเลยครับ
ข้อดีของวิธีนี้คือ
- 📌 รู้จักร้านเราจริงๆ ทั้งข้อมูลร้าน จุดเด่น สไตล์การสื่อสาร
- 📌 ดึงสีที่ร้านใช้อยู่ มาเขียนไว้ให้ครบ
- 📌 วิเคราะห์ฟอนต์ ว่าใกล้เคียงกับฟอนต์ไหน ทั้งภาษาไทยและภาษาอังกฤษ (หรือจะอัปโหลดฟอนต์ของเราเพิ่มเองก็ได้)
- 📌 ดึงโลโก้และรูปภาพ จากเว็บไซต์มารวบรวมไว้ได้อย่างถูกต้อง
พร้อมเอาไปใช้ทำเว็บอื่น ทำ Dashboard หรือทำสไลด์นำเสนอนักลงทุนได้ทันทีครับ
.
💡 ไม่มีเว็บไซต์ทำยังไง? ผมเชื่อว่าคุณน่าจะมีอะไรสักอย่างครับ เช่น Presentation ของร้าน หรือ โลโก้ ก็โยนทั้งหมดเข้าไปแทนเว็บไซต์ได้เลย แล้วอธิบายว่าร้านเราคืออะไร Claude ก็สร้าง Design System ให้ได้เหมือนกันครับ
.
วิธีที่ 3: ยังไม่มีธุรกิจ ให้ ChatGPT ช่วยคิด CI
ถ้าคุณ ยังไม่มีธุรกิจเลย แต่อยากลองสร้าง Design System ดูก่อน นอกจากวิธีที่ 1 แล้ว อีกวิธีที่ง่ายมากคือ คุยกับ AI ตัวไหนก็ได้ ให้ช่วยคิด CI ครับ
.
ผมเลือกใช้ ChatGPT เพราะข้อดีคือเขา สร้างภาพให้เราได้ ด้วยครับ ผมพิมพ์ไปง่ายๆ เลยว่า
“ผมอยากจะเปิดร้านคาเฟ่มัทฉะ ที่ชื่อว่า Matcha Monster ฝากช่วยคิด CI ออกมาเป็นไฟล์ design.md ให้หน่อย”
ChatGPT จะคิดคอนเซ็ปต์ สีแบรนด์ แล้วสร้างไฟล์ design.md ให้ ตรงไหนไม่ชอบก็บอกให้แก้ได้ครับ ข้อดีคือ design.md ตัวนี้ เป็นของเราจริงๆ ไม่ได้อ้างอิงจากแบรนด์ไหนมาเลยครับ
.
ถ้าอยากเห็นภาพ ก็สั่งต่อได้เลยว่า “ฝากช่วยสร้างโลโก้ พร้อมทั้งภาพ Infographic แสดง CI ของแบรนด์ให้หน่อย” เราจะได้ภาพแบบนี้ออกมาครับ เห็นทั้งโลโก้ มาสคอต พาเลตสี ตัวอย่างหน้าร้าน แพ็กเกจจิ้ง
จากนั้นเอาโลโก้ + Infographic + design.md ไปให้ Claude สร้างเป็น Design System ได้เลยครับ
.
มี Brand Guideline จากนักออกแบบอยู่แล้ว? ใช้ได้เลย!
สำหรับใครที่ไม่อยากคุยกับ AI และเลือกจ้าง Graphic Studio ออกแบบให้ ตอนส่งงานเขาจะส่งเป็นไฟล์ Corporate Identity (CI) หรือ Brand Guideline เป็น PDF มาให้ครับ ข้างในจะมีทั้งสี โลโก้ ตัวอย่างการใช้งาน ฟอนต์ สิ่งที่แบรนด์ควรทำและไม่ควรทำ รวมถึงมาสคอต
.
อย่างช่อง บริหารงานแบบคนไอที ของผมเอง ก็สร้าง Design System มาจากไฟล์ Brand Guideline ที่เคยจ้าง Indeedly Studio ทำไว้ให้ครับ ถ้าคุณมีไฟล์แบบนี้อยู่แล้ว ก็โยนเข้าไปให้ Claude เปลี่ยนเป็น Design System ได้เลยครับ
.
เอา Design System ไปใช้จริง
ได้ Design System มาแล้ว ใช้งานยังไง? ต้องบอกว่า ง่ายมากๆ ครับ ผมจะยกตัวอย่างให้ดู 3 เคส
📊 เคสที่ 1: ปรับหน้าตา Dashboard
ผมมี Dashboard กระแสเงินสดที่ดึงข้อมูลมาจากระบบบัญชี FlowAccount (ตอนนี้เชื่อมต่อกับ Claude ได้แล้ว วิธีเชื่อมต่อผมเคยทำคลิปสอนแบบจับมือทำไว้แล้ว ลิงก์อยู่ด้านล่างครับ) แต่หน้าตายังไม่ได้เป็นไปตามธีมร้านเราเลย
ผมพิมพ์ไปง่ายๆ แค่บอกสิ่งที่ต้องการ แล้วใส่ชื่อ Design System ที่อยากใช้ครับ
“ฝากเปลี่ยนหน้าตาของ Dashboard นี้ โดยใช้ Design System ที่ชื่อว่า Matcha Monster ให้หน่อย”
เสร็จแล้วครับ! ชื่อ ธีมสี ฟอนต์ เปลี่ยนตาม Design System ที่เราเขียนไว้ทั้งหมดเลย (ดูภาพผลลัพธ์ด้านบนสุดของโพสได้เลยครับ)
🎞️ เคสที่ 2: เปลี่ยนธีม Slide Presentation
ปกติเวลาผมทำสไลด์ ก็จะแปะภาพ เขียนหัวข้อ แบบไม่มีธีมอะไรเลยครับ อย่างสไลด์ที่ผมไปพูดในงาน FlowAccount Show & Tell ผมก็ให้ Claude เปลี่ยนเป็นธีมของบริหารงานแบบคนไอที หน้าตาดีขึ้นทันที โดยยังคงเนื้อหาเดิมไว้ครบครับ
.
ข้อดีคือ ทำครั้งเดียวจบ ครับ ทำสไลด์เสร็จเมื่อไหร่ ก็ส่งให้ Claude เปลี่ยนธีมให้ ประหยัดเวลาเรื่องการปรับแต่งไปได้เยอะมากๆ
.
ลองกับ Google Slides กันบ้างครับ ผมมีสไลด์สรุปผลประกอบการประจำเดือนของร้าน Matcha Monster ที่ยังไม่ได้ใช้ธีมร้าน วิธีทำคือ
- เชื่อมต่อ Connector ของ Google ก่อน ไปที่เมนู Customize → Connectors ด้านซ้าย แล้วกดเพิ่ม Connector ของ Google จากนั้นล็อกอินด้วยอีเมลของเรา ⚠️ สำคัญมาก: ไฟล์สไลด์ต้องอยู่ใน Drive ของอีเมลที่เราล็อกอิน ไม่อย่างนั้น Claude จะมองไม่เห็นไฟล์ครับ
- กลับมาที่หน้าแชท วางลิงก์ Google Slides แล้วพิมพ์ว่า“ฝากทำการปรับธีมของ Google Slides Presentation นี้ โดยใช้ Design System ของ Matcha Monster ให้หน่อย”
สีและฟอนต์เปลี่ยนเป็นของร้านเราแล้วครับ Claude ยังแนะนำต่อด้วยว่าถ้าอยากปรับตรงไหนเพิ่ม บอกได้เลย
💡 ข้อจำกัด: ถ้าเป็น Google Slides ตอนนี้ Claude ยัง ใส่ไฟล์โลโก้จริงให้ไม่ได้ ครับ แต่ถ้าทำสไลด์เป็น HTML จะดึงโลโก้มาใส่ให้ได้เลย ถึงอย่างนั้นก็ยังประหยัดเวลาเปลี่ยนธีมไปได้เยอะมากครับ
💻 เคสที่ 3: เปลี่ยนหน้าตา Web App
ผมมี Prototype เว็บระบบจัดการงานแบบง่ายๆ ที่หน้าตายังไม่เหมือนร้านเราเลย
ผมสั่งให้ใช้ Design System ของร้าน Shabu Monster แล้วดูผลลัพธ์กันครับ 👇
Claude ใส่มาสคอตของร้าน ใช้สีจาก CI ที่อยู่ในเว็บไซต์ และด้านซ้ายยังอธิบายด้วยว่าเปลี่ยนอะไรไปบ้าง อะไรที่ไม่เคยมีแล้วเพิ่มเข้าไป (เช่น สีแดง) ทำให้เห็นปุ๊บรู้เลยว่าเป็นของร้านเรามากขึ้นครับ
.
💡 สำหรับระบบที่ใช้ภายในองค์กร จริงๆ ไม่จำเป็นต้องใช้ Design System ก็ได้ครับ แต่ถ้าเป็น Web App ที่ลูกค้าเข้ามาใช้ เช่น กรอกฟอร์ม จองโต๊ะอาหาร แนะนำให้ใช้มากๆ เพราะ AI จะรู้ทันทีว่าแบรนด์ของเราหน้าตาเป็นยังไงครับ
.
🎁 แจกฟรี! Prompt ที่ผมใช้ในคลิป
ก๊อปไปใช้ได้เลยครับ แค่เปลี่ยนชื่อร้านและข้อมูลให้เป็นของคุณ
สร้าง design.md (ปรับจากของแบรนด์ดัง)
ช่วยปรับแต่งไฟล์ design.md นี้ ให้เป็นของธุรกิจผมธุรกิจ: [ประเภทธุรกิจ] ชื่อร้าน [ชื่อร้าน]ตั้งอยู่ที่: [ที่ตั้ง]ร้านเน้น: [จุดเด่น / เกรดสินค้า]รูปลักษณ์ที่อยากได้: [สไตล์]การสื่อสาร: [ทางการ / เป็นกันเอง]แนบโลโก้มาด้วย ช่วยเอากลิ่นอายของโลโก้ใส่เข้าไปด้วยเปิดดู design.md เป็นหน้าเว็บ
ฝากนำ design.md นี้ ไปเปลี่ยนให้เป็นเว็บแอปพลิเคชันที่เราสามารถดูข้อมูลได้ง่ายขึ้นแปลงเป็น Design System
ฝากเปลี่ยน design.md ใหม่นี้ ให้กลายเป็น Design System ของร้าน [ชื่อร้าน]สร้างจากเว็บไซต์
[วาง URL เว็บไซต์]ฝากนำเอาข้อมูลในเว็บไซต์นี้ มาสร้างให้เป็น Design System ให้หน่อยข้อมูลธุรกิจเพิ่มเติม: [อธิบายธุรกิจ]ให้ ChatGPT คิด CI (ยังไม่มีธุรกิจ)
ผมอยากจะเปิด [ประเภทธุรกิจ] ที่ชื่อว่า [ชื่อร้าน] ฝากช่วยคิด CI ออกมาเป็นไฟล์ design.md ให้หน่อยฝากช่วยสร้างโลโก้ พร้อมทั้งภาพ Infographic แสดง CI ของแบรนด์ให้หน่อยใช้ Design System กับงานต่างๆ
ฝากเปลี่ยนหน้าตาของ [Dashboard / Web App / Google Slides Presentation] นี้ โดยใช้ Design System ที่ชื่อว่า [ชื่อ Design System] ให้หน่อย📦 รวม design.md ของแบรนด์ดัง (ฟรี): https://github.com/VoltAgent/awesome-design-md
.
🎥 ดูแบบจับมือทำได้ที่คลิปนี้เลยครับ
.
สรุป
Design System ช่วยให้งานทุกชิ้นที่เราสร้างด้วย AI ไม่ว่าจะเป็น Presentation, Web App หรือ Tool ต่างๆ มี Consistency มากขึ้น ดูเป็นแบรนด์เดียวกัน สื่อสารกับลูกค้าก็ดี สื่อสารภายในองค์กรก็ง่ายขึ้นครับ
.
ผมแนะนำว่า ทุกธุรกิจตอนนี้ควรมี Design System เป็นของตัวเองได้แล้ว ครับ ถือเป็นการบ้านเล็กๆ นะครับ ปิดโพสนี้แล้วลองไปสร้าง Design System ของคุณดู แชร์ให้ทีมในองค์กร แล้วครั้งหน้าที่จะทำ Presentation ทำ Web App หรือ Tool อะไรก็ตาม ก็เอา Design System ไปใช้ได้ทันทีครับ
.
หวังว่าจะเป็นประโยชน์นะครับ ถ้าติดปัญหาการใช้งานหรือมีข้อสงสัย สามารถทักมาได้ที่ Facebook: บริหารงานแบบคนไอที ได้เลยครับ 🙂
🎓 สนใจคอร์สสร้าง Template ระบบสต๊อกสินค้าใน Google Sheets สอนโดยผมเอง สามารถดูรายละเอียดได้ที่ลิงค์นี้เลย
https://www.skilllane.com/courses/GoogleSheets-Noobitguy
🎓 สนใจคอร์ส สร้าง Web Application โดยไม่ต้องเขียนโค้ดด้วย Lovable AI สอนโดยผมเอง สามารถดูรายละเอียดได้ที่นี้เลย
https://page.futureskill.co/lovablewebapp?aff=446พัฒนาเว็บแอปพลิเคชัน
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar
