frontend-design-super

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.

Audits

Pass

ClawScanPass

Agentic behavior and permission review.

Static analysisPass

Pattern checks against bundled files.

VirusTotalPass

Multi-engine malware detections and file reputation.

Install

openclaw skills install frontend-design-super

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):

# 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):

# 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

: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

/* 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 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 */
}

Framework-Specific Workflows

Option A: React + 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

Key Libraries:

framer-motion for animations
@radix-ui/react-* for accessible components
lucide-react for icons

Component Pattern (React):

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)

# 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):

'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)

# 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):

<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)

# 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):

<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:

// 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:

# 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:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

Vue 3:

<div
  v-motion
  :initial="{ opacity: 0, y: 20 }"
  :enter="{ opacity: 1, y: 0 }"
  :duration="500"
>
  Content
</div>

Nuxt 3:

<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 — Extended anti-AI-slop guidance
references/mobile-patterns.md — Detailed responsive CSS
references/shadcn-components.md — Component quick reference (React-focused)
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.