5 เว็บสาย Vibe Coding: ทำเว็บด้วย AI ให้สวยไม่ซ้ำใคร ด้วย Godly, Mobbin, 21st.dev, shadcn/ui และ Coolors

สั่ง AI ว่า "ทำหน้า landing page ให้หน่อย" ทีไร ได้หน้าตาเดิมทุกครั้ง พื้นขาว ตัวหนังสือกลางจอ ปุ่มสีม่วง การ์ดสามใบ ปัญหานี้ไม่ได้อยู่ที่ AI ทำสวยไม่เป็น แต่อยู่ที่เรายังไม่ได้บอกมันว่า สวยแบบไหน

บทความนี้พารู้จัก 5 เว็บสาย Vibe Coding ที่ช่วยให้เรามีของไปบอก AI ได้ชัดขึ้น ได้แก่ Godly, Mobbin, 21st.dev, shadcn/ui และ Coolors ใช้ทีละเว็บตั้งแต่หาไอเดีย หยิบชิ้นส่วน ไปจนถึงเลือกสี แล้วรวมทั้งหมดเป็นพรอมต์เดียว พร้อมเทมเพลตให้ก๊อป โปรเจกต์ฝึกทำเว็บร้านกาแฟ และตารางแก้ปัญหา

จบบทความนี้คุณจะ:

• เข้าใจว่า Vibe Coding คืออะไร และทำไมเว็บจาก AI ถึงหน้าตาเหมือนกัน
• ใช้ Godly และ Mobbin หาโทนและโครงหน้าที่ชอบ
• หยิบคอมโพเนนต์จาก 21st.dev และ shadcn/ui ไปใส่ในโปรเจกต์
• เลือกชุดสีจาก Coolors แล้วบอกบทบาทของแต่ละสีให้ AI
• รวมทุกอย่างเป็นพรอมต์เดียว แล้วทำเว็บที่หน้าตาเป็นของคุณเอง

Vibe Coding คืออะไร ทำไมเว็บจาก AI หน้าตาเหมือนกัน

Vibe Coding คือการสร้างโปรแกรมหรือเว็บด้วยการคุยกับ AI บอกสิ่งที่อยากได้เป็นภาษาคน แล้วให้ AI เขียนโค้ดแทน คำนี้ Andrej Karpathy ใช้ในโพสต์เมื่อกุมภาพันธ์ 2025 แล้วกลายเป็นคำเรียกการทำงานแบบนี้ ใช้ได้กับ Claude, Cursor, Lovable, v0, Bolt หรือ AI ตัวไหนก็ได้

ปัญหาคือ ถ้าเราสั่งสั้นๆ AI จะเลือกสิ่งที่พบบ่อยที่สุดในข้อมูลที่มันเรียนมา ผลจึงออกมาหน้าตากลางๆ เหมือนเว็บอื่นอีกเป็นพันเว็บ

5 เว็บในบทความนี้ช่วยให้เรามีของ 3 อย่างไปให้ AI คือ รูปตัวอย่าง (ไอเดีย) ชิ้นส่วนที่มีโค้ด (คอมโพเนนต์) และ รหัสสี

ถ้าอยากเห็นอีกวิธีที่ช่วยให้ AI ออกแบบดีขึ้นด้วย skill อ่านต่อได้ในบทความ Impeccable

ศัพท์ที่ต้องรู้

Godly: หาไอเดียเว็บสวยๆ

Godly เป็นแกลเลอรีรวมเว็บที่ออกแบบสวย เหมาะใช้หา "อารมณ์" ของเว็บที่อยากได้

ตอนนี้ godly.website พาไปที่ recent.design เราเปิด godly.website เมื่อ 6 พ.ย. 2026 แล้วเว็บพาไปที่ recent.design ซึ่งเรียกตัวเองว่าแหล่งรวมแรงบันดาลใจงานดีไซน์ มีหมวด Websites ให้ดูเว็บสวยๆ เหมือนเดิม และมีหมวดอื่นอย่างไอคอนแอปกับแบรนดิ้งด้วย วิธีใช้ในหัวข้อนี้ใช้กับหมวด Websites ได้เลย

วิธีใช้มี 3 ขั้น

