Prompt Engineering Cho Component Generation: Templates Và Patterns Hiệu Quả

AI code generation chỉ tốt bằng prompt bạn viết. Sau hàng trăm lần generate components, mình đúc kết được những prompt patterns cho kết quả consistent nhất.

Anatomy of a Good Component Prompt

Một prompt hiệu quả cần 5 elements: Component type, Visual description, Behavior, Tech stack constraints, và Edge cases.

Pattern 1: Structured Component Brief

Template này cho kết quả stable nhất:

Create a [component type] with the following specs:

**Visual:**
- [Layout description]
- [Color/typography requirements]
- [Responsive behavior]

**Functionality:**
- [User interactions]
- [State changes]
- [Data flow]

**Technical constraints:**
- React + TypeScript (strict, no any)
- Tailwind CSS for styling
- shadcn/ui for base components
- Must be accessible (WCAG 2.1 AA)

**Props interface:**
- [List expected props with types]

**Edge cases:**
- [Empty state]
- [Loading state]
- [Error state]
- [Long text overflow]

Pattern 2: Example-Driven Prompt

Khi bạn có design reference, pattern này rất hiệu quả:

Build a notification dropdown similar to GitHub's notification bell.

Behavior:
- Click bell icon to toggle dropdown
- Badge shows unread count (hide when 0)
- List items grouped by "Today", "This week", "Earlier"
- Each item: icon + title + description + timestamp
- "Mark all as read" button in header
- Click item navigates and marks as read
- Keyboard: Escape closes, arrow keys navigate items

Output as single React component using:
- TypeScript with explicit interfaces
- Tailwind CSS
- Lucide icons
- Popover from shadcn/ui

Pattern 3: Iteration Prompts

Sau khi có v1, dùng focused iteration prompts:

• Accessibility: "Add ARIA labels, keyboard navigation, focus trap, and screen reader announcements"
• Performance: "Memoize expensive renders, virtualize the list if more than 50 items"
• Error handling: "Add error boundary, loading skeleton, empty state, and retry logic"
• Testing: "Generate unit tests covering: render, user interactions, edge cases, accessibility"

Anti-patterns cần tránh

• Quá vague: "Make a dashboard" — AI sẽ hallucinate requirements
• Quá dài: Prompt 2000 words thường cho kết quả worse hơn 500 words focused
• Mixing concerns: Đừng yêu cầu UI + API + database trong 1 prompt
• No constraints: Không specify tech stack = AI chọn random libraries

Pro Tips

• Luôn specify "TypeScript strict, no any" — nếu không AI sẽ lười và dùng any
• Include prop interface trong prompt giúp AI structure code tốt hơn
• Yêu cầu "single file, no external dependencies beyond [list]" để avoid bloat
• Nếu output không đúng, đừng repeat prompt — rephrase với more specific language
• Save working prompts thành template library cho team

Prompt engineering cho code generation là skill learnable. Invest thời gian build template library cho team, và bạn sẽ thấy consistent improvement trong output quality.