Tested with Claude Sonnet 4.6

Production-ready UI,
one prompt away.

Copy a tested Claude prompt. Paste it. Get a production-ready Tailwind + Next.js component — no iteration, no cleanup, first draft ships.

Browse 30+ prompts → What is Plan Mode?
30+
Tested prompts
7
UI categories
MIT
Free forever
Claude Code — claude-ui-prompts
›Copy prompt from sections/landing-page/hero.md
›Paste into Claude...
Claude
// Here's your hero section:
<section className="relative py-32">
  <div className="absolute inset-0 bg-[radial-gradient...">
    <h1 className="text-5xl font-bold tracking-tight">
      Ship UI faster with <span className="gradient-text">
        one prompt
      </span>
    </h1>
    <p className="mt-6 text-lg text-zinc-500">
      No iteration. No cleanup.
// ✓ Component ready — 0 edits needed

What's inside

Every UI section, covered.

Organized by section type. Find the component you need, copy the prompt, ship.

Landing Page
  • Hero section
  • Features grid
  • Pricing cards
  • Testimonials
  • CTA section
  • FAQ accordion
Navigation
  • Navbar (sticky)
  • Sidebar
  • Mobile menu
  • Breadcrumbs
Headers
  • Page header
  • Section header
  • Dashboard header
Forms
  • Login form
  • Sign up form
  • Contact form
  • Newsletter
Data Display
  • Stats cards
  • Data table
  • Timeline
  • Dashboard grid
SEO + GEO ✦
  • Meta tags
  • Schema.org / JSON-LD
  • Open Graph
  • Dynamic sitemap
  • GEO landing pages

Why it works

Built different.

Not a generic prompt list. Every prompt is engineered for Claude's XML comprehension and tested until the output ships clean.

⚡

First draft ships

Prompts are structured in XML — Claude's native format. Output is production-ready without manual cleanup.

📋

Plan Mode ready

Every prompt includes a compact CLAUDE.md version. Drop it in your project root, rules apply forever.

🌐

SEO + GEO built in

The only prompt library with Generative Engine Optimization — optimize for Perplexity, ChatGPT Search, and Google AI Overviews.

📱

Always mobile-first

Every prompt spec includes responsive behavior. Dark mode variants baked in by default.

♿

Accessible by default

ARIA labels, focus traps, keyboard navigation — accessibility requirements are part of every prompt spec.

🔓

MIT licensed

Copy, fork, remix. Commercial use allowed. No attribution required. No strings attached.

Plan Mode

Write rules once. Claude follows them everywhere.

Drop the included CLAUDE.md template into your project root. Claude reads it on every session and applies your UI rules automatically — no repeating yourself.

1

Copy the template

Grab plan-mode/CLAUDE.md from the repo.

2

Drop it in your project root

Paste your brand color, fonts, and stack details where marked.

3

Start Claude Code

Claude reads the file and applies your rules to every component it builds, automatically.

CLAUDE.md — your project
# UI Rules

## Stack
- Framework: Next.js 14 App Router
- Styling: Tailwind CSS
- Language: TypeScript

## Component Standards
- Mobile-first responsive
- Every interactive element: hover,
  focus-visible, active states
- Semantic HTML always

## SEO Rules
- Every page exports Metadata
- JSON-LD on homepage + blog
- Canonical URL always set

# Claude applies these rules to
# every component it builds.

SEO + GEO

Optimize for Google and AI search.

GEO (Generative Engine Optimization) is the emerging discipline of making your content visible to Perplexity, ChatGPT Search, and Google AI Overviews. Most devs don't know it exists yet.

What you get Type Optimizes for
Next.js metadata export (title, desc, canonical) SEO Google ranking signals
Open Graph + dynamic OG image (ImageResponse) SEO Social share previews
JSON-LD schema (Article, FAQ, SoftwareApp) Both Rich results + LLM citation
Dynamic sitemap.ts + robots.ts SEO Crawl coverage
GEO-optimized page copy structure GEO Perplexity / ChatGPT Search
City/region landing page generator GEO Local LLM citation

Start shipping better UI today.

Free, open source, MIT licensed. No signup. No install.

★ Star on GitHub →