1. เลื่อนดู แต่ละการ์ดคือเว็บจริง บางการ์ดเอาเมาส์วางแล้วจะเห็นเว็บขยับ
2. เลือก 1 ถึง 2 เว็บที่โทนถูกใจ สนใจแค่ความรู้สึก เช่น มืดหรือสว่าง เรียบหรือจัดจ้าน ตัวหนังสือใหญ่หรือเล็ก
3. แคปหน้าจอเก็บไว้ Windows กด Win + Shift + S ส่วน macOS กด Cmd + Shift + 4

แล้วแนบรูปให้ AI ช่วยแปลงความรู้สึกเป็นคำ

ดูรูปนี้ แล้วอธิบายโทนของเว็บเป็นข้อๆ: สีพื้น ฟอนต์ ระยะห่าง การจัดวาง ความรู้สึก

จะได้คำอธิบายโทนที่เอาไปใส่ในพรอมต์หลักตอนท้ายได้ทันที

เอาโทน ไม่ใช่เอาทั้งหน้า ใช้เว็บคนอื่นเป็นแรงบันดาลใจ ไม่ใช่ก๊อปทั้งหน้า โลโก้ รูป และข้อความของเขาเป็นของเจ้าของเว็บ

Mobbin: ดูหน้าจอแอปและเว็บจริง

Mobbin รวมภาพหน้าจอจากแอปและเว็บจริง หน้าแรกบอกว่ามีกว่า 600,000 ภาพ ถ้า Godly ให้อารมณ์ Mobbin จะให้โครง อยากทำหน้า login, pricing หรือ onboarding ก็ค้นชื่อหน้านั้น แล้วดูว่าแอปดังๆ วางอะไรไว้ตรงไหน

1. ค้นหน้าที่จะทำ เช่น pricing แล้วดู 5 ถึง 10 แบบ
2. จดสิ่งที่เหมือนกัน เช่น ทุกแบบมีป้าย "ยอดนิยม" บนแพ็กเกจกลาง
3. เขียนสิ่งที่จดเป็นพรอมต์

ทำหน้า pricing 3 แพ็กเกจ ให้แพ็กเกจกลางเด่นสุด มีป้าย "ยอดนิยม" มีสวิตช์รายเดือน/รายปีด้านบน

Mobbin สมัครฟรีได้แต่ดูได้จำกัด ส่วนแพ็กเกจเสียเงินจะเปิดให้ดูทั้งคลัง ราคาและเงื่อนไขดูในเว็บของเขา และภาพทั้งหมดเป็นของแอปเจ้าของ ใช้ดูเป็นตัวอย่างเท่านั้น ไม่เอาไปเผยแพร่ต่อ

21st.dev: หยิบคอมโพเนนต์ด้วยพรอมต์

21st.dev เป็นคลังคอมโพเนนต์ที่นักออกแบบช่วยกันแบ่งปัน เว็บบอกว่ามีคอมโพเนนต์ เทมเพลต และธีมแบบ React กับ Tailwind CSS กว่า 12,000 ชิ้น จุดเด่นคือทุกชิ้นมีปุ่ม Copy prompt ก๊อปไปวางให้ AI แล้วมันจะสร้างคอมโพเนนต์นั้นในโปรเจกต์ให้

1. เลือกคอมโพเนนต์ เช่น hero ปุ่มเรืองแสง หรือการ์ดราคา กดเข้าไปดูตัวอย่างที่ขยับได้
2. กด Copy prompt ในหน้าคอมโพเนนต์ (ชื่อปุ่มอาจเปลี่ยนตามเว็บ)
3. วางในแชตของ AI แล้วบอกเพิ่มว่าจะวางไว้ตรงไหนของหน้า

(วางพรอมต์ที่ก๊อปมา)
ใส่คอมโพเนนต์นี้เป็น hero ของหน้าแรก เปลี่ยนข้อความเป็นภาษาไทย ใช้สีจากชุดที่ให้ไว้

AI จะสร้างไฟล์คอมโพเนนต์ในโปรเจกต์ แล้วหน้าแรกจะมี hero ตัวนั้น ถ้าใช้ AI ที่เขียนโค้ดในเครื่อง เช่น Claude Code หรือ Cursor คอมโพเนนต์จะเข้าไปอยู่ในโฟลเดอร์โปรเจกต์จริง

