Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain…
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
"Build a SaaS landing page for an AI writing tool. Dark theme,
editorial typography, subtle grain texture. Pages: hero with
animated demo, features grid, pricing table, FAQ accordion, footer."
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
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #141414;
--text-primary: #fafafa;
--text-secondary: #a1a1a1;
--accent: #ff6b35;
--accent-hover: #ff8555;
}
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
/* Subtle grain overlay */
.grain::before {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,...") repeat;
opacity: 0.03;
pointer-events: none;
}
Mobile-First Patterns
See 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
/* Tablet - stack sidebars */
@media (max-width: 1200px) { }
/* Mobile - full single column */
@media (max-width: 768px) { }
/* Small mobile - compact spacing */
@media (max-width: 480px) { }
Font Scaling
@media (max-width: 768px) {
.hero-title { font-size: 32px; } /* from ~48px */
.section-title { font-size: 24px; } /* from ~32px */
.section-subtitle { font-size: 14px; } /* from ~16px */
}
Build Workflow
Option A: Vite (Pure Static)
# 1. Initialize
bash scripts/init-vite.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Build static files
npm run build
# Output: dist/
# 4. Bundle to single HTML (optional)
bash scripts/bundle-artifact.sh
# Output: bundle.html
Option B: Next.js (Vercel Deploy)
# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Deploy to Vercel
vercel
Project Structure
Vite Static
my-site/
├── src/
│ ├── components/ # React components
│ ├── lib/ # Utilities, cn()
│ ├── styles/ # Global CSS
│ ├── config/
│ │ └── site.ts # Editable content config
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json
Next.js
my-site/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── privacy/page.tsx
├── components/
├── lib/
├── config/
│ └── site.ts
└── tailwind.config.ts
Site Config Pattern
Keep all editable content in one file:
// config/site.ts
export const siteConfig = {
name: "Acme AI",
tagline: "Write better, faster",
description: "AI-powered writing assistant",
hero: {
badge: "Now in beta",
title: "Your words,\nsupercharged",
subtitle: "Write 10x faster with AI that understands your style",
cta: { text: "Get Started", href: "/signup" },
secondaryCta: { text: "Watch Demo", href: "#demo" },
},
features: [
{ icon: "Zap", title: "Lightning Fast", description: "..." },
// ...
],
pricing: [
{ name: "Free", price: 0, features: [...] },
{ name: "Pro", price: 19, features: [...], popular: true },
],
faq: [
{ q: "How does it work?", a: "..." },
],
footer: {
links: [...],
social: [...],
}
}
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 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 — Extended anti-AI-slop guidance
references/mobile-patterns.md — Detailed responsive CSS
references/shadcn-components.md — Component quick reference
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.don't have the plugin yet? install it then click "run inline in claude" again.