Skip to main content

CSS AI Prompt Templates

Copy, paste, and fill in the [BRACKETS]. These are battle-tested prompt structures for getting production-quality CSS output from Claude, ChatGPT, or Copilot.

0. System Context Block (Add to Every Prompt)​

Paste this once at the start of a new AI session:

You are a CSS specialist working within my established design system.

Rules for ALL output:
- BEM naming: .c-block__element--modifier (components), .o-* (objects), .u-* (utilities), .l-* (layout), .is-* (states)
- Use CSS custom properties from my :root tokens (listed below)
- Mobile first: base styles → @media (min-width: ...) enhancements
- Use clamp() for fluid font sizes and spacing
- Use logical properties where possible (margin-inline, padding-block, inset)
- Native CSS nesting is OK (max 2 levels deep)
- No !important unless absolutely necessary
- Always include :focus-visible for interactive elements
- Include prefers-reduced-motion override for any animations

My tokens:
[PASTE YOUR :root { } BLOCK HERE]

1. Component Build​

Build a [COMPONENT NAME] component.

Requirements:
- [Describe visual appearance: shape, colors, sizes]
- States: default, hover, focus, active, disabled, [loading]
- Variants: [list modifier classes: --primary, --outline, --sm, --lg]
- [Responsive behavior if any]

BEM base class: .c-[name]
Use tokens: [list specific token names or paste :root block]

Output format:
1. HTML structure (semantic, accessible)
2. Complete CSS (all states and variants)
3. Note any JS required

2. Layout Build​

Build a [LAYOUT NAME] layout.

Specifications:
- Columns: [describe: 12-col grid / sidebar+content / 3-up cards]
- Breakpoints: [mobile: stacked] → [tablet: 2-col at 768px] → [desktop: 3-col at 1024px]
- Container max-width: [1200px / 1440px]
- Gap: [use my --gap-* tokens or specify]

Use:
- CSS Grid for [main layout]
- Flexbox for [inner alignment]
- auto-fill/minmax for [card grids]

BEM: .l-[name] (layout), .o-[name] (object)
Output: HTML + CSS

3. Dark Mode Token Generation​

Generate a complete CSS design token system with dark mode support.

Brand colors:
  Primary: [hex or description e.g. "deep purple"]
  Accent:  [hex or description]
  Style:   [dark/light/neutral] default

Token categories needed:
  - Color scale (primary, secondary, neutral, semantic: success/danger/warning/info)
  - Background layers (bg, surface, surface-2, surface-3)
  - Text (default, muted, subtle, disabled, inverse)
  - Border (light, default, strong)
  - Shadows (sm, md, lg, primary-glow)
  - Spacing scale (4px base, tokens 1–16)
  - Typography (font families, sizes as clamp, weights, line-heights)
  - Border radius (sm, md, lg, xl, pill)
  - Z-index scale
  - Transition/easing tokens

Format:
:root { /* light mode defaults */ }
[data-theme="dark"] { /* dark mode overrides */ }
@media (prefers-color-scheme: dark) { /* system dark fallback */ }

Use OKLCH for all colors. Include HEX fallback as comments.
Output: complete :root block I can paste into style.css

4. Responsive Component Fix​

This component breaks at [SCREEN SIZE]. Fix it.

Current CSS:
[PASTE EXISTING CSS]

Current HTML:
[PASTE EXISTING HTML]

Problem: [describe: "cards stack badly", "text overflows", "nav disappears"]

Fix requirements:
- Mobile: [describe desired behavior]
- Tablet (768px+): [describe]
- Desktop (1024px+): [describe]
- Keep existing BEM class names
- Don't change the HTML structure

5. Animation / Transition​

Add animations to [COMPONENT/INTERACTION].

Interactions to animate:
1. [On page load: cards fade up with stagger]
2. [On hover: card lifts with shadow]
3. [On click: button press scale]
4. [On menu open: slides down from top]

Specifications:
- Duration: [snappy: 0.2s / normal: 0.3s / dramatic: 0.5-0.8s]
- Easing: [ease-out for enters / ease-in for exits / cubic-bezier(0.34,1.56,0.64,1) for bounce]
- Stagger delay for multiple items: [0.1s between each]

Requirements:
- Use CSS transitions for hover states (not JS)
- Use @keyframes for entrance animations
- Include prefers-reduced-motion: disable all animations
- GPU-accelerated properties only: transform and opacity

Output: CSS only (no JS unless scroll-trigger is needed)

6. WordPress Override​

I need to override [PLUGIN/THEME] CSS in my WordPress child theme.

Target: [describe the element: WooCommerce add-to-cart button / CF7 form submit / GeneratePress nav]

Desired result: [describe appearance]

My existing tokens: [paste :root or reference]

Rules:
- Inspect the original selector and tell me its specificity score
- Beat it with [one extra class / nested combinator] — not !important
- Output: compiled CSS I can paste into child theme style.css
- Note if I need to enqueue-dequeue via functions.php

