Prompting CSS with AI
The quality of AI-generated CSS is entirely determined by the quality of your prompt. This page is a practical guide to writing prompts that get production-quality results.
1. The CSS Prompt Formula
A good CSS prompt answers these questions:
- What element? (Hero section, card, nav bar, footer)
- What layout? (Flexbox/Grid, center, columns)
- What visual style? (Dark mode, glassmorphism, minimal)
- What constraints? (Mobile-first, max-width, specific colors)
- What interaction? (Hover effects, transitions, animations)
2. Prompt Template
Create a [element] using HTML and CSS.
- Layout: [flexbox/grid/position] — [describe arrangement]
- Colors: [palette, hex codes, or theme]
- Typography: [font, size, weight]
- Spacing: [padding, margin values or scale]
- Responsive: [breakpoints or mobile-first]
- Effects: [shadows, transitions, hover states]
Output clean, semantic HTML with embedded CSS variables in :root.
3. Real Prompt Examples
❌ Weak Prompt (Vague)
Make me a nice hero section with a background image.
✅ Strong Prompt (Specific)
Create a full-width hero section with:
- min-height: 100vh, flexbox centered content
- Dark overlay using rgba(0,0,0,0.55) on top of background-image
- h1 font-size: clamp(2rem, 6vw, 5rem), white, letter-spacing: -1px
- A CTA button: background #f5a623, border-radius 5px, padding 14px 32px, hover darkens by 10%
- CSS variable --hero-bg pointing to the image URL
- Fully responsive, mobile-first
Output: complete HTML file with <style> block.
4. Iteration Prompts
Once you receive code, use follow-up prompts to refine:
| Goal | Prompt |
|---|---|
| Make it responsive | "Add media queries for 768px and 1024px breakpoints" |
| Adjust spacing | "Increase padding on the section to 6rem 2rem" |
| Add animation | "Fade in the h1 from bottom using CSS keyframes on page load" |
| Fix a bug | "The card text is overflowing on mobile—fix the layout" |
| Extract variables | "Refactor all colors and spacing into CSS custom properties" |
5. Asking AI to Explain Code
Always ask AI to explain what it generated:
Explain this CSS line by line, focusing on why each property was chosen.
This is the fastest way to learn CSS while shipping.
6. Common AI CSS Mistakes to Watch For
- Magic numbers: Hardcoded pixel values that break on resize.
- Missing
box-sizing: border-box: Causes padding to blow out layouts. - Overly specific selectors: Makes CSS hard to override later.
- No fallbacks: Missing
font-familygeneric fallback. - Inline styles mixed with classes: Hard to maintain.