คอมโพเนนต์ขึ้น error? คอมโพเนนต์ของ 21st.dev เขียนด้วย React และ Tailwind ถ้าโปรเจกต์ของเราเป็นอย่างอื่น เช่น HTML ล้วน ให้บอก AI ตรงๆ ว่าโปรเจกต์ใช้อะไร แล้วให้มันแปลงให้ หรือวาง error ทั้งก้อนให้ AI แก้

shadcn/ui: ชุดคอมโพเนนต์ฟรีที่โค้ดเป็นของเรา

shadcn/ui ต่างจากไลบรารีทั่วไปตรงที่ โค้ดถูกก๊อปเข้ามาในโปรเจกต์ของเรา ไม่ได้ซ่อนอยู่ในแพ็กเกจ เราจึงแก้ได้ทุกบรรทัด ใช้เป็นฐานของปุ่ม ฟอร์ม เมนู และ dialog ได้ทั้งหมด และเป็นโอเพนซอร์สแบบ MIT ใช้ฟรี

ติดตั้งในโปรเจกต์ React ที่มีอยู่แล้ว (เช่น Next.js หรือ Vite)

npx shadcn@latest init

เพิ่มปุ่ม

npx shadcn@latest add button

จะมีไฟล์ปุ่มเพิ่มในโฟลเดอร์ components ของโปรเจกต์ ระหว่างติดตั้งคำสั่งอาจถามค่าตั้งต้น ตอบตามค่าเริ่มต้นได้ ในหน้าเอกสารของ shadcn/ui ตัวอย่างใช้ pnpm dlx แทน npx ซึ่งทำงานเหมือนกัน เลือกตามตัวจัดการแพ็กเกจที่ใช้อยู่

พอติดตั้งแล้ว สั่ง AI แบบนี้ได้เลย

ใช้ shadcn/ui ทำฟอร์มสมัครสมาชิก มีชื่อ อีเมล รหัสผ่าน และปุ่มสมัคร

คำสั่งนี้ยังไม่ได้รันในเครื่องเรา คำสั่งติดตั้งยกมาจากหน้าเอกสารทางการของ shadcn/ui เมื่อ 6 พ.ย. 2026 ถ้าคำสั่งเปลี่ยน ให้ยึดหน้าเอกสารล่าสุด

Coolors: สุ่มชุดสีและกำหนดบทบาทสี

Coolors เป็นเครื่องมือสุ่มชุดสีที่ใช้ง่ายมาก

1. กด Start the Generator จะได้ชุดสี 5 สีเต็มจอ
2. กด Space สุ่มชุดใหม่ไปเรื่อยๆ เจอสีที่ชอบให้กดไอคอนแม่กุญแจล็อกไว้ แล้วสุ่มต่อเฉพาะสีที่เหลือ
3. ก๊อปรหัสสี คลิกรหัสใต้สีแต่ละช่องได้แบบ #5bc0be

ขั้นที่คนมักข้ามคือ บอกว่าสีไหนใช้ทำอะไร ถ้าส่งแค่รหัสสี 5 ตัว AI จะสุ่มใส่เอง ผลคือสีสวยแต่อ่านยาก

ใช้ชุดสีนี้ทั้งเว็บ: พื้น #0b132b · กล่อง #1c2541 · สีหลัก #5bc0be · ตัวหนังสือ #e0fbfc · ปุ่มเด่น #ffb703 (ตัวหนังสือบนปุ่มใช้สีพื้น)

ถ้าสีออกมาอ่านยาก ให้สั่ง AI ว่า "เช็กความต่างสีของตัวหนังสือกับพื้นให้ผ่าน WCAG" มาตรฐาน WCAG ระดับ AA กำหนดให้ตัวหนังสือขนาดปกติต่างจากพื้นอย่างน้อย 4.5 ต่อ 1

รวมทั้งหมดเป็นพรอมต์เดียว

ถึงตอนนี้เรามีของครบแล้ว ทั้งโทน โครงหน้า คอมโพเนนต์ และสี ก๊อปเทมเพลตนี้ไปเติมในวงเล็บเหลี่ยมให้ครบ ยิ่งละเอียด หน้าตายิ่งเป็นของคุณ

