frontend-design-ultimateCreate 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.
Install via ClawdBot CLI:
clawdbot install kesslerio/frontend-design-ultimateCreate 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)
"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."Before writing any code, commit to a BOLD aesthetic direction:
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 |
What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?
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.
BANNED: Purple gradients on white, evenly-distributed 5-color palettes
DO:
--primary, --accent, --surface, --text:root {
--bg-primary: #0a0a0a;
--bg-secondary: #141414;
--text-primary: #fafafa;
--text-secondary: #a1a1a1;
--accent: #ff6b35;
--accent-hover: #ff8555;
}Priority: One orchestrated page load > scattered micro-interactions
High-Impact Moments:
animation-delay)Implementation:
BANNED: Centered, symmetrical, predictable layouts
DO:
BANNED: Solid white/gray backgrounds
DO:
/* Subtle grain overlay */
.grain::before {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,...") repeat;
opacity: 0.03;
pointer-events: none;
}See references/mobile-patterns.md for detailed CSS.
| 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 |
/* Tablet - stack sidebars */
@media (max-width: 1200px) { }
/* Mobile - full single column */
@media (max-width: 768px) { }
/* Small mobile - compact spacing */
@media (max-width: 480px) { }@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 */
}# 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# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Deploy to Vercel
vercelmy-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.jsonmy-site/
āāā app/
ā āāā layout.tsx
ā āāā page.tsx
ā āāā privacy/page.tsx
āāā components/
āāā lib/
āāā config/
ā āāā site.ts
āāā tailwind.config.tsKeep 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: [...],
}
}Run this before finalizing any design:
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 labelsCard ā Feature cards, pricing tiersAccordion ā FAQ sectionsDialog ā Modals, video playersNavigationMenu ā Header navTabs ā Feature showcasesCarousel ā TestimonialsInput:
"Portfolio site for a photographer. Minimal, editorial feel.
Grid gallery with lightbox, about section, contact form."
Design Decisions:
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.
Generated Mar 1, 2026
Create a high-conversion landing page for a B2B SaaS tool, featuring a hero with animated demo, features grid, pricing table, and FAQ accordion. Emphasizes bold typography and dark themes to stand out in competitive markets like AI or developer tools.
Build a distinctive portfolio for a creative professional, such as a designer or photographer, with editorial layouts, organic aesthetics, and smooth animations. Focuses on showcasing work through asymmetrical grids and immersive visuals to attract clients.
Develop a product launch or promotional site for an e-commerce brand, using maximalist chaos or retro-futuristic tones to create buzz. Includes scroll-triggered animations and mobile-first responsive patterns to drive engagement and sales.
Design a data-dense dashboard for enterprise or analytics tools, applying industrial/utilitarian aesthetics with monospace fonts and functional layouts. Ensures readability and performance with single-file bundling for internal or client use.
Craft a memorable event website with luxury/refined or art deco styles, featuring schedules, speaker bios, and registration forms. Uses bold color accents and orchestrated page loads to enhance user experience and ticket conversions.
Offer custom static site creation for clients, leveraging the skill to quickly generate production-grade designs from text requirements. Charge per project or hourly, focusing on niches like startups or creative agencies that need distinctive sites.
Integrate the skill into a design or marketing agency's workflow to deliver high-quality landing pages and marketing sites. Use it to reduce mockup time and offer bold, anti-AI-slop aesthetics as a premium service to enterprise clients.
Package the skill into a subscription or one-off service for small businesses, such as landing page builds or site refreshes. Automate parts of the process with Vite or Next.js outputs to scale operations and target industries like e-commerce.
š¬ Integration Tip
Ensure Node.js and npm are installed, then use the skill's init scripts to set up React, Tailwind CSS, and shadcn/ui for quick prototyping in Vite or Next.js projects.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.