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:

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