Claude Code: สร้าง Landing Page สวยด้วย Frontend-Design Plugin

อยากทำ Landing Page แต่ทำ UI ไม่เป็น

ถ้าคุณเป็นคนที่มีไอเดีย แต่ UI design skills ไม่ค่อยจัด Claude Code ช่วยคุณได้ด้วย frontend-design plugin นี่แหละ!

วันนี้ฮงไปเจอคลิปของช่อง Build Great Products ซึ่งเป็นวิดีโออสนการใช้งาน Claude Skills ในการทำ website พร้อมทั้งเปรียบเทียบตัวอย่าง ก่อนและหลังมี plugin มาแชร์ให้ครับ 🚀

ผลลัพธ์จากการใช้ Skills

ในคลิปเขามีตัวอย่างการสร้าง website ดังนี้:

1. ❌ สร้างโดยไม่ใช้ frontend-design skills
2. ✅ สร้างโดยใช้ frontend-design skills
3. 🚀 การ redesign โดยใช้ตัวอย่างจาก website Dribbble.com ซึ่งเป็นแหล่งรวม UI design สวยๆ จาก top designer ทั่วโลก

ในตัวอย่าง ฮงลองสร้าง shorten link website แบบน่ารักด้วยสีพาสเทล ผลออกมาสวยเลย 🥰 🥳

ติดตั้ง Frontend-Design Skills ได้ใน 3 ขั้นตอน

ขั้นที่ 1: เปิด Claude Code ใน Terminal

ขั้นที่ 2: ติดตั้ง Marketplace

ถ้าเคยแล้ว ไม่ต้องทำ (ใช้ official marketplace จาก anthropics - ไว้ใจได้ 99%)

❯ /plugin marketplace add anthropics/claude-code

ขั้นที่ 3: ลง Plugin Frontend-Design

❯ /plugin install frontend-design@claude-code-plugins

เสร็จแล้วเราก็พร้อม Prompt ลองตามฮงได้เลย 🚀🚀

Prompt สำหรับสร้าง Landing Page

"create the landing page for shorten url website like bitly but more cute and pastel"

Prompt สำหรับปรับแก้ UI

ถ้าอยากปรับแก้ UI ให้ใช้ prompt นี้:

"use plugin frontend-design to improve this landing page"

Prompt ด้วยตัวอย่างจาก Dribbble

เมื่อเรามี reference (ตัวอย่างจาก Dribbble) เราก็แนบไปด้วยตอน prompt และพิมพิ์อธิบายเพิ่มเติมได้เลย

สรุปโดยหัวหน้าฮง

ข้อดี

frontend-design skill มีส่วนช่วยให้เราทำ UI ได้ง่ายขึ้น สามารถเสกได้ในไม่ถึง 5 นาที จากเดิมน่าจะมากกว่า 30 นาที

ข้อจำกัด

UI ที่เสกมา มันก็มี template มาจากตัวอย่างในอินเทอร์เน็ต ซึ่งอาจจะมีซ้ำกับคนอื่นบ้าง คล้ายกันจนเหมือนกัน

Code ที่เจนออกมา อาจจะมีบัคบ้าง เช่น:

• animation ทำงานแปลก
• website performance ไม่ดี
• ตัวหนังสือเกินขอบ
• layout เบี้ยวบ้าง

สรุปสุดท้าย

อย่างไรก็ดี มันก็ช่วยเราได้เยอะแล้ว ที่เหลือเราค่อยไปปรับแก้กัน สบาย 🥳