ทำ landing page ของ [ชื่อสินค้า] สำหรับ [กลุ่มลูกค้า]
โทน: [คำอธิบายโทนจาก Godly] (แนบรูปตัวอย่าง)
โครงหน้า: hero · ฟีเจอร์ 3 ข้อ · ราคา 3 แพ็กเกจ · คำถามที่พบบ่อย · ปุ่มติดต่อ
hero: ใช้คอมโพเนนต์นี้ [วางพรอมต์จาก 21st.dev]
ปุ่ม ฟอร์ม เมนู: ใช้ shadcn/ui
ราคา: แพ็กเกจกลางเด่นสุด มีป้าย "ยอดนิยม" (แบบที่เห็นใน Mobbin)
สี: พื้น [#] กล่อง [#] สีหลัก [#] ตัวหนังสือ [#] ปุ่มเด่น [#]
ข้อความภาษาไทยทั้งหมด รองรับมือถือ

ปรับรอบสอง

ไม่มีใครได้หน้าที่ชอบในรอบเดียว ไม่ชอบตรงไหนก็สั่งแก้เฉพาะจุด

โปรเจกต์ฝึก: เว็บร้านกาแฟ 1 หน้า

ลองทำครบทั้ง 5 เว็บในโปรเจกต์เดียว ใช้เวลาราว 40 นาที

1. Godly (recent.design) หาเว็บโทนอบอุ่น พื้นเข้ม ตัวหนังสือใหญ่ แคปมา 1 รูป
2. Mobbin ดูหน้าเมนูของแอปร้านอาหาร จดว่ารูปเมนูกับราคาวางอยู่ตรงไหน
3. 21st.dev เลือก hero 1 ตัว แล้วกด Copy prompt
4. Coolors สุ่มจนได้โทนน้ำตาลกับครีม ก๊อปรหัสสีมา 5 ตัว
5. รวมพรอมต์ ใส่ทุกอย่างลงเทมเพลตในหัวข้อก่อนหน้า แล้วส่งให้ AI

ทำเสร็จแล้วลองสั่ง "ทำเว็บร้านกาแฟ" เฉยๆ อีกรอบ แล้วเทียบกันสองหน้า จะเห็นความต่างชัดเจน ถ้ายังไม่เคยเขียนเว็บเองเลย อ่านพื้นฐานก่อนได้ในบทความทำเว็บหน้าแรกด้วย HTML CSS JS จะอ่านโค้ดที่ AI เขียนให้ออกมากขึ้น

แบบฝึกหัดและการแก้ปัญหา

แบบฝึก 5 ข้อ

แก้ปัญหาที่เจอบ่อย

ใช้รูปและโค้ดจากเว็บพวกนี้ได้แค่ไหน

• รูปจาก Godly และ Mobbin เป็นของเว็บและแอปเจ้าของ ใช้ดูเป็นแรงบันดาลใจและแนบให้ AI อ่านได้ แต่ไม่เอาไปเผยแพร่หรือใส่ในเว็บเรา
• คอมโพเนนต์จาก 21st.dev มาจากผู้สร้างหลายคน ก่อนใช้ในงานจริงให้ดูเงื่อนไขในหน้าของแต่ละชิ้น
• shadcn/ui เป็นโอเพนซอร์สแบบ MIT ใช้ในงานส่วนตัวและงานเชิงพาณิชย์ได้
• สีจาก Coolors รหัสสีไม่มีใครเป็นเจ้าของ ใช้ได้เลย

คำถามที่พบบ่อย

สรุป

• เว็บจาก AI หน้าตาเหมือนกันเพราะเราไม่ได้บอกว่าสวยแบบไหน
• ไอเดียมาจาก Godly กับ Mobbin ชิ้นส่วนมาจาก 21st.dev กับ shadcn/ui และสีมาจาก Coolors
• บอกบทบาทของสีทุกครั้ง และเช็ก contrast ให้อ่านง่าย
• รวมทุกอย่างเป็นพรอมต์เดียว แล้วปรับรอบสองเฉพาะจุดที่ไม่ชอบ

ลิงก์ทั้ง 5 เว็บ

• recent.design (Godly เดิม)
• Mobbin
• 21st.dev
• shadcn/ui
• Coolors

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