7. Full Landing Page​

Build a complete [NICHE] landing page CSS system.

Page sections needed:
1. Hero: [full-height / half-height, background: image/gradient/video]
2. Features: [3-col grid / alternating left-right]
3. Testimonials: [card grid / carousel]
4. Pricing: [2 or 3 tiers]
5. CTA section: [full-bleed with gradient]
6. Footer: [multi-column links + copyright]

Style direction: [modern dark SaaS / clean light agency / bold creative / minimal editorial]
Primary color: [description or hex]
Font: [Inter / Playfair / Manrope / custom]

Output:
1. Complete :root design token system
2. CSS reset + base
3. All section CSS (BEM, mobile-first)
4. HTML structure for each section
5. Utility classes I'll reuse across sections

8. Audit and Fix AI-Generated CSS​

Audit and fix this AI-generated CSS for production quality.

CSS to review:
[PASTE CSS]

Check for:
1. ❌ !important usage — replace with specificity fix
2. ❌ Hardcoded colors — replace with var(--token-name)
3. ❌ Non-BEM class names — rename to .c-block__element--modifier pattern
4. ❌ Missing focus styles — add :focus-visible to interactive elements
5. ❌ Missing prefers-reduced-motion — add for any animations
6. ❌ px font-sizes — replace with rem or clamp()
7. ❌ Outdated vendor prefixes — remove or update (see 2026 status)
8. ❌ Deep descendant selectors (>3 levels) — flatten to BEM
9. ❌ Inline px values for spacing — replace with token references

Return: corrected CSS with inline comments explaining each change

9. Design Token Translation​

I have a design in [Figma / a screenshot / this description].

Extract and format as CSS design tokens:

From: [PASTE FIGMA VALUES or DESCRIBE: "uses #1a1a2e background, #6c63ff primary..."]

Format output as:
:root {
  /* COLORS */
  --color-*: [oklch value]; /* [hex value] */
  
  /* TYPOGRAPHY */
  --font-*:  [value];
  --text-*:  clamp([min], [fluid], [max]);
  
  /* SPACING */
  --space-*: [value];
  
  /* RADIUS */
  --radius-*: [value];
  
  /* SHADOWS */
  --shadow-*: [CSS box-shadow value];
}

Also: identify any design decisions I should know about (contrast ratios, font pairings)

10. clip-path Shape​

Create a CSS clip-path shape for [USE CASE].

Shape needed: [diagonal section / hexagon / arrow / blob / circle reveal]
Element size: [dynamic width, fixed height / aspect-ratio]
Animation: [yes: describe trigger / no]

If animated:
- Trigger: [hover / JS class toggle / scroll]
- Direction: [inward / outward / left-to-right / radial]
- Duration: 0.4s, ease-out

Output:
- clip-path polygon() or other value with coordinates annotated
- @keyframes if animated
- Any required HTML wrapper structure

11. Component Variant System​

Generate a complete variant system for .c-[NAME].

Base component CSS: [PASTE OR DESCRIBE]

Variants needed:
  Size:   --sm --md (default) --lg --xl
  Color:  --primary --secondary --outline --ghost --danger --success
  State:  .is-loading .is-disabled .is-active

Token references: [paste :root]

Rules:
- Each variant only overrides what changes from base
- Use CSS custom property variance within the component:
  .c-btn { --_bg: var(--color-primary); background: var(--_bg); }
  .c-btn--secondary { --_bg: var(--color-secondary); }
- This way variants only change the local variable, not the property

Output: complete CSS for all variants

12. WordPress Theme Setup​

Set up a WordPress child theme CSS architecture.

Theme: [GeneratePress / Astra / Kadence / Hello Elementor / Blank]
Builder: [None / Bricks / Elementor / Gutenberg]

Create:
1. style.css: theme header + custom property tokens + global resets
2. functions.php snippet: correct enqueue with parent theme + versioning
3. BEM naming system for custom classes alongside theme classes
4. Strategy for overriding [specific plugin]: [WooCommerce / CF7 / Gravity Forms]

My brand: [paste colors and fonts]
Output: ready-to-paste code for each file

Quick Prompt Fragments (Mix and Match)​

Naming:    "Use BEM naming: .c-block__element--modifier"
Tokens:    "All colors/spacing via var(--token-name) from my :root"
Mobile:    "Mobile-first: base → @media (min-width: 768px)"
Nesting:   "Use native CSS nesting, max 2 levels deep"
Motion:    "Include prefers-reduced-motion override for all animations"
Focus:     "Use :focus-visible for all interactive elements"
Fluid:     "All font sizes as clamp(min, fluid-vw, max)"
Logic:     "Use logical properties: margin-inline, padding-block, inset"
Output:    "Output: 1) HTML 2) CSS 3) Any JS notes"
Fix:       "Do NOT change the HTML structure or class names"
Review:    "After generating, self-review for: !important, hardcoded colors, missing a11y"