Skip to main content

CSS AI Prompt Templates Library

Copy-paste prompts organized by task. Each prompt follows the Element + Layout + Style + Constraints formula for consistent, production-ready AI output.

How to Use These Prompts​

  1. Copy the prompt template.
  2. Replace [BRACKETED] placeholders with your specifics.
  3. Paste your token block where indicated — this ensures AI uses your design system.
  4. Run in Claude, ChatGPT, Cursor, or your preferred AI tool.

🏗️ Layout Components​

Hero Section​

Build a full-viewport hero section using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Height: 100dvh with centered content (flex or grid)
- Background: dark overlay over an image with gradient mask
- Text: large clamp() headline, subtitle, two CTA buttons (primary + outline)
- Subtle animated gradient mesh in background
- Fully responsive — text scales with clamp()
- Output: semantic HTML5 + vanilla CSS using BEM naming
Build a responsive navbar using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Desktop: horizontal, space-between, sticky top with backdrop-filter glass
- Mobile: hamburger menu that slides in from the left
- Logo left, links center/right, CTA button far right
- Active link indicator using CSS (no JS needed)
- Smooth transition between states
- WCAG focus-visible outlines on all interactive elements
- Output: semantic HTML nav element + vanilla CSS + minimal JS for hamburger

Card Grid​

Build a responsive card grid using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Auto-fill columns: repeat(auto-fill, minmax(300px, 1fr))
- Each card: image top (16:9 aspect ratio), body with category label, title, excerpt, CTA
- Hover: lift (translateY) + box-shadow transition
- Container queries: card switches to horizontal layout when container > 400px
- BEM class names: .card, .card__image, .card__body, .card__title, .card__btn
- Output: HTML structure for one card + complete CSS

Pricing Table​

Build a 3-column pricing table using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- 3 tiers: Basic, Pro (featured, highlighted), Enterprise
- Pro tier: visually elevated (larger, border, glow shadow)
- Feature list with ✓ / ✗ icons
- CTA button in each card
- Responsive: stack to 1 column on mobile
- Animated "Most Popular" badge
- Output: semantic HTML table-like structure + complete CSS

🎨 UI Components​

Button System​

Create a complete button component system using CSS variables:
[PASTE :root BLOCK]

Include these variants:
- .btn (base)
- .btn--primary (filled primary color)
- .btn--outline (bordered)
- .btn--ghost (text only)
- .btn--danger (red)
- .btn--sm and .btn--lg (size modifiers)
- .btn--loading (with CSS spinner)
- Disabled state for all variants
- Hover/focus/active micro-animations
- WCAG 2.1 AA focus-visible ring
- Output: all button HTML examples + complete CSS

Form Component​

Build a complete form component using these CSS variables:
[PASTE :root BLOCK]

Include:
- Text input, email input, password input (with toggle eye icon)
- Textarea (auto-resize)
- Select dropdown (custom styled)
- Checkbox and radio (custom styled, pure CSS)
- Error state (red border + error message below)
- Success state (green border + check icon)
- Disabled state
- Focus state with glow ring
- Output: HTML form structure + complete CSS using BEM (.form, .form__group, .form__input, etc.)

Modal / Dialog​

Build a CSS-first modal dialog using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Full-screen backdrop (fixed, rgba dark overlay)
- Centered dialog card (max-width: 560px, border-radius)
- Header with title + close X button
- Scrollable body area
- Footer with cancel/confirm buttons
- Open animation: scale from 0.9 + fade in (0.3s)
- Close animation: reverse
- Keyboard accessible (focus trap, Escape to close)
- Uses <dialog> HTML element
- Output: HTML + CSS + minimal JS for open/close

Toast / Notification​

Build a toast notification system using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Fixed bottom-right corner, stacks vertically
- 4 types: success (green), error (red), warning (yellow), info (blue)
- Each toast: icon + message + optional dismiss X
- Slide in from right, auto-dismiss after 4s with progress bar
- Exit animation: slide out + fade
- Accessible (role="alert", aria-live="polite")
- Output: HTML structure + CSS + JS class to add a toast dynamically

🎯 Page Sections​

Feature Section (3-Column Grid)​

Build a "features" section with icon + title + description cards.
Use these CSS variables: [PASTE :root BLOCK]

Requirements:
- Section title + subtitle centered at top
- 3-column grid on desktop, 1-column on mobile
- Each card: icon (svg or emoji), title, 2-line description
- Hover: subtle lift and icon color change
- Staggered scroll-fade-in animation (CSS keyframes + Intersection Observer)
- Output: HTML section + complete CSS

Testimonials / Social Proof​

Build a testimonial carousel using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- Horizontal scroll-snap carousel on mobile
- 3-column grid on desktop
- Each testimonial: star rating, quote text, avatar + name + role
- Glass card aesthetic (backdrop-filter)
- Previous/Next buttons
- Auto-play with pause on hover
- Output: HTML + CSS + minimal JS for carousel

FAQ Accordion​

Build an accessible FAQ accordion using these CSS variables:
[PASTE :root BLOCK]

Requirements:
- List of questions, click to expand answer
- Uses <details>/<summary> HTML elements (no JS needed)
- Smooth expand/collapse animation with CSS @keyframes
- Open indicator: rotating chevron icon (CSS transition)
- Only one item open at a time (JS fallback with radio trick)
- Subtle bottom border between items
- Output: HTML + CSS (+ optional JS for one-at-a-time behavior)

🔧 Converting AI Output​

Tailwind → Vanilla CSS​

Convert this Tailwind-based HTML component to semantic vanilla CSS.

Original HTML:
[PASTE TAILWIND HTML]

Requirements:
- Use BEM naming (.card, .card__body, .card__title, etc.)
- Replace ALL Tailwind utility classes with CSS properties
- Use these CSS variables for values: [PASTE :root BLOCK]
- Match Tailwind's spacing scale: 4=1rem, 6=1.5rem, 8=2rem
- Output: clean HTML (class="...") + complete separate CSS block

Design Screenshot → CSS​

Look at this design screenshot and write the HTML + CSS to implement it.

[ATTACH SCREENSHOT]

Requirements:
- Use these CSS variables: [PASTE :root BLOCK]
- BEM naming convention
- Mobile responsive (add media queries where needed)
- No external libraries — vanilla CSS only
- Pixel-accurate recreation matching the design's spacing, typography, and colors
- Output: full HTML file with embedded or separate CSS

v0.dev / Figma → WordPress​

Convert this component code to work inside WordPress (GeneratePress/Bricks Builder).

Original code:
[PASTE COMPONENT CODE]

Requirements:
- Wrap all CSS in a descriptive comment block for child theme
- Use WordPress-compatible class names (no conflicts with .wp-* classes)
- Replace hardcoded colors with these CSS variables: [PASTE :root BLOCK]
- Add CSS specificity comments explaining any !important usage
- Output: child theme CSS ready to paste into Appearance > Additional CSS

🔍 Debugging Prompts​

Specificity Conflict​

My CSS rule is being overridden. Help me fix it without using !important.

My rule:
[PASTE YOUR CSS]

The winning rule (from DevTools):
[PASTE WINNING RULE]

The HTML element:
[PASTE ELEMENT HTML]

Explain why mine loses and show me 2 ways to fix it.

Responsive Bug​

This component looks broken on mobile. Debug it:

HTML:
[PASTE HTML]

CSS:
[PASTE CSS]

Issue: [DESCRIBE THE VISUAL BUG]
Screen width where it breaks: [e.g., 375px iPhone]

Identify the cause and provide a fix.