เพิ่มความสามารถ WebApp ด้วย Package เสริมสำหรับ Vibe Coding

Package คืออะไร

Package คือ โค้ดสำเร็จรูปที่คนอื่นเขียนไว้แล้ว ให้เราหยิบมาใช้ต่อได้เลย โดยไม่ต้องเขียนจาก scratch เช่น ถ้าอยากให้แอปสร้าง PDF ได้ ก็ไม่ต้องเขียน PDF engine เอง แค่ติดตั้ง Package ที่ทำสิ่งนั้นอยู่แล้ว โดย package จะถูกจัดการผ่าน Node Package Manager (NPM)

ข้อดีของการใช้ Package:

• ✅ ประหยัดเวลา ไม่ต้องเขียนโค้ดซ้ำ
• ✅ ผ่านการทดสอบโดย community ขนาดใหญ่
• ✅ มี documentation และตัวอย่างพร้อมให้ศึกษา

⚠️ ข้อควรระวัง: ไม่ควรติดตั้ง Package ที่ไม่รู้จักหรือไม่น่าเชื่อถือ เพราะอาจมีความเสี่ยงด้านความปลอดภัย Package ทุกตัวในหน้านี้ ผ่านการตรวจสอบแล้ว ว่าใช้งานได้กับ Vibe Coding

วิธีการใช้ Package ใน Vibe Coding

หลักการคือ บอก AI ว่าต้องการทำอะไร + ระบุ Package ที่ให้ใช้ + (ถ้าเป็นไปได้) แนบ documentation หรือ URL ของ Package

Pattern การเขียน Prompt

💡 Tip: การแนบ URL ของ documentation ไปด้วยช่วยให้ AI ดึง API และวิธีการใช้งานที่ถูกต้องมาโดยตรง โดยเฉพาะ Package ที่มีการอัปเดตบ่อย จะได้ไม่เจอปัญหา AI ใช้ syntax เวอร์ชันเก่า

สร้าง [สิ่งที่ต้องการ] โดยใช้ [ชื่อ Package]
อ้างอิง documentation จาก [URL Website ของ Package นั้น]

ตัวอย่างการใช้

ต้องการสร้าง PDF จากข้อมูลที่มีบนเว็บไซต์ให้สามารถดาวน์โหลด

สร้าง ปุ่มสำหรับกดดาวน์โหลด PDF file ของใบเสนอราคา โดยใช้ @react-pdf/renderer
อ้างอิง documentation จาก react-pdf.org

กลุ่มที่ 1: Package เกี่ยวกับเอกสาร

สร้างไฟล์ PDF ด้วย React PDF

React PDF คือ Library ที่ช่วยให้คุณสร้างไฟล์ PDF ได้โดยตรงจาก React Component เหมาะสำหรับ use case เช่น ใบเสร็จ, รายงาน, หรือเอกสารใดๆ ที่ต้องการ Export เป็น PDF

กลุ่มที่ 2: Package เกี่ยวกับ UI

Lucide Icon

Lucide คือ Icon Library แบบ Open Source ที่มีไอคอนให้เลือกกว่า 1,000+ ตัว ออกแบบมาในสไตล์ที่เรียบง่ายและสอดคล้องกับ Shadcn/ui โดยตรง (เพราะ Shadcn ใช้ Lucide เป็น default)

Heroicons

Heroicons คือ Icon Library จากทีม Tailwind CSS มีไอคอนสไตล์ clean และ minimal ทั้งแบบ Outline และ Solid ให้เลือกตามความเหมาะสมของ UI

กลุ่มที่ 3: Package เกี่ยวกับการเขียนบทความ หรือจัดการ CMS

แสดงผล Markdown ด้วย react-markdown

ปกติเวลาเขียนบทความ เราจะเก็บบทความในรูปแบบ Markdown format เพื่อให้ง่ายต่อการนำไปเสนอผล เพราะเป็น Format ที่ใช้ร่วมกันในหลาย Platform และสามารถเรียนรู้ได้ง่าย โดยเราจะใช้ react-markdown สำหรับแปลงข้อความจาก Markdown format ให้เป็น HTML format เหมือนที่ทำในบทความ Vibe Coding สร้างเว็บไซต์ Agency พร้อม CMS และ Contact Form ใช้เองแบบไม่ต้องเขียนโค้ด ด้วย VibeKit

ตัวอย่างการเขียนและแสดงผลใน Markdown

เรียนรู้การใช้งาน Markdown

บันทึกข้อมูลเป็น Markdown ด้วย Text Editor

สร้าง Text Editor เพื่อเขียนบทความ โดยเขียนเป็นข้อความปกติ แต่ระบบจะบันทึกเป็น Markdown แทน ซึ่งสะดวกทำให้ไม่ต้องเขียน Syntax Markdown เอง เหมือนที่ทำในบทความ Vibe Coding สร้างเว็บไซต์ Agency พร้อม CMS และ Contact Form ใช้เองแบบไม่ต้องเขียนโค้ด ด้วย VibeKit

ตัวอย่าง Demo ของ mdxeditor