Best Practices & Tips
Master the art of prompt engineering with these proven techniques
Be Specific About Functionality
Instead of 'create a form', say 'create a contact form with name, email, message fields, validation, and email sending capability'
❌ Make a dashboard ✅ Create an analytics dashboard with revenue charts, user metrics, and data tables
Define User Interactions
Clearly describe how users will interact with your application
❌ Add buttons ✅ Add a primary CTA button that opens a modal with form validation
Specify Data Requirements
Mention what data your app will handle and how it should be structured
❌ Show user info ✅ Display user profile with avatar, name, email, role, and last login timestamp
Specify Your Tech Stack
Always mention the frameworks and libraries you want to use
✅ Use Next.js 14 with App Router, TypeScript, and Tailwind CSS
Include Integration Requirements
Mention any external services or APIs you need
✅ Integrate with Stripe for payments and send confirmation emails via Resend
State Your Architecture Preferences
Specify if you need server components, client components, or specific patterns
✅ Use Server Components for data fetching and Client Components for interactive elements
Describe Visual Style
Be specific about the design aesthetic you want
✅ Modern, minimalist design with clean lines, subtle shadows, and plenty of whitespace
Specify Responsive Behavior
Always mention mobile and desktop requirements
✅ Responsive design that works on mobile (stack vertically) and desktop (side-by-side layout)
Include Accessibility Needs
Mention accessibility requirements upfront
✅ Include proper ARIA labels, keyboard navigation, and screen reader support
Define User Flows
Describe the complete user journey through your application
✅ User lands on homepage → clicks CTA → fills form → sees confirmation → receives email
Specify Error Handling
Mention how errors should be handled and displayed
✅ Show inline validation errors, loading states, and user-friendly error messages
Include Edge Cases
Think about empty states, loading states, and error scenarios
✅ Show empty state when no data, skeleton loading, and retry buttons on errors
Mention Performance Requirements
Specify any performance considerations or optimizations needed
✅ Implement lazy loading for images and infinite scroll for large datasets
Security Considerations
Include security requirements, especially for forms and user data
✅ Implement CSRF protection, input sanitization, and secure authentication
SEO Requirements
Mention if you need SEO optimization or specific meta tags
✅ Include proper meta tags, structured data, and server-side rendering for SEO
Before Submitting Your Prompt:
- ✓ Specified the framework (Next.js, React, etc.)
- ✓ Included styling approach (Tailwind, CSS modules, etc.)
- ✓ Described the complete functionality
- ✓ Mentioned responsive design needs
- ✓ Included user interaction details
Advanced Considerations:
- ✓ Error handling and loading states
- ✓ Accessibility requirements
- ✓ Performance optimizations
- ✓ Integration requirements
- ✓ Security considerations