AI Smart Work
← คู่มือทั้งหมด

เว็บที่ AI ทำ ทำไมหน้าตาเหมือนกันหมด (และของฟรีที่ช่วยให้ไม่ซ้ำ)

ถ้าไม่บอกทิศทาง AI จะเลือกหน้าตาแบบที่เจอบ่อยที่สุด เว็บเลยออกมาคล้ายกันหมด คู่มือนี้รวมสกิลที่ช่วยให้ AI ออกแบบแบบมีทิศทาง และคลังชิ้นส่วนที่คนออกแบบไว้แล้ว พร้อมคำสั่งติดตั้ง

อัปเดตล่าสุด 20 ต.ค. 2569

⬇ ดาวน์โหลด PDF (ฟรี)

ต้องมีอะไรบ้าง

  • Claude Code ที่ติดตั้งแล้ว (ยังไม่มี ดูคู่มือ "ติดตั้ง Claude Code ไม่ต้องเขียนโค้ด") ต้องใช้แพ็กเกจ Claude แบบเสียเงิน
  • โปรเจกต์เว็บแบบ React / Next.js สำหรับ shadcn/ui, Magic UI และ React Bits (ถ้ายังไม่มี บอก Claude Code ว่า "สร้างโปรเจกต์ Next.js ให้หน่อย")
  • ทุกตัวในคู่มือนี้ใช้ฟรี ยกเว้น 21st.dev ที่ฟรีแบบจำกัดจำนวน
  1. 1

    ทำไมหน้าตาเหมือนกันหมด

    ถ้าเราสั่งแค่ "ทำเว็บให้หน่อย" AI จะเลือกแบบที่เจอบ่อยที่สุดในโค้ดที่มันเคยเห็น เช่น ปุ่มม่วง ฟอนต์ Inter การ์ด 3 ใบขนาดเท่ากัน ตัวเลขใหญ่กับป้ายเล็ก ผลเลยออกมาคล้ายกันทุกเว็บ แก้ได้ 2 ชั้น: (1) ให้สกิลที่บังคับ AI เลือกทิศทางการออกแบบก่อน (2) ให้ AI หยิบชิ้นส่วนที่นักออกแบบทำไว้แล้ว แทนการวาดเองจากศูนย์

  2. 2

    frontend-design — สกิลออกแบบทางการจาก Anthropic

    ให้ Claude Code คิดทิศทางก่อนเขียนโค้ด: เว็บนี้ของใคร คนดูเป็นใคร แล้วเลือกสี ฟอนต์ และเลย์เอาต์ให้เข้ากับเรื่องนั้น และเลี่ยงหน้าตาแบบแม่แบบ ติดตั้งแล้วทำงานเองเมื่อสั่งทำหน้าเว็บ ไม่ต้องพิมพ์คำสั่งพิเศษ พิมพ์ทีละบรรทัดใน Claude Code

    /plugin marketplace add anthropics/claude-code /plugin install frontend-design@claude-code-plugins
  3. 3

    Impeccable — ให้ AI ตรวจงานออกแบบตัวเอง

    ชุดกฎการออกแบบ + คำสั่งตรวจงาน เช่น /impeccable critique ให้คะแนนและบอกจุดที่ดูเป็นงาน AI, /impeccable polish เก็บรายละเอียดก่อนขึ้นจริง เราใช้กับเว็บร้าน aismartworkth.com เอง วิธีติดตั้งดูที่หน้า GitHub ของโปรเจกต์ (ลิงก์ด้านล่าง) หรือส่งลิงก์ให้ Claude Code แล้วบอกว่า "ติดตั้งสกิลนี้ให้หน่อย"

  4. 4

    shadcn/ui — ชิ้นพื้นฐาน + ให้ AI ค้นและติดตั้งเอง

    ปุ่ม ฟอร์ม เมนู หน้าต่าง ที่โค้ดลงในโปรเจกต์เรา แก้ได้ทุกบรรทัด มีตัวเชื่อม (MCP) ทางการ ให้ Claude Code ค้นและติดตั้งชิ้นเองจากคำสั่งภาษาคน เช่น "หาฟอร์มล็อกอินมาใส่ให้หน่อย" รันในโฟลเดอร์โปรเจกต์ แล้วปิดเปิด Claude Code ใหม่ พิมพ์ /mcp เช็กว่าขึ้น Connected

    npx shadcn@latest mcp init --client claude
  5. 5

    Magic UI + React Bits — ชิ้นที่เคลื่อนไหว ทำหน้าแรกให้ไม่จืด

    Magic UI มีชิ้นแอนิเมชันสำหรับหน้าแรก 150+ ชิ้น React Bits มีตัวหนังสือเคลื่อนไหว พื้นหลัง และเอฟเฟกต์ ทั้งคู่ติดตั้งผ่าน shadcn ได้ (ตัวอย่างด้านล่าง เปลี่ยนชื่อชิ้นตามที่เลือกจากเว็บ) ข้อควรรู้: React Bits ใช้ในเว็บหรือแอปของเราได้ แต่ห้ามเอาตัวชิ้นงานไปขายต่อ (สัญญาอนุญาต MIT + Commons Clause) ใช้แต่พอดี: ชิ้นเคลื่อนไหวทุกส่วนของหน้า ทำให้เว็บช้าและดูวุ่น

    npx shadcn@latest add @magicui/globe npx shadcn@latest add @react-bits/SplitText-TS-TW

    ที่เราพลาดมา

    เราเคยให้ตัวหนังสือไทยเด้งขึ้นทีละตัวอักษร สระกับวรรณยุกต์หลุดออกจากตัวพยัญชนะ อ่านไม่ออก ตัวหนังสือไทยต้องให้เคลื่อนทีละคำ (ชิ้นเอฟเฟกต์ส่วนใหญ่ทำมาสำหรับภาษาอังกฤษ ลองกับข้อความไทยก่อนใช้จริง)

  6. 6

    21st.dev — ตลาดรวมชิ้นงานจากชุมชน

    รวมชิ้นงาน React/Tailwind 10,000+ ชิ้นจากนักออกแบบหลายคน ดูได้ฟรี คัดลอกฟรีวันละ 2 ชิ้น ถ้าอยากให้ AI ดึงผ่าน MCP ไม่จำกัดต้องสมัคร Builder (US$6/เดือน จ่ายรายปี) ราคา ณ 20 ต.ค. 2569 อาจเปลี่ยน แนะนำให้ลองตัวที่ฟรีด้านบนก่อน

