Act as art direction: every screen has a point of view that wouldn't work for just any SaaS. Tokens, rhythm and screen siblings: better-web-interface. Top navigation: better-headers. Product contract: design-system. Cinematic scroll: cinematographic-websites. Apple style: apple-inspired-websites. Native: better-mobile-interface.
Repo brand and DS win. Complete only the axis the brief left open — and don't spend that freedom on a model default.
Brief before CSS
Pin down in a few lines (if the user didn't pin it, choose and declare):
- Subject — the real product/material, not an “innovative platform”.
- Audience — who uses the screen.
- One job — what the page does in one sentence.
- Tone — editorial, workshop, laboratory, club, archive… derived from the subject.
Identity comes from the subject's world (materials, instruments, places, vernacular). Real content in the layout — not lorem + cards.
Signature
One memorable thing: a display face, a photo crop, an atypical grid, a well-placed bit of motion. The rest stays quiet.
- Maximalism: rich execution on the chosen axis.
- Minimalism: precision of space and type, not “generic emptiness”.
- Don't stack five tricks (glass + gradient + 3D blob + numbered 01 + bento).
Media (required)
Hero and key sections carry photography, illustration or real product — img with alt useful, srcset/sizes if the project already uses it. An icon alone in a colored circle does not replace media.
| Use | Avoid |
|---|---|
| Photo/illustration from the domain (kitchen, stage, workshop, street, product) | Gray placeholder, div empty, purple 3D mesh/orb |
| Repo assets or stable stock URL with a specific | generic “abstract technology” |
| One icon family (the project's; otherwise just one) | Lucide + Heroicons + emoji mixed together |
| Icon as support (nav, action, list) | Feature grid = three icons = the entire visual |
width/height or aspect-ratio so the layout doesn't jump |
Hero with only a gradient and a headline |
Copy is material: names the user recognizes, a CTA that says what happens, actionable empty/error states. No “Unlock the power of”, “Seamless”, “Next-generation” without substance.
Blacklist (only if the brief asks for it)
These looks are model defaults independent of the subject. They are not the “free” choice:
- Cream ≈
#F4F1EA+ display serif + terracotta/sage accent - Near-black + an acid accent (green / vermilion / cyan)
- Broadsheet: hairline, radius 0, “newspaper” columns throughout the SaaS
- Inter or Roboto alone, with no display pairing, + indigo/purple
- Indigo/violet gradient + glassmorphism on cards/nav
- Three identical cards with icon + title + paragraph
- Bullets
01 / 02 / 03when the content is not a sequence - Bento grid + pills + stat strip + made-up “as seen in” logos
- Fake testimonials, generic avatars, 10x metrics with no source
- Hero with two competing CTAs and an empty dashboard screenshot
If the brief asks for one of these axes, follow the brief. Otherwise, run.
Process (two passes)
1. Plan (don't show CSS yet):
- Color: 4–6 hex named (not vague “primary/secondary”).
- Type: display with character (with restraint) + body + optionally utility for data.
- Layout: one sentence + the job of the screen (not a wireframe of 12 cards).
- Signature: the element the person remembers tomorrow.
2. Self-critique: if the same plan would work for a CRM, a fintech, and a coffee blog, redo the free axis. Only then code, deriving color/type from the plan.
Preserve the repo's style stack (Tailwind, CSS Modules, …). Don't install shadcn “to look nice” if the project doesn't use it. Components: react-component-engineering. A11y, hover, focus, dark: better-web-interface.
Plan in the reasoning; deliver the UI when the plan passes self-critique.
Scope
- Web: SPA, Next, landing, marketing, app in the browser.
- Does not replace mobile/desktop HIG.
- Short, justified UI motion. Scroll choreography:
cinematographic-websites.
Anti-patterns
- Default shadcn/Tailwind dashboard as “design”
- An entire page without a single image or illustration when the subject is visible
- Neutral typography + indigo accent in a product that has its own material
- Decoration (numbers, badges, glow) that doesn't inform
- A second visual language in the feature against the DS
- AI landing-page copy in an authenticated app
Integration with other skills
- System and consistency:
better-web-interface - Site headers / nav:
better-headers - Footer:
better-footers - Product tokens:
design-system - React SPA:
reactjs-application-development - Next:
nextjs-architecture - Cinema:
cinematographic-websites - Vue:
vue/nuxt
Completion criteria
- Brief (subject, audience, job) visible in the choices
- Real media in the hero/key sections; icons from one family
- Palette and type from the plan — not from the blacklist, unless the brief calls for it
- One signature; the rest disciplined
- Repo DS/brand intact; minimum a11y (contrast, focus,
alt)