ช่วงนี้ใครกำลังสนุกกับการใช้ AI (ไม่ว่าจะเป็น ChatGPT, Claude หรือ Cursor) มาช่วยเขียนโค้ดบ้างคะ? ยอมรับเลยว่ามันสะดวกมาก แต่! หลายคนน่าจะเคยเจอปัญหาเดียวกันคือ
"น้อง AI ชอบเดาใจเราผิด"
เช่น เราสั่งว่า "สร้าง Card สวยๆ ให้หน่อย" น้องก็จัดเต็มมาให้เลยทั้งเงา ทั้งขอบมน ทั้งปุ่ม แต่พอเอามาใช้จริง เอ๊า! โครงสร้างไม่เหมือนกับที่ทีมเราใช้ หรือชื่อ Props ก็ตั้งมามั่วซั่วไปหมด สุดท้ายเราต้องมานั่งลบ ลบ แล้วก็เขียนใหม่ เสียเวลา (และเสีย Token) ยิ่งกว่าเดิมอีก!
วันนี้แอดนัทเลยอยากแชร์ทริคที่ใช้ได้ผลจริง ซึ่งแอดลองทำตามแนวทางของ Shadcn UI นั่นคือการใช้ Component Composition มาทำเป็น Prompt ค่ะ บอกเลยว่าวิธีนี้จะทำให้น้อง AI ฉลาดขึ้น 200%
ทำไมการสั่ง AI แบบกว้างๆ ถึงเป็นปัญหาของการทำงานเพื่อให้ Design system ของเราขยายได้
ก่อนจะไปดูวิธีทำ เรามาดูกันก่อนว่าทำไมการสั่งงานแบบเดิมๆ ถึงมีปัญหา:
- Code Fluff: AI มักจะใส่สไตล์หรือ Element ที่เราไม่ต้องการมาให้ ทำให้ Code บวม
- Non-reusable: โค้ดที่ได้มักจะเป็นก้อนเดียว (Monolithic) เอาไปแยกส่วนใช้ใหม่ลำดับยาก
- Design Debt: ถ้าชื่อ Props หรือ Naming Convention ไม่ตรงกับ Design System ในทีม เราก็ต้องเสียเวลาแก้ชื่อตัวแปรอยู่ดี
จากการสำรวจในปี 2024-2025 พบว่า Developer ที่ใช้ AI โดยไม่มีการกำหนด Context Structure ที่ชัดเจน จะเสียเวลาไปกับการ "Refactor" โค้ดที่ AI เขียนให้ถึง 30-40% ของเวลาทำงานทั้งหมดเลยนะคะ!
รู้จักกับ Shadcn + Component Composition
หัวใจของ Shadcn UI หรือ Radix UI ที่แอดชอบมากคือแนวคิด Compound Components ค่ะ มันคือการ "แยกส่วนประกอบย่อย" ออกมาเพื่อให้เราประกอบร่างใหม่ได้อิสระ
แทนที่จะสั่งพรอมต์สร้างคอมโพเนนต์แค่ <Card /> ใหญ่ๆ อันเดียว เราสามารถสั่งงานเป็น structure ตามโครงสร้างของ component เพื่อกำหนดเนื้อหาข้างในได้ง่ายขึ้น เช่น:
<CardHeader /><CardContent /><CardFooter />
หากเราเอาโครงสร้างแบบนี้ไปบอก AI น้องจะรู้ทันทีว่ามันมีลำดับชั้น (Hierarchy) อย่างไร และแต่ละส่วนมีหน้าที่อะไรบ้างนั่นเองค่ะ แอดนัทเลยชอบการ prompt แบบโครงสร้างแบบนี้มาก
ดูตัวอย่างเพิ่มเติม Card component
3 ข้อดีของการใช้ Tree Structure ในการ Prompt
การเขียน Prompt แบบกางกิ่งก้าน (Tree Structure) เหมือนที่เราเห็นใน Folder ไฟล์งาน มีข้อดีมหาศาลดังนี้ค่ะ:
1. ลดการเดา (Zero Ambiguity)
เมื่อ AI เห็นโครงสร้างที่เป็นลำดับชั้น มันจะรู้ทันทีว่าตรงไหนคือ Slot (พื้นที่ว่างที่รอการใส่ Content) และตรงไหนคือจุดที่ต้องวาง Action เช่น:
CardActionน่าจะเป็นปุ่มหรือไอคอนที่อยู่มุมขวาบนCardContentคือพื้นที่สำหรับ Children เสมอ
2. เข้าใจ Pattern และ Logic ของระบบ
ถ้า Library ที่เพื่อนๆ ใช้มีการแชร์ State กัน (เช่น Tabs ที่ต้องรู้ว่าตอนนี้ Active ที่ตัวไหน) การเขียน Tree จะช่วยให้ AI เข้าใจว่าตัวลูก (TabTrigger) ต้องส่งข้อมูลกลับไปหาตัวแม่ (Tabs) อย่างไร ทำให้โค้ดที่ออกมามี Logic ที่ถูกต้องตั้งแต่ต้น
3. Mapping ชื่อได้แม่นยำ (Naming Convention)
AI จะยึดชื่อตามที่เราเขียนในกิ่งไม้เลยค่ะ ทำให้ Class Name หรือ Props ในโค้ดไม่เพี้ยนไปจาก Design System ที่เราวางไว้ใน Figma
วิธีเขียน Prompt แบบมือโปร (Copy ไปใช้ได้เลย!)
เวลาแอดนัทสั่งงาน AI แอดนัทจะกางโครงสร้างแบบนี้ใส่ไปใน Prompt เลยค่ะ ลองดูตัวอย่างนี้นะคะ
ตัวอย่างที่ 1: การสร้าง Card แบบ Complex
Prompt: "ช่วยสร้าง Component Card โดยใช้โครงสร้างแบบ Composition ดังนี้:
├── Card (Root container)
│ ├── CardHeader
│ │ ├── CardTitle (truncate if long)
│ │ ├── CardDescription
│ │ └── CardAction (hidden on mobile)
│ ├── CardContent (Padding: 20px)
│ └── CardFooter (Alignment: Right)ตัวอย่างที่ 2: ใส่ State และ Variant เข้าไปด้วย
ถ้าอยากให้ Advance ขึ้น แอดจะใส่สถานะไปที่กิ่งไม้เลยค่ะ:
Prompt: "สร้าง Tabs Component ตามโครงสร้างนี้:
├── Tabs (State: activeTab)
│ ├── TabList (Layout: Flex row)
│ │ └── TabTrigger (Variant: ghost/outline, State: disabled if props.locked)
│ └── TabContent (Animation: fade-in speed 0.2s)💡 ทริคเพิ่มเติมจากแอดนัท (Expert Tips)
- Mapping กับ Figma: ถ้าเพื่อนๆ ทำ Design System ใน Figma ไว้ ให้ตั้งชื่อ Layer หรือ Component ให้ตรงกับที่จะ Prompt ค่ะ เวลา Dev ส่งโค้ดกลับมา เราจะตรวจงานง่ายมาก
- ใส่ Rules สั้นๆ: สังเกตมั้ยคะว่าแอดจะใส่วงเล็บ
( )ท้ายชื่อกิ่งไม้ เพื่อบอก "เงื่อนไข" สั้นๆ เช่น(hidden on mobile)หรือ(variant: outline)วิธีนี้ได้ผลดีกว่าการเขียนบรรยายเป็นประโยคยาวๆ เยอะเลยค่ะ - Reuse Prompt: แอดแนะนำให้เก็บ Tree ของแต่ละ Component ไว้ใน Notion หรือ Obsidian พอจะใช้งานใหม่ก็แค่ก๊อปไปวาง แล้วเปลี่ยนรายละเอียดนิดหน่อย ชีวิตจะง่ายขึ้นแบบ 300%
สรุป Key Takeaway
การสื่อสารกับ AI ในยุคนี้ ไม่ใช่แค่การ "พูดภาษาคน" ให้เก่งเท่านั้น แต่คือการ "สื่อสารเชิงโครงสร้าง" ค่ะ ยิ่งเรากางโครงสร้าง (Composition) ให้ชัดเจน AI ก็ยิ่งทำงานได้แม่นยำ ประหยัด Token และที่สำคัญที่สุดคือ "เราคุมงานได้จริง" ไม่ใช่ปล่อยให้ AI สุ่มทำมาให้
เพื่อนๆ ลองเอาเทคนิค Tree Structure นี้ไปใช้กับ Project ของตัวเองดูนะคะ ได้ผลยังไง หรืออยากให้แอดนัทเจาะลึก Component ตัวไหนเป็นพิเศษ คอมเมนต์คุยกันข้างล่างได้เลยค่า!
แล้วเจอกันใหม่บทความหน้า สู้ๆ กับการปั่นงานนะคะทุกคน! 😊
บทความที่เกี่ยวข้องแนะนำ:
