Create distinctive, production-grade static sites with React, Vue 3, Nuxt.js, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable desi...
---
name: frontend-design-ultimate
description: Create distinctive, production-grade static sites with React, Vue 3, Nuxt.js, 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. Supports cross-framework development (React/Vue 3/Nuxt) with consistent design patterns. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI.
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.
**Cross-Framework Support**: React 18 | Vue 3 | Nuxt 3
**Styling**: Tailwind CSS + shadcn/ui (or framework equivalents)
**Output**: Vite (static HTML) or Framework-specific deployment
## Quick Start
```
"Build a SaaS landing page for an AI writing tool. Dark theme,
editorial typography, subtle grain texture. Use Vue 3. Pages: hero with
animated demo, features grid, pricing table, FAQ accordion, footer."
```
---
## Framework Selection Guide
Choose the right framework for your project:
| Framework | Best For | Deployment | Learning Curve |
|-----------|----------|------------|----------------|
| **React + Vite** | SPAs, interactive apps, React ecosystem | Static/CDN | Medium |
| **React + Next.js** | SEO-critical sites, SSR needed | Vercel/Node | Medium-High |
| **Vue 3 + Vite** | Progressive apps, easier learning curve | Static/CDN | Low |
| **Nuxt 3** | SEO-critical, full-stack Vue, SSR/SSG | Vercel/Netlify/Node | Low-Medium |
### Quick Commands
**TypeScript Versions (Original):**
```bash
# React + Vite (Pure Static)
bash scripts/init-vite.sh my-react-site
# React + Next.js (Vercel Deploy)
bash scripts/init-nextjs.sh my-next-site
# Vue 3 + Vite (Pure Static)
bash scripts/init-vue-vite.sh my-vue-site
# Nuxt 3 (SSR/SSG)
bash scripts/init-nuxt.sh my-nuxt-site
```
**JavaScript Versions (New - JavaScript Runtime Compatible):**
```bash
# React + Vite (Pure Static) - JavaScript
bash scripts/init-vite-js.sh my-react-site
# React + Next.js (Vercel Deploy) - JavaScript
bash scripts/init-nextjs-js.sh my-next-site
# Vue 3 + Vite (Pure Static) - JavaScript
bash scripts/init-vue-vite-js.sh my-vue-site
# Nuxt 3 (SSR/SSG) - JavaScript
bash scripts/init-nuxt-js.sh my-nuxt-site
```
> **Note**: JavaScript versions provide full compatibility with pure JavaScript runtimes while maintaining all original functionality, design patterns, and user experience.
---
## 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 (Framework-Agnostic)
These principles apply to ALL frameworks:
### 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
```css
: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 by Framework**:
- **React**: Framer Motion (`motion.div`, `AnimatePresence`)
- **Vue 3**: @vueuse/motion (`v-motion`, `useMotion`)
- **Nuxt 3**: @vueuse/motion (auto-imported) or @nuxt/animations
**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
```css
/* 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 (Framework-Agnostic)
See **[references/mobile-patterns.md](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
```css
/* 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
```css
@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 */
}
```
---
## Framework-Specific Workflows
### Option A: React + Vite (Pure Static)
```bash
# 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
```
**Key Libraries**:
- `framer-motion` for animations
- `@radix-ui/react-*` for accessible components
- `lucide-react` for icons
**Component Pattern** (React):
```tsx
import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
export function Hero() {
return (
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<Button size="lg">Get Started</Button>
</motion.section>
)
}
```
### Option B: React + Next.js (Vercel Deploy)
```bash
# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Deploy to Vercel
vercel
```
**Next.js-Specific Features**:
- App Router (`app/` directory)
- Server Components (use `'use client'` for interactive parts)
- Image optimization (`next/image`)
- Metadata API for SEO
**Component Pattern** (Next.js):
```tsx
'use client'
import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
export default function Hero() {
return (
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<Button size="lg">Get Started</Button>
</motion.section>
)
}
```
### Option C: Vue 3 + Vite (Pure Static)
```bash
# 1. Initialize
bash scripts/init-vue-vite.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Build static files
npm run build
# Output: dist/
```
**Key Libraries**:
- `@vueuse/motion` for animations
- `radix-vue` for accessible components
- `lucide-vue-next` for icons
- `shadcn-vue` for UI components
**Component Pattern** (Vue 3):
```vue
<script setup lang="ts">
import { Motion } from '@vueuse/motion'
import Button from '@/components/ui/Button.vue'
</script>
<template>
<section
v-motion
:initial="{ opacity: 0, y: 20 }"
:enter="{ opacity: 1, y: 0 }"
:duration="500"
>
<Button size="lg">Get Started</Button>
</section>
</template>
```
### Option D: Nuxt 3 (SSR/SSG)
```bash
# 1. Initialize
bash scripts/init-nuxt.sh my-site
cd my-site
# 2. Develop
npm run dev
# 3. Generate static site
npm run generate
# Output: .output/public/
# 4. Deploy
npx nuxi deploy
```
**Nuxt-Specific Features**:
- File-based routing (`pages/`)
- Auto-imports (components, composables, utils)
- `@nuxt/ui` component library (UButton, UCard, etc.)
- Built-in SEO with `useHead()` and `useSeoMeta()`
**Component Pattern** (Nuxt 3):
```vue
<script setup lang="ts">
import { siteConfig } from '~/config/site'
useHead({
title: `${siteConfig.name} - ${siteConfig.tagline}`
})
</script>
<template>
<section
v-motion
:initial="{ opacity: 0, y: 20 }"
:enter="{ opacity: 1, y: 0 }"
>
<UButton size="xl" :to="/signup">Get Started</UButton>
</section>
</template>
```
---
## Project Structures
### React + Vite
```
my-site/
├── src/
│ ├── components/ # React components (.tsx)
│ ├── lib/ # Utilities, cn()
│ ├── styles/ # Global CSS
│ ├── config/
│ │ └── site.ts # Editable content config
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json
```
### React + Next.js
```
my-site/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── privacy/page.tsx
├── components/
├── lib/
├── config/
│ └── site.ts
└── tailwind.config.ts
```
### Vue 3 + Vite
```
my-site/
├── src/
│ ├── components/ # Vue components (.vue)
│ │ └── ui/ # shadcn-vue components
│ ├── lib/ # Utilities, cn()
│ ├── assets/ # CSS, images
│ ├── plugins/ # Vue plugins
│ ├── config/
│ │ └── site.ts # Editable content config
│ ├── App.vue
│ └── main.ts
├── index.html
├── tailwind.config.ts
└── package.json
```
### Nuxt 3
```
my-site/
├── app.vue # Root component
├── pages/ # File-based routing
│ └── index.vue
├── layouts/ # Layout components
│ └── default.vue
├── components/ # Auto-imported components
├── composables/ # Auto-imported composables
├── config/ # Site configuration
│ └── site.ts
├── assets/css/ # Global CSS
├── nuxt.config.ts
├── tailwind.config.ts
└── package.json
```
---
## Site Config Pattern (Universal)
Keep all editable content in one file — works across all frameworks:
```typescript
// config/site.ts (or ~/config/site.ts for Nuxt)
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: [...],
}
}
```
---
## Component Library Mapping
Each framework has its own component library with similar APIs:
| Component | React (shadcn/ui) | Vue 3 (shadcn-vue) | Nuxt 3 (@nuxt/ui) |
|-----------|-------------------|---------------------|---------------------|
| Button | `<Button>` | `<Button />` | `<UButton />` |
| Card | `<Card>` | `<Card />` | `<UCard />` |
| Badge | `<Badge>` | `<Badge />` | `<UBadge />` |
| Accordion | `<Accordion>` | `<Accordion />` | `<UAccordion />` |
| Dialog/Modal | `<Dialog>` | `<Dialog />` | `<UModal />` |
| Navigation | `<NavigationMenu>` | `<NavigationMenu />` | `<UNavigationMenu />` |
| Tabs | `<Tabs>` | `<Tabs />` | `<UTabs />` |
| Sheet/Drawer | `<Sheet>` | `<Sheet />` | `<USheet />` |
| Avatar | `<Avatar>` | `<Avatar />` | `<UAvatar />` |
| Alert | `<Alert>` | `<Alert />` | `<UAlert />` |
**Installation by Framework**:
```bash
# React
npx shadcn@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert
# Vue 3
npx shadcn-vue@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert
# Nuxt 3 (@nuxt/ui - auto-installed)
# All U* components are available automatically
```
---
## Animation Library Mapping
| Feature | React (Framer Motion) | Vue 3 (@vueuse/motion) | Nuxt 3 (@vueuse/motion) |
|---------|----------------------|------------------------|--------------------------|
| Basic animation | `<motion.div>` | `v-motion` directive | `v-motion` directive |
| Page transitions | `AnimatePresence` | `<Transition>` | `<Transition>` (built-in) |
| Scroll triggers | `whileInView` | `useScroll` composable | `useScroll` composable |
| Gestures | `whileHover`, `whileTap` | Event bindings | Event bindings |
| Stagger children | `staggerChildren` | Config-based | Config-based |
### Cross-Framework Animation Example
**React**:
```tsx
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
Content
</motion.div>
```
**Vue 3**:
```vue
<div
v-motion
:initial="{ opacity: 0, y: 20 }"
:enter="{ opacity: 1, y: 0 }"
:duration="500"
>
Content
</div>
```
**Nuxt 3**:
```vue
<div
v-motion
:initial="{ opacity: 0, y: 20 }"
:visible="{ opacity: 1, y: 0 }"
:duration="500"
>
Content
</div>
```
---
## Pre-Implementation Checklist
Run this before finalizing any design:
### Design Quality (Framework-Agnostic)
- [ ] 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 (Framework-Agnostic)
- [ ] 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
### Framework-Specific
- [ ] Using correct component imports for chosen framework
- [ ] Animations use framework-appropriate library
- [ ] Build configuration matches target framework
- [ ] TypeScript types properly configured
---
## Cross-Framework Consistency Guarantees
This skill ensures consistency across frameworks:
✅ **Design System**: Same color variables, typography scale, spacing tokens
✅ **Responsive Patterns**: Same mobile-first breakpoints and behaviors
✅ **Animation Timing**: Same durations (200-400ms), easing functions
✅ **Component APIs**: Similar props and event handling patterns
✅ **File Organization**: Logical structure adapted per framework conventions
✅ **Performance**: Optimized bundle sizes, lazy loading strategies
**What Adapts Per Framework**:
- Syntax (JSX vs Template)
- Import paths (@/ vs ~/ vs relative)
- Component names (PascalCase vs kebab-case)
- State management (useState vs ref/reactive)
- Lifecycle hooks (useEffect vs onMounted/watch)
- Routing (React Router vs Vue Router vs file-based)
---
## References
- **[references/design-philosophy.md](references/design-philosophy.md)** — Extended anti-AI-slop guidance
- **[references/mobile-patterns.md](references/mobile-patterns.md)** — Detailed responsive CSS
- **[references/shadcn-components.md](references/shadcn-components.md)** — Component quick reference (React-focused)
- **[templates/site-config.ts](templates/site-config.ts)** — Full siteConfig example
- **Framework Guides**:
- React: See init-vite.sh and init-nextjs.sh output
- Vue 3: See init-vue-vite.sh output
- Nuxt 3: See init-nuxt.sh output
---
## Examples
### Prompt → Multi-Framework Output
**Input**:
> "Portfolio site for a photographer. Minimal, editorial feel.
> Grid gallery with lightbox, about section, contact form."
**Design Decisions** (Same for all frameworks):
- Tone: Editorial/Magazine
- Typography: Cormorant Garamond (display) + 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 Options**:
- **React + Vite**: Complete Vite project with responsive gallery, lightbox component
- **React + Next.js**: Next.js App Router with image optimization
- **Vue 3 + Vite**: Vue 3 composition API with reactive gallery state
- **Nuxt 3**: Nuxt 3 with auto-imports, SEO metadata, static generation
All outputs maintain identical visual design and user experience.
---
## Migration Guide
### Converting Between Frameworks
**React → Vue 3**:
- `useState` → `ref()` or `reactive()`
- `useEffect` → `onMounted()` + `watch()`
- JSX → Vue template syntax
- `className` → `class`
- `onClick` → `@click`
- `{variable}` → `{{ variable }}`
**Vue 3 → Nuxt 3**:
- Move `src/` contents to root level
- Replace `vue-router` with `pages/` directory
- Replace manual imports with auto-imports
- Add `~/` alias for root imports
- Use `useHead()` instead of manual `<head>`
**React → Nuxt 3**:
- Convert JSX to Vue templates
- Replace React hooks with Vue composition API
- Move to file-based routing
- Use Nuxt-specific modules (@nuxt/image, etc.)
---
*Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills. Enhanced with cross-framework support for modern frontend development.*
don't have the plugin yet? install it then click "run inline in claude" again.