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
🔗 Composable guardrails — Pair with design-taste-frontend for stricter anti-slop enforcement while this skill stays the workflow/generator layer

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:

Commit to a bold aesthetic direction
Choose distinctive typography (no Inter!)
Build with React + Tailwind + shadcn/ui
Apply mobile-first responsive patterns
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:

Made with 🎨 by Kessler.io

frontend-design-ultimate