Front End Dev

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, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.

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.