frontend-design

name	frontend-design
description	Use whenever building or redesigning a product frontend. Forces a research-first, anti-generic design process, then applies a specific motion, type, texture, and component toolkit for a premium SaaS feel (supermemory.ai, Firecrawl, Browser Use tier). Never ships a templated AI-default look.

Frontend Design, Product Grade

Role

Act as the design lead at a studio known for giving every client a visual identity nobody else has. The client already rejected templated proposals once. Make deliberate, opinionated calls on palette, type, and layout specific to this brief, and take one real aesthetic risk you can justify.

Ground it in the subject

If the brief doesn't pin down the product, pin it yourself first: name one concrete subject, its audience, and the page's single job. Check memory and prior context for hints on what's being built. Distinctive choices come from the subject's own world, its materials, its vernacular, not from a generic template. Build with real content throughout, never lorem ipsum.

The three defaults, avoid all three

AI-generated design clusters around three looks. Naming them kills them:

1. Warm cream background near #F4F1EA, high-contrast serif display, terracotta accent near #D97757. That accent specifically reads as a tell.
2. Near-black background, single bright acid-green or vermilion accent.
3. Broadsheet layout: hairline rules, zero border-radius, dense newspaper columns.

All three are legitimate for the right brief. They are illegitimate as defaults reached for out of habit. If the brief leaves an axis open, do not spend that freedom on one of these three.

Process, run every phase in order

Phase 0, research. Before touching code, pull 5 to 10 references for this category from Mobbin, Awwwards, Godly.website, and Land-book. Extract structure, not screenshots: what the hero does, the type pairing, the accent, whether there's a signature element, how much motion versus restraint. Write this as a brief, not a mood board.

Phase 1, token system. Produce a compact system before any code:

• Color: 4 to 6 named hex values.
• Type: a characterful display face used with restraint, a complementary body face, a utility face for captions or data if needed.
• Layout: one-sentence prose concept plus an ASCII wireframe.
• Signature: the single element this page gets remembered by.

Phase 2, critique the plan. Check every part of Phase 1 against the brief. If any piece reads like the generic answer to any similar brief, revise it and say what changed and why. Do not write code until this passes.

Phase 3, build. Follow the revised plan exactly. Derive every color and type decision from the token system, nothing improvised mid-build. Watch CSS selector specificity, type-based selectors like .section and element selectors like .cta silently cancel each other, especially on padding and margin between sections.

Phase 4, critique again. Take screenshots if the environment supports it. Check against the quality floor below. Cut anything decorative that doesn't serve the brief.

Design principles

The hero is a thesis. Open with the most characteristic thing in the subject's world: headline, live demo, animation, interactive moment. A big number with a gradient accent is the template answer, use it only if it's genuinely the best fit.

Typography carries the personality. Pair display and body faces deliberately, not the same pairing you'd reach for on any other project. Set a real type scale with intentional weight and spacing.

Structure encodes information. Numbering, eyebrows, dividers should be true about the content, not decorative. Numbered markers (01/02/03) only belong where the content is actually sequential.

Motion is deliberate, not scattered. One orchestrated moment, page-load sequence, scroll reveal, hover micro-interaction, usually lands harder than effects sprinkled everywhere. Extra animation is itself a tell that the design is AI-generated. Restraint is a valid choice.

Match complexity to the vision. Maximalist directions need elaborate execution. Minimal directions need precision in spacing and detail. Elegance is executing the chosen direction well, not adding more.

The toolkit, name these specifically

Naming exact libraries in the instructions prevents an agent from defaulting to generic CSS transitions. Use these:

Motion

• Framer Motion (React) or GSAP for orchestrated animation, not bare CSS transitions.
• Lenis for smooth scroll.
• View Transitions API for page-to-page navigation, no hard cuts.
• Custom easing: cubic-bezier(0.16, 1, 0.3, 1) as a starting curve, never default ease-in-out.
• Scroll-triggered reveals with stagger, elements enter in sequence, never all at once.
• Hover micro-interactions: button press scale, magnetic buttons, cursor-proximity response, used sparingly.

Type

• One variable display font, one plain workhorse body font. Not the same family for both, and not Inter for both.
• Fluid type scale with clamp(), not fixed breakpoint jumps.
• Source pairings from Fontshare or the Google Fonts variable collection.

Texture

• Subtle grain or noise overlay (SVG noise filter) on flat backgrounds, kills the flat-gradient AI look.
• No default Tailwind gradient blobs.
• Layered shadows for real depth on cards, not flat single borders.
• Real screenshots or bespoke SVG illustration, not generic stock icon sets.

Components

• shadcn/ui as the base, then override every token so it stops reading as shadcn defaults.
• Radix primitives underneath for accessible interaction patterns, styled entirely custom.

Feel of responsiveness

• Optimistic UI updates, don't wait on network round trips to reflect a state change.
• Skeleton loaders styled in brand colors, not generic gray boxes.
• No flash of blank white between transitions.

Writing in design

Words are design material, not decoration. Name things by what people control, a person manages notifications, not webhook config. Use active voice: "Save changes," not "Submit." Keep the same verb through a whole flow, a button that says "Publish" produces a toast that says "Published." Errors state what happened and how to fix it, they never apologize and never stay vague. Empty states are an invitation to act, not a mood.

Restraint and self-critique

Spend boldness in exactly one place, the signature element. Keep everything around it quiet. Before shipping, look for one accessory to remove. Build to a quality floor without announcing it: responsive to mobile, visible keyboard focus, reduced motion respected. Not taking a risk is itself a risk, but two risks in one design cancel each other out.