Prompting for UI Design
How to write effective prompts for AI tools that generate UI designs, components, and code. Specific techniques that get better results.
The quality of your AI output is directly proportional to the quality of your prompt. Here's how to prompt effectively for design work.
Be specific about context: Instead of 'design a dashboard', try 'Design a SaaS analytics dashboard for a B2B product. It should have a left sidebar navigation, a top bar with user profile, and the main area should show 4 metric cards at the top followed by a line chart and a data table.'
Reference existing patterns: 'Make it look like Linear's project view' or 'Follow the layout patterns of Stripe's dashboard' gives the AI a strong reference point.
Specify the technical stack: 'Use React, Tailwind CSS, and shadcn/ui components' helps AI generate code that fits your project.
Iterate in layers: Start with layout and structure, then refine colors and typography, then add interactions and animations. Don't try to get everything perfect in one prompt.
Include constraints: 'Must be accessible (WCAG AA)', 'Mobile-first responsive design', 'Dark mode support' — constraints actually help AI produce better output.