Questions tagged [css]
Post a PromptPrompts focused on styling and visual design.
29 prompts
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
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
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
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:
10votes
0answers
1.3kviews
Touch bottom-sheet micro-interaction that feels native without a JS animation lib
Building a PWA and the bottom sheet is the make-or-break interaction. The generated versions animated height (janky), had no drag affordance, and snapped instantly instead of easing, so it felt like a
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
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
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
11votes
2answers
2.2kviews
One-shot prompt for a subgrid card layout where every card's footer lines up
I kept getting card grids where the CTA button floated at a different height on every card because each card is its own grid. The naive prompt ("responsive card grid with title, body, button") always
9votes
1answers
2.0kviews
Prompt that bakes accessibility into a chart instead of bolting it on later
Our charts passed a visual review and failed an a11y audit hard: color-only encoding, no keyboard access, screen readers announcing a wall of unlabeled paths. Retrofitting was miserable, so I moved th
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
10votes
1answers
1.7kviews
Staggered list entrance where items cascade in without a JS timeline library
I wanted a list where items rise and fade in one after another, the classic stagger. My first prompts hardcoded animation-delay per child, which breaks the moment the list length changes, and used a l
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
11votes
1answers
1.4kviews
Using :has() to restyle a form layout when a checkbox is toggled, no JS state
I have a shipping form with a "billing address same as shipping" checkbox. Toggling it should collapse the billing fields and shift the layout. I was about to reach for JS class toggling out of habit.