Styling & CSS Prompts
Prompt styling that uses your approach and tokens, describes layout in intent, and handles responsive and theming needs.
TL;DR
- State your styling approach, Tailwind, CSS Modules, styled-components, and your tokens.
- Describe layout by intent ('three equal columns that stack on mobile'), not pixel guesses.
- Ask for responsive behavior and theming explicitly; models default to one fixed desktop size.
Set The Approach
Name The MethodTailwind, CSS Modules, styled-components, or plain CSS, be explicit.
"Tailwind v4 utility classes only.
No inline styles."Use TokensPoint at your design tokens so values stay consistent.
"Spacing, color, radius from our
tokens. No arbitrary values."Match ExistingReference a styled file to copy conventions.
"Match the class patterns in
Card.module.css."Describe Layout By Intent
Goal, Not PixelsSay what the layout should achieve and let the model pick mechanics.
"Sidebar fixed 240px, content fills
the rest, no horizontal scroll."Alignment & FlowDescribe alignment, wrapping, and spacing behavior.
"Items wrap, equal gaps, centered
when there's one row."Overflow RulesState what happens when content is too long or too much.
"Truncate with ellipsis; scroll the
list, not the page."Responsive & Theming
Per-BreakpointSay what changes at each breakpoint, not just 'make it responsive'.
"3 cols >=1024px, 2 cols >=640px,
1 col stacked below."Relative UnitsPrefer rem, %, and fluid sizing over fixed pixels.
"Use rem and clamp(); avoid fixed
px widths on text."Dark ModeRequest a themeable variant tied to your mechanism.
"Dark mode via CSS variables and
our theme toggle."Keep It Maintainable
No Magic NumbersReplace stray pixels and hex with tokens and scales.
"No one-off #3b82f6; use
token 'primary'."Reduced MotionAsk animations to respect prefers-reduced-motion.
"Wrap transitions in a
prefers-reduced-motion guard."Check Real WidthsPreview at phone, tablet, and desktop, not just your screen.
Resize to 360px: does it stack
cleanly?Tips
- Give your spacing, color, and breakpoint tokens so styles are consistent and themeable.
- Describe the responsive behavior per breakpoint rather than hoping the model infers it.
Warnings
- Models reach for inline styles and hard-coded pixels and colors; insist on your tokens and utilities.
- Generated CSS often ignores dark mode, reduced motion, and small screens unless you ask.
In Practice
A layout request described by intent, pinned to Tailwind and your tokens, with explicit responsive behavior and dark mode, so you get maintainable styles that work on every screen.
- The approach and tokens are pinned so no arbitrary values sneak in.
- The layout is described by intent, letting the model choose grid or flex.
- Each breakpoint's behavior is spelled out, so nothing breaks on mobile.
- Dark mode and reduced motion are requested up front, not retrofitted.
Style a responsive product grid.
Approach: Tailwind v4 utilities only, use our tokens
(spacing, color, radius). No inline styles, no
arbitrary values, no one-off hex.
Layout (by intent):
- cards in a grid with equal gaps
- >=1024px: 4 per row; >=640px: 2 per row;
below: 1 per row, stacked
- card images keep aspect ratio; titles truncate to
one line; no horizontal page scroll at any width
Theming: support dark mode via our CSS-variable tokens.
Respect prefers-reduced-motion for hover transitions.
Return the component's markup with classes.FAQ
Name the approach and the tokens. 'Tailwind v4, use our spacing and color tokens, no arbitrary values' or 'CSS Modules, use the variables in theme.css'. Without this, the model invents one-off colors and pixel values that drift from your system.
By intent and behavior, not exact pixels. 'A responsive grid: three equal cards per row on desktop, two on tablet, one stacked on mobile, with consistent gaps' gives the model the goal. It then picks the right fl/grid mechanics.
Because the model optimizes for a single desktop view unless told otherwise. Specify the breakpoints and what should change at each, and ask it to use relative units and wrap/stack behavior so the layout adapts instead of overflowing.
Yes, if you set it up. Ask for styles driven by CSS variables or tokens and request a dark-mode variant tied to your theme mechanism. Then the same components restyle by swapping token values rather than duplicating CSS.