AI ได้ก้าวเข้ามาใกล้ความสามารถของมนุษย์ในหลายด้าน แต่การออกแบบก็ยังเป็นหนึ่งในพื้นที่ที่ AI ยังทำได้ไม่ดีนัก อย่างไรก็ตาม ฉันคิดว่าหลายคนอาจจะเข้าใจผิดเล็กน้อยเกี่ยวกับความหมายของ "การออกแบบด้วย AI"
ในบทความนี้ ฉันได้รวบรวมวิธีการออกแบบโดยใช้ AI อย่างเป็นระบบและนำไปใช้ได้จริง โดยอ้างอิงจากโพสต์ "How To Actually Design With AI" ของ Leon Lin (@LexnLin) และนำเสนอเป็นภาษาไทย
ท้ายบทความนี้ ฉันแจกชุดระบบการออกแบบ (Design System Kit) สำหรับสร้างงานออกแบบคุณภาพสูงด้วย Claude
คุณสามารถรับได้ที่ด้านล่างของบทความ
ข้อควรรู้ก่อนเริ่มต้น
"การออกแบบด้วย AI" ไม่ได้หมายถึงการปล่อยให้ AI ทำทุกอย่าง แนวคิด ทิศทาง สัญชาตญาณ และความคิดสร้างสรรค์นั้นมาจากคุณเสมอ ลองนึกภาพว่า AI เป็นเครื่องมือที่ช่วย "ทำให้ ideas เหล่านั้นเป็นรูปเป็นร่าง (execute)" จะเข้าใจง่ายกว่า
ขั้นตอนทั่วไปประกอบด้วย 3 ขั้นตอนนี้:
- คิดไอเดียด้วยตัวเอง
- หาแรงบันดาลใจ
- แปลงความคิดของคุณเป็นคำสั่ง (prompt) แล้วให้ AI สร้างผลงาน
คุณสามารถใช้เครื่องมือหรือสภาพแวดล้อม (harness) ใดก็ได้ เช่น Cursor, Codex หรือ Claude สาระสำคัญอยู่ที่ "การแปลงความคิดของคุณเป็นคำสั่ง"
AI นั้นเก่งมากในการทำงานตามคำสั่ง แต่มันยังไม่มีความคิดสร้างสรรค์ที่แท้จริง มันเข้าใจ "กฎการออกแบบ" เช่น พื้นที่ว่าง การจัดตัวอักษร ทฤษฎีสี และลำดับชั้น แต่มันไม่สามารถเข้าใจว่าสิ่งไหนให้ความรู้สึก "ดีจริงๆ" "เป็นต้นฉบับ" หรือ "มีความหมาย" — หรืออีกนัยหนึ่งคือ รสนิยม (taste)
นี่คือช่องว่างที่ใหญ่ที่สุด ณ จุดนี้ คุณไม่สามารถมอบรสนิยมที่แท้จริงให้ AI ได้ แต่คุณสามารถทำงานรอบๆ ข้อจำกัดนั้นได้ โดยสมมติว่ามันมีอยู่
วิธีที่ 1: การใช้ Design Skills
นี่เป็นวิธีที่เร็วที่สุด เมื่อคุณมีเวลาไม่มากหรือกำลังสร้างอะไรเล็กๆ น้อยๆ การพึ่งพา "design skills" ที่เตรียมไว้ล่วงหน้าก็มีประสิทธิภาพ
ตัวอย่างเช่น:
- Impeccable (impeccable.style
- Emil Kowalski's UI skills (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
กระบวนการ非常简单:
- เพิ่ม design skills
- ให้บริบท (context) แก่ AI
- ส่ง prompt สองสามครั้งเพื่อให้มันสร้างเว็บไซต์ แอป หรือโปสเตอร์
- แก้ไขปัญหาที่เห็นได้ชัด
- เผยแพร่
ผลลัพธ์ที่ได้มักจะ "ค่อนข้างดี" มันอาจจะดูคล้ายกับงานออกแบบที่สร้างโดย AI ทั่วไป แต่การใช้ skills คุณภาพสูงจะช่วยหลีกเลี่ยงความล้มเหลวที่เลวร้ายที่สุดและลุค "แนว AI" นี่เป็นวิธีที่หลายคนใช้จริง
วิธีที่ 2: การออกแบบด้วยตัวเองโดยใช้ AI
หากคุณต้องการสร้างสิ่งที่ "โดดเด่นอย่างแท้จริง" คุณต้องไปให้ไกลกว่านั้นอีกขั้น คุณต้องการให้ผู้ใช้รู้สึกว่าผลิตภัณฑ์ของคุณ "ผ่านการคิดมาอย่างดี" เมื่อพวกเขาได้สัมผัส — เพื่อสิ่งนั้น จำเป็นต้องมีกระบวนการที่ตั้งใจมากขึ้น
ไม่ว่าจะเป็นแอปมือถือ แอปเดสก์ท็อป เว็บไซต์ แลนดิ้งเพจ แดชบอร์ด หรือโปสเตอร์ คุณต้องมีทิศทางที่ชัดเจนก่อน ถ้าคุณไม่รู้ว่าต้องการสร้างอะไร AI ก็ไม่สามารถหาให้คุณได้
เริ่มต้นด้วย "ความหมาย (Meaning)"
ก่อนอื่นเลย กำหนดรากฐานให้ชัดเจน ลองตอบคำถามเหล่านี้:
- สิ่งนี้สร้างขึ้นเพื่อใคร?
- แก้ปัญหาอะไร?
- ควรให้ความรู้สึกแบบไหน?
- สิ่งนี้สื่อถึงอะไร?
UI สะท้อนถึง "ความหมาย" ของผลิตภัณฑ์ จดสิ่งเหล่านี้ไว้ คุณสามารถใช้ AI ได้ที่นี่เช่นกัน แต่เคล็ดลับคือการใช้มันเพื่อ ตั้งคำถามกับคุณ แทนที่จะใช้ในการออกแบบ
ตัวอย่างเช่น ให้ AI ถามคุณ:
- ผลิตภัณฑ์นี้เกี่ยวกับอะไร?
- ผู้ใช้ที่ต้องการคือใคร?
- คุณต้องการสื่ออารมณ์อะไร?
- บรรยากาศของแบรนด์ควรเป็นอย่างไร?
- สีและฟอนต์แบบไหนที่เหมาะสม?
- มินิมอล / สนุกสนาน / พรีเมียม / เทคนิค / ทดลอง — เลือกทิศทางไหน?
รวบรวมแรงบันดาลใจ
เมื่อกำหนดทิศทางได้แล้ว ก็เริ่มรวบรวมข้อมูลอ้างอิง แหล่งข้อมูลที่มีประสิทธิภาพแหล่งหนึ่งคือ Mobbin ซึ่งมีหน้าจอผลิตภัณฑ์จริงในหลากหลายหมวดหมู่
สิ่งสำคัญในที่นี้ไม่ใช่แค่ดูแล้วคิดว่า "มันดูดี" แต่ให้ถามตัวเองว่า ทำไมมันถึงดี
- เป็นเพราะเลย์เอาต์?
- พื้นที่ว่าง?
- การจัดตัวอักษร?
- โครงสร้าง?
- การโต้ตอบ?
บันทึกสิ่งที่คุณชอบและจัดระเบียบเป็นโฟลเดอร์ เช่น:
- Navigation
- Hero
- Pricing
- Cards
- Mobile screens
- Dashboard
- Animation
- Typography
การใช้เวลาสร้างคลังอ้างอิงของตัวเองแบบนี้คือวิธีปลูกฝัง "รสนิยม"
แหล่งข้อมูลอื่นๆ ที่มีประโยชน์ ได้แก่ Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee และ Lummi
หมายเหตุ: หลีกเลี่ยงการลอกเลียนแบบงานออกแบบทั้งชิ้น สิ่งสำคัญคือการผสมผสานหลายๆ ไอเดียและยกระดับให้เหมาะสมกับผลิตภัณฑ์ของคุณ
วางแผนโครงสร้าง
ขั้นตอนต่อไป กำหนดสิ่งที่คุณต้องสร้างจริงๆ สำหรับเว็บไซต์ อาจประกอบด้วย navigation, hero, features, pricing, testimonials, CTA และ footer
สำหรับแอป อาจประกอบด้วย onboarding, home, search, profile, settings, core flows และ empty states
แต่ละส่วนต้องการเนื้อหาที่ชัดเจน สำหรับส่วน hero คุณต้องมีพาดหัว คำอธิบาย CTA และภาพประกอบ AI สามารถช่วยเรื่อง copy ได้ แต่ "ความชัดเจน" นั้นมาจากคุณเสมอ
สร้างทีละ Component
ในที่สุดก็ถึงเวลาผลิตงาน นำไอเดียแต่ละอย่างที่คุณอ้างอิงมาสร้างขึ้นใหม่ให้เหมาะกับผลิตภัณฑ์ของคุณ
แทนที่จะบอกว่า "สร้างเว็บไซต์ทั้งหน้า" กุญแจสำคัญคือการพูดว่า "จากสไตล์นี้ ช่วยสร้างส่วน hero ที่เหมาะกับแบรนด์ของฉันหน่อย"
ดำเนินการทีละขั้นตอน: Navigation → Hero → Cards → Buttons → Typography → รายละเอียด AI จะทำงานได้ดีกว่ามากกับงานเล็กๆ และวิธีนี้ช่วยให้คุณควบคุมได้
สร้าง Assets แบบกำหนดเอง
ใช้การสร้างภาพตามต้องการ เครื่องมือสร้างภาพในตอนนี้ทรงพลังมากแล้ว เคล็ดลับคือการสื่อสารบริบทอย่างชัดเจน เช่น สี สไตล์ องค์ประกอบ และวัตถุประสงค์
หลีกเลี่ยงการใช้ภาพสต็อกทั่วไป การใช้ภาพที่ออกแบบเองจะสร้างความกลมกลืนทั่วทั้งชิ้นงาน
ภาพรวมของขั้นตอนการทำงาน
สรุปขั้นตอนการทำงานได้ดังนี้:
- กำหนดไอเดีย
- ชี้แจงวัตถุประสงค์และผู้ใช้
- ตัดสินใจทิศทางของแบรนด์
- รวบรวมข้อมูลอ้างอิง
- จัดระเบียบข้อมูล
- วางแผนโครงสร้าง
- สร้าง components
- สร้าง assets
- เพิ่มการโต้ตอบ
- ปรับแต่งทั้งหมด
คุณจะได้ผลลัพธ์ที่ดีกว่าการสร้างด้วย prompt เดียวมาก
วิธีที่ 3: การใช้ Inspiration Boards
นอกจากนี้ยังมี "ทางสายกลาง" ที่เร็วกว่าเล็กน้อย แทนที่จะประกอบทุกอย่างทีละชิ้น คุณสามารถให้ชุดข้อมูลอ้างอิงที่คัดสรรแล้วแก่ AI
รวบรวมภาพหน้าจอจาก Mobbin, Awwwards, Webflow ฯลฯ แล้วถามว่า:
กรุณาผสมผสานสไตล์และทิศทางของข้อมูลอ้างอิงเหล่านี้เพื่อสร้างการออกแบบสำหรับผลิตภัณฑ์ของฉัน อย่างไรก็ตาม อย่าลอกเลียนแบบโดยตรง
แน่นอนว่าสิ่งนี้ต้องอาศัยการที่คุณให้บริบทเพียงพอและให้ AI ถามคำถามก่อน วิธีนี้เร็วกว่าการทำด้วยตนเอง แต่ให้ผลลัพธ์ที่ดีกว่าการใช้ prompt ทั่วไปแบบครั้งเดียวมาก
สรุป 3 วิธี
- วิธีที่ 1: Design Skills — รวดเร็ว ได้ผลลัพธ์ที่ใช้ได้
- วิธีที่ 2: สร้างทีละ Component — ช้ากว่า แต่คุณภาพสูงสุด
- วิธีที่ 3: Inspiration Board — สมดุล
เครื่องมืออื่นๆ ที่มีประโยชน์
- การสร้าง SVG: เครื่องมืออย่าง Quiver สามารถสร้าง SVG ได้ เนื่องจากองค์ประกอบแยกจากกัน ทำให้ง่ายต่อการทำ animation
- วิดีโอ: เครื่องมืออย่าง Google Flow สามารถปรับปรุง hero, พื้นหลัง และการสาธิตผลิตภัณฑ์ได้
- คลังภาพ: แพลตฟอร์มอย่าง Lummi แต่ควรเลือกภาพที่เหมาะกับแบรนด์
- การซ้อนเลเยอร์: เพิ่มความลึก การเคลื่อนไหว และการโต้ตอบด้วยการตัดพื้นหลังและการซ้อนเลเยอร์ การสะสมรายละเอียดเล็กๆ น้อยๆ สร้างความแตกต่างที่ยิ่งใหญ่
บทสรุป
AI ไม่ใช่สิ่งทดแทนความคิดของคุณ
- จะสร้างอะไร
- ทำไมมันถึงสำคัญ
- สร้างเพื่อใคร
- ควรให้ความรู้สึกแบบไหน
คุณคือผู้ตัดสินใจสิ่งเหล่านี้เสมอ AI แค่ทำงานได้เร็วขึ้นเท่านั้น ผลลัพธ์ที่ดีที่สุดไม่ได้มาจาก prompt ที่ดีกว่า แต่มาจากรสนิยมที่ดีกว่า
บทความนี้เรียบเรียงเป็นภาษาไทยจากโพสต์ X ของ Leon Lin ([@LexnLin](https://x.com/@LexnLin)) เรื่อง "How To Actually Design With AI"
ฉันกำลังแจก "Claude Design System Kit" ฟรีทาง LINE
▼ ลงทะเบียนทาง LINE เพื่อรับ "Claude Design System Kit"
https://t.co/90omRA4UQ7
กรุณาเข้าร่วม Open Chat (LINE OpenChat) จากนั้นใน Official LINE ที่กล่าวถึงในหมายเหตุ ให้ส่งข้อความ:
Design System
แล้วคุณจะได้รับสิทธิพิเศษ
※ กรุณางดเว้นการส่งคีย์เวิร์ดภายใน Open Chat เอง
ฉันแนะนำให้นำ template ไปใส่ใน Claude Design ตามที่เป็น และลองสร้างเอกสารสักหนึ่งชิ้น แค่นั้นก็จะทำให้คุณรู้สึกถึงการใช้งานระบบการออกแบบแล้ว
▼ ลงทะเบียนทาง LINE เพื่อรับ "Claude Design System Kit"
