รีวิว AI Design Skills — skill ที่สอน AI ออกแบบ landing page ให้ดูโปร ไม่ใช่หน้าเว็บโหล ๆ
ข้อมูล Repo
elayadesign/ai-design-skills- ดาว
- 9,285
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/f171d263-5b53-4e73-b6c6-391c52499a2f
แคปชันสำหรับ Facebook
สั่ง AI ทำ landing page ทีไร ได้หน้าตาเหมือนกันทุกเว็บ ลองให้มันใช้ skill นี้ดูครับ 🎨 AI Design Skills เป็นชุด skill ด้านดีไซน์สำหรับ Claude Code, Cursor, Codex และ Windsurf กำลังติดเทรนด์ GitHub ตอนนี้ ✅ skill landing-page-design ถามข้อมูลก่อน แล้ววางโครงหน้า เขียน copy ที่เน้นปิดการขาย ✅ กำหนดระบบภาพครบ ทั้งตัวอักษร ระยะห่าง ความโค้งมุม และ motion ✅ ค่าดีไซน์ทั้งหมดรวมอยู่จุดเดียว fork แล้วแก้เป็นสไตล์ตัวเองได้ง่าย ✅ ใช้บน Claude.ai ก็ได้ แค่อัปโหลดไฟล์ SKILL.md เหมาะกับคนที่ให้ AI ทำหน้าเว็บขายของหรือเปิดตัวโปรเจกต์ ใช้ MIT license เอาไปใช้งานเชิงพาณิชย์ได้ ข้อควรรู้: ตอนนี้มี skill หลักตัวเดียว ตัวอื่นยังอยู่ในแผน 🔗 https://github.com/elayadesign/ai-design-skills #ClaudeCode #AgentSkills #WebDesign #LandingPage
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-28
สไตล์ easy-app
1080×1350แก้ไข 2026-10-28
สรุป
AI Design Skills เป็นคลัง design skill สำหรับ Claude Code, Cursor, Codex, Windsurf และเครื่องมือที่อ่านไฟล์กฎ markdown ได้ ตัวหลักตอนนี้คือ landing-page-design ที่ถามข้อมูลก่อน แล้ววางโครงหน้า เขียน copy และกำหนดระบบภาพครบ ปรับค่าดีไซน์เป็นสไตล์ตัวเองได้ในจุดเดียว ใช้ MIT license
คืออะไร
AI Design Skills เป็นคลัง "design skill" สำหรับเครื่องมือเขียนโค้ดด้วย AI อย่าง Claude Code, Cursor, Codex, Windsurf และเครื่องมืออื่นที่อ่านไฟล์กฎแบบ markdown ได้ แต่ละ skill เป็นโฟลเดอร์แยกในตัว เลือกติดตั้งเฉพาะตัวที่ต้องการได้
ตอนนี้ในตารางมี skill ตัวหลักคือ landing-page-design ที่ช่วยสร้าง landing page ตั้งแต่ศูนย์ ผู้ทำบอกว่าจะมี skill เพิ่มตามมาอีก
จุดเด่น
- 🎨
landing-page-designเริ่มจากถามข้อมูลก่อน แล้ววางโครงหน้า เขียน copy ที่เน้น conversion และกำหนดระบบภาพครบ ทั้งตัวอักษร ระยะห่าง ความโค้งมุม และ motion - 🧩 skill แต่ละตัวอยู่ในโฟลเดอร์ของตัวเอง ติดตั้งเฉพาะที่ใช้ได้
- 🛠️ ปรับเป็นสไตล์ของเราเองได้ง่าย ค่าดีไซน์ทั้งหมด (ฟอนต์ สี ระยะห่าง motion) รวมอยู่ส่วนเดียวท้ายไฟล์ fork แล้วแก้ตรงนั้น ส่วนที่เหลือของ skill จะตามไปเอง
- 🌐 ใช้ได้หลายเครื่องมือ มีวิธีติดตั้งให้ทั้ง Claude Code, Cursor, Codex, Windsurf, Cline และ Claude.ai แบบไม่ต้องใช้ terminal
- 🔄 ถ้าอยากปรับเว็บเดิมแทนการสร้างใหม่ มี redesign-skill แยกไว้อีก repo
เหมาะกับใคร
- คนทำ startup หรือโปรเจกต์ส่วนตัวที่ให้ AI สร้าง landing page แล้วอยากได้ผลงานที่ดูตั้งใจออกแบบ
- dev ที่ใช้ Claude Code หรือ Cursor อยู่แล้วและอยากยกระดับงานหน้าเว็บ
- นักออกแบบที่อยากทำ design system ของตัวเองให้ AI ใช้ตาม
เริ่มต้นใช้งาน
สำหรับ Claude Code ให้ clone repo แล้วคัดลอกโฟลเดอร์ skill ที่ต้องการเข้า .claude/skills/ (เปลี่ยน <skill-name> เป็นชื่อโฟลเดอร์ skill เช่น landing-page-design):
mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
จากนั้นสั่งงานเป็นภาษาธรรมดาได้เลย สำหรับ Cursor ให้ดาวน์โหลด SKILL.md ไปไว้ที่ .cursor/rules/ หรือวางใน Settings ➡️ Rules for AI ส่วน Codex ใช้ AGENTS.md, Windsurf ใช้ .windsurfrules และ Cline ใช้ .clinerules ถ้าใช้ Claude.ai ก็อัปโหลด SKILL.md เข้า Project หรือแนบในแชตแล้วบอกให้ทำตาม
ข้อควรรู้
- ตอนนี้ในตารางมี skill ให้ใช้ตัวเดียวคือ
landing-page-designส่วนตัวอื่นยังอยู่ในแผน landing-page-designดัดแปลงแนวคิดบางส่วนมาจาก taste-skill ของ Leonxlnx (MIT) โดยระบุเครดิตไว้ท้าย SKILL.md- ใช้ MIT license เอาไปใช้ fork หรือขายงานที่สร้างจากมันได้ ไม่ต้องให้เครดิต
- skill ช่วยให้ AI ออกแบบเป็นระบบขึ้น แต่ผลงานยังควรตรวจและปรับเองอีกรอบ
🔗 https://github.com/elayadesign/ai-design-skills
ข้อมูลจาก GitHub ณ 28 ต.ค. 2026: ⭐ 9,285 | ภาษา - | license MIT