Questions tagged [css]
Post a PromptPrompts focused on styling and visual design.
29 prompts
51votes
2answers
6.3kviews
A reusable system prompt for consistent design direction across a whole landing page
The hardest part of prompting UI isn't any single section, it's consistency. Ask for a hero, then a pricing block, then a footer in separate turns and you get three subtly different design languages:
47votes
3answers
5.3kviews
Reduced-motion-first system prompt so every animation ships with a safe fallback
We had animations scattered across the codebase and maybe half respected prefers-reduced-motion. Auditing after the fact is miserable. I wanted motion to be safe by construction, not by review. So I m
33votes
1answers
3.3kviews
Scroll-driven reveal animations that don't nuke accessibility or jank the scroll
I wanted sections to fade and rise as they enter the viewport, but every prompt result either used a heavy IntersectionObserver soup or animated top/margin and made the scroll stutter on a mid-range p
31votes
2answers
3.2kviews
One-shot prompt for a hero section that doesn't look like every other SaaS gradient
Every time I asked for a "modern SaaS hero" I got the exact same thing: centered headline, full-width purple gradient, a floating dashboard screenshot in fake browser chrome, and a three-emoji feature
26votes
2answers
2.9kviews
How I prompt for an accessible signup + first-run flow that passes an audit by default
We failed an accessibility audit on our signup once: unlabeled inputs, an error summary that never got announced, focus that jumped to the top of the page after validation. Retrofitting a11y is misera
24votes
1answers
4.3kviews
Admin dashboard prompt that doesn't produce the same three gray shadcn cards
Every dashboard I one-shotted came out as the identical layout: three stat cards on top, a big line chart, a table. Technically fine, visually indistinguishable from every other AI dashboard on the in
24votes
2answers
4.2kviews
System prompt for a dark-mode-first design token set that isn't just inverted grays
Every "add dark mode" prompt gives me pure black backgrounds, fff text, and one flat gray for everything. It looks like a terminal, not a product, and the contrast is actually too harsh at night. I tu
22votes
2answers
2.9kviews
One-shot prompt that builds a complete SaaS landing page with pricing table
I kept iterating on landing page prompts and finally landed on one that reliably produces a polished SaaS landing page in a single shot: hero, feature grid, pricing table, FAQ, and footer, all respons
21votes
2answers
3.6kviews
CSS-only accordion that animates open using grid-template-rows 0fr to 1fr
The eternal problem: you can't transition height: auto, so every accordion prompt gives me either a JS height-measuring hack or a max-height guess that's either clipped or has a laggy delay when conte
21votes
1answers
2.8kviews
Accessible hover and focus states in one prompt, with a banned-patterns list
The recurring failure: models give me pretty hover effects that vanish for keyboard users, remove the focus outline "because it's ugly", or convey state with color alone. I got tired of fixing the sam
15votes
2answers
1.7kviews
Prompt for a PWA that works offline first try, without a service worker that caches stale forever
I build mobile web that should feel native, and the classic failure is a service worker that caches so aggressively users get a stale app for days and can't figure out why the update never lands. My p
14votes
2answers
2.3kviews
How do you prompt GPT for an editorial, type-driven landing hero (think magazine, not startup)?
I come from print. I want landing heroes that feel like the opening spread of a good magazine: a strong typographic idea, real hierarchy, confident negative space. What I keep getting from GPT is a co
13votes
0answers
1.3kviews
Chart theming as design tokens so every chart in the app matches
We had six charts built by four people and they all looked slightly different: different grays for gridlines, different fonts, three shades of the same 'brand blue'. I wanted the model to generate a s
12votes
1answers
1.6kviews
Risograph-style generative poster grid that looks printed, not rendered
I wanted that two-color risograph print feel: slightly misregistered layers, grainy ink, limited palette. Straight prompts gave me clean flat vector art that screamed 'computer', not 'printed on a Ris
12votes
0answers
2.0kviews
How do I prompt for a Next.js dashboard that doesn't look like every other admin template?
Every time I ask for "a dashboard in Next.js" I get the same shadcn-flavored gray boxes. I built a genuinely distinctive analytics dashboard using the prompt below, which forces an editorial, print-in