ลิงก์ทางการ

  • frontend-design

    ง่าย

    โดย Anthropic

    สกิลออกแบบทางการ ให้ Claude Code เลือกทิศทางการออกแบบก่อนเขียนโค้ด

    ฟรี

    https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design

  • Impeccable

    ง่าย

    โดย Paul Bakaus (โอเพนซอร์ส Apache-2.0)

    ภาษาออกแบบ + คำสั่งตรวจ/วิจารณ์/เก็บงานดีไซน์ สำหรับ AI

    ฟรี

    https://github.com/pbakaus/impeccable

  • shadcn/ui

    กลาง

    โดย shadcn (โอเพนซอร์ส MIT)

    ชิ้นส่วนพื้นฐานที่โค้ดลงในโปรเจกต์ + MCP ให้ AI ค้นและติดตั้ง

    ฟรี

    https://ui.shadcn.com/docs/mcp

  • Magic UI

    กลาง

    โดย Magic UI (โอเพนซอร์ส MIT)

    ชิ้นแอนิเมชันสำหรับหน้าแรก ใช้คู่กับ shadcn

    ฟรี (มีเทมเพลต Pro แบบเสียเงิน ไม่จำเป็น)

    https://magicui.design

  • React Bits

    กลาง

    โดย David Haz (MIT + Commons Clause)

    ตัวหนังสือเคลื่อนไหว พื้นหลัง เอฟเฟกต์

    ฟรีสำหรับใช้ในเว็บ/แอป ห้ามขายตัวชิ้นงาน

    https://reactbits.dev

  • 21st.dev

    กลาง

    โดย 21st Labs

    ตลาดชิ้นงานจากชุมชน 10,000+ ชิ้น + MCP

    ฟรีคัดลอกวันละ 2 ชิ้น · ไม่จำกัด US$6/เดือน (รายปี)

    https://21st.dev

ติดตรงนี้ ทำยังไง

ติดตั้งแล้วเว็บยังหน้าตาเหมือนเดิม

บอก AI ให้ชัดว่าเว็บนี้ของใคร ขายอะไร คนดูเป็นใคร และอยากให้รู้สึกแบบไหน (เช่น "ร้านกาแฟคั่วเอง โทนอบอุ่น ดูทำมือ") สกิลจะมีข้อมูลไปเลือกทิศทาง

คำสั่ง npx shadcn ขึ้นว่าไม่พบ

ต้องมี Node.js ในเครื่อง บอก Claude Code ว่า "ติดตั้ง Node.js ให้หน่อย" แล้วลองใหม่ในโฟลเดอร์โปรเจกต์

พิมพ์ /mcp แล้วไม่เห็น shadcn

ปิด Claude Code แล้วเปิดใหม่ในโฟลเดอร์โปรเจกต์เดียวกับที่รันคำสั่ง mcp init

เอาชิ้นงานเหล่านี้ไปทำเว็บให้ลูกค้าได้ไหม

shadcn/ui และ Magic UI (MIT) ใช้ทำงานให้ลูกค้าได้ React Bits ใช้ในเว็บได้แต่ห้ามขายตัวชิ้นงานแยก ส่วน 21st.dev แต่ละชิ้นมีเงื่อนไขของคนทำ ตรวจที่หน้าชิ้นนั้นก่อนใช้

อ่านต่อ