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.4kviews
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
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
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
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
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
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
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