frontend-design-ultimate – OpenClaw Skill

---

name: frontend-design-ultimate description: 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. homepage: https://github.com/kesslerio/frontend-design-ultimate-clawhub-skill metadata: openclaw: emoji: "🎨" requires: bins: ["node", "npm"]

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.

Frontend Design Ultimate

🎨 Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

What is this?

An OpenClaw/Claude Code skill that generates bold, memorable web designs from plain text requirements. No Figma, no wireframes — just describe what you want.

Key Features:

• 🚫 Anti-AI-slop — Explicit guidance to avoid generic designs (no Inter, no purple gradients, no centered layouts)
• 📱 Mobile-first patterns — Responsive CSS that actually works
• ⚡ Two workflows — Vite (pure static) or Next.js (Vercel deploy)
• 🧩 shadcn/ui components — 10 common components pre-installed, add more with CLI
• 📦 Single-file bundling — Bundle entire sites to one HTML file

Quick Start

Install the Skill

# OpenClaw
openclaw skill install frontend-design-ultimate

# Claude Code (copy to .claude/skills/)
git clone https://github.com/kesslerio/frontend-design-ultimate-clawhub-skill.git ~/.claude/skills/frontend-design-ultimate

Use It

Just describe what you want:

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.

The skill will:

1. Commit to a bold aesthetic direction
2. Choose distinctive typography (no Inter!)
3. Build with React + Tailwind + shadcn/ui
4. Apply mobile-first responsive patterns
5. Output production-ready code

What Makes This Different?

vs. Generic AI Design

Generic AI	This Skill
Inter font everywhere	Distinctive typography choices
Purple gradients	Context-appropriate palettes
Centered layouts	Intentional spatial composition
No animations	Orchestrated motion
Solid backgrounds	Atmospheric textures

Based On

• Anthropic's frontend-design — Design philosophy, anti-AI-slop guidance
• Anthropic's web-artifacts-builder — React+Tailwind+shadcn scaffolding
• Community frontend-design-v2 — Mobile-first responsive patterns

Workflows

Option A: Vite (Pure Static)

bash scripts/init-vite.sh my-site
cd my-site
npm run dev

# Build
npm run build

# Bundle to single HTML
bash scripts/bundle-artifact.sh

Option B: Next.js (Vercel)

bash scripts/init-nextjs.sh my-site
cd my-site
npm run dev

# Deploy
vercel

Documentation

• SKILL.md — Main skill instructions
• references/design-philosophy.md — Anti-AI-slop manifesto
• references/mobile-patterns.md — Responsive CSS patterns
• references/shadcn-components.md — Component quick reference
• templates/site-config.ts — Editable content config example

Requirements

• Node.js 18+
• npm

License

Apache 2.0 — See LICENSE

Credits

Built on the shoulders of:

• Anthropic's Claude Skills
• shadcn/ui
• Tailwind CSS
• nhatmobile1's frontend-design-v2

---

Made with 🎨 by Kessler.io