Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, mar

Frontend Design Ultimate Create distinctive, production grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs. Stack : React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion Output : Vite (static HTML) or Next.js (Vercel ready) Quick Start Design Thinking (Do This First) Before writing any code, commit to a BOLD aesthetic direction : 1. Understand Context Purpose : What problem does this interface solve? Who uses it? Audience : Developer tools? Consumer app? Enterprise? Creative agency? Constraints : Performance requirements, accessibility needs, brand guidelines? 2. Choose an Extreme Tone Pick ONE and commit fully — timid designs fail: Tone Characteristics Brutally Minimal Sparse, monochrome, massive typography, raw edges Maximalist Chaos Layered, dense, overlapping elements, controlled disorder Retro Futuristic Neon accents, geometric shapes, CRT aesthetics Organic/Natural Soft curves, earth tones, hand drawn elements Luxury/Refined Subtle animations, premium typography, restrained palette Editorial/Magazine Strong grid, dramatic headlines, whitespace as feature Brutalist/Raw Exposed structure, harsh contrasts, anti design Art Deco/Geometric Gold accents, symmetry, ornate patterns Soft/Pastel Rounded corners, gentle gradients, friendly Industrial/Utilitarian Functional, monospace, data dense 3. Define the Unforgettable Element What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout? Aesthetics Guidelines Typography — NEVER Generic BANNED : Inter, Roboto, Arial, system fonts, Open Sans DO : Distinctive, characterful choices that elevate the design. Use Case Approach Display/Headlines Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display Body Text Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans Monospace/Code DM Mono, JetBrains Mono, IBM Plex Mono Pairing Strategy Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) Size Progression : Use 3x+ jumps, not timid 1.5x increments. Color & Theme BANNED : Purple gradients on white, evenly distributed 5 color palettes DO : Dominant + Sharp Accent : 70 20 10 rule (primary secondary accent) CSS Variables : primary , accent , surface , text Commit to dark OR light : Don't hedge with gray middle grounds High contrast CTAs : Buttons should pop dramatically Motion & Animation Priority : One orchestrated page load scattered micro interactions High Impact Moments : Staggered hero reveals ( animation delay ) Scroll triggered section entrances Hover states that surprise (scale, color shift, shadow depth) Smooth page transitions Implementation : CSS only for simple animations Framer Motion for React (pre installed via init scripts) Keep durations 200 400ms (snappy, not sluggish) Spatial Composition BANNED : Centered, symmetrical, predictable layouts DO : Asymmetry with purpose Overlapping elements Diagonal flow / grid breaking Generous negative space OR controlled density (pick one) Off grid hero sections Backgrounds & Atmosphere BANNED : Solid white/gray backgrounds DO : Gradient meshes (subtle, not garish) Noise/grain textures (SVG filter or CSS) Geometric patterns (dots, lines, shapes) Layered transparencies Dramatic shadows for depth Blur effects for glassmorphism Mobile First Patterns See [references/mobile patterns.md](references/mobile patterns.md) for detailed CSS. Critical Rules Pattern Desktop Mobile Fix Hero with hidden visual 2 column grid Switch to display: flex (not grid) Large selection lists Horizontal scroll Accordion with category headers Multi column forms Side by side Stack vertically Status/alert cards Inline align items: center + text align: center Feature grids 3 4 columns Single column Breakpoints Font Scaling Build Workflow Option A: Vite (Pure Static) Option B: Next.js (Vercel Deploy) Project Structure Vite Static Next.js Site Config Pattern Keep all editable content in one file: Pre Implementation Checklist Run this before finalizing any design: Design Quality [ ] Typography is distinctive (no Inter/Roboto/Arial) [ ] Color palette has clear dominant + accent (not evenly distributed) [ ] Background has atmosphere (not solid white/gray) [ ] At least one memorable/unforgettable element [ ] Animations are orchestrated (not scattered) Mobile Responsiveness [ ] Hero centers on mobile (no empty grid space) [ ] All grids collapse to single column [ ] Forms stack vertically [ ] Large lists use accordion (not horizontal scroll) [ ] Font sizes scale down appropriately Form Consistency [ ] Input, select, textarea all styled consistently [ ] Radio/checkbox visible (check transparent border styles) [ ] Dropdown options have readable backgrounds [ ] Labels use CSS variables (not hardcoded colors) Accessibility [ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI) [ ] Focus states visible [ ] Semantic HTML (nav, main, section, article) [ ] Alt text for images [ ] Keyboard navigation works shadcn/ui Components 10 common components pre installed (button, badge, card, accordion, dialog, navigation menu, tabs, sheet, separator, avatar, alert). Add more with npx shadcn@latest add [name] or install all with npx shadcn@latest add all . See [references/shadcn components.md](references/shadcn components.md) for full component reference. Most used for landing pages: Button , Badge — CTAs and labels Card — Feature cards, pricing tiers Accordion — FAQ sections Dialog — Modals, video players NavigationMenu — Header nav Tabs — Feature showcases Carousel — Testimonials References [references/design philosophy.md](references/design philosophy.md) — Extended anti AI slop guidance [references/mobile patterns.md](references/mobile patterns.md) — Detailed responsive CSS [references/shadcn components.md](references/shadcn components.md) — Component quick reference [templates/site config.ts](templates/site config.ts) — Full siteConfig example Examples Prompt → Output Input : "Portfolio site for a photographer. Minimal, editorial feel. Grid gallery with lightbox, about section, contact form." Design Decisions : Tone: Editorial/Magazine Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body) Color: Near black bg ( 0c0c0c), warm white text ( f5f5f0), copper accent ( b87333) Unforgettable: Full bleed hero image with text overlay that reveals on scroll Motion: Gallery images fade in staggered on scroll Output : Complete Next.js project with responsive gallery, lightbox component, and contact form with validation. Based on Anthropic's frontend design, web artifacts builder, and community frontend design v2 skills.

frontend-design-ultimate