Build Production-Ready Frontend Pages with AI: The frontend-dev Skill Guide

Mar 27, 2026

When I asked an AI to build a landing page, I got placeholder images from Unsplash, lorem ipsum text, zero motion, and a layout that looked like a 2010 template. That’s the problem with generic AI frontend output—it produces mockups, not production code.

The frontend-dev skill changes this. It transforms AI coding agents into frontend specialists that output complete, deployable pages with real assets, motion systems, and conversion-focused copywriting.

What the frontend-dev Skill Does

The skill combines five capabilities into a single workflow:

Design engineering — Layout systems, typography, color rules
Motion systems — Framer Motion, GSAP, Three.js
AI-generated media — Images, music, TTS via MiniMax API
Persuasive copywriting — AIDA framework, real CTAs
Generative art — p5.js, Three.js backgrounds

The result: no placeholder URLs, no lorem ipsum, no “add your image here” comments.

The 6-Phase Workflow

Design Architecture → Motion Architecture → Asset Generation → Copywriting → Build UI → Quality Gates

Each phase has specific deliverables and guardrails.

Phase 1: Design Architecture

First, I set the design dials—parameters that control the output style:

| Dial             | Default | Range                           |
|------------------|---------|--------------------------------|
| DESIGN_VARIANCE  | 8       | 1=Symmetry, 10=Asymmetric      |
| MOTION_INTENSITY | 6       | 1=Static, 10=Cinematic         |
| VISUAL_DENSITY   | 4       | 1=Airy, 10=Packed              |

High variance (8+) means asymmetric layouts, split-screen heroes, and bold compositions. Low variance (1-3) produces centered, balanced designs.

Then I plan the layout sections and asset requirements. The skill enforces anti-slop techniques—patterns that elevate output above generic AI results:

Liquid glass effects on cards
Magnetic button interactions
Dynamic island navigation

Phase 2: Motion Architecture

Motion needs planning before code. I select tools based on the motion type:

| Motion Type   | Tool         | Use Case                    |
|---------------|--------------|----------------------------|
| UI animation  | Framer Motion| Component transitions       |
| Scroll-based  | GSAP         | ScrollTrigger sequences     |
| 3D/WebGL     | Three.js     | Backgrounds, hero elements |

Performance guardrails apply—only animate GPU-accelerated properties:

✓ transform (translate, rotate, scale)
✓ opacity
✓ filter (blur, brightness)

✗ width, height, margin, padding
✗ top, left, right, bottom

Phase 3: Asset Generation

This phase eliminates placeholder URLs. The skill includes scripts for generating real assets:

# Generate hero image
python scripts/minimax_image.py --prompt "hero image" --ratio 16:9

# Generate background music
python scripts/minimax_music.py --prompt "ambient electronic" --output bgm.mp3

# Generate TTS narration
python scripts/minimax_tts.py --text "Welcome to our platform" --output intro.mp3

All assets save locally—no external dependencies that break in production.

Phase 4: Copywriting

The skill applies the AIDA framework (Attention, Interest, Desire, Action) to write real copy:

**Attention**: Hook the reader in the hero section
**Interest**: Build engagement with feature explanations
**Desire**: Show benefits and social proof
**Action**: Clear CTAs with urgency elements

No lorem ipsum. Every sentence serves a conversion purpose.

Phase 5: Build UI

Scaffold the project structure, build sections following design rules, integrate assets and copy. The skill supports multiple frameworks:

React/Next.js
Vue/Nuxt
Svelte/SvelteKit
Astro
Pure HTML

Phase 6: Quality Gates

Before delivery, verify:

No placeholder URLs (picsum, unsplash)
Motion cleanup returns (prevent memory leaks)
Accessibility compliance (keyboard nav, ARIA)
Loading, Empty, Error states implemented

Key Design Rules

The skill enforces specific rules to prevent common AI output problems:

Typography

// Correct: Tight tracking, responsive sizing
<h1 className="text-4xl md:text-6xl tracking-tighter">
  Your Headline
</h1>

// Wrong: Default tracking, Inter font
<h1 className="text-6xl font-sans">
  Your Headline
</h1>

Never use Inter. Preferred fonts: Geist, Outfit, Satoshi.

Color

Rules:
- Maximum 1 accent color
- Saturation < 80%
- Never use AI purple/blue (#8B5CF6, #3B82F6)

Layout

// When VARIANCE > 4: Force split-screen hero
<div className="grid lg:grid-cols-2 min-h-screen">
  <div className="flex flex-col justify-center px-8">
    {/* Left: Copy and CTA */}
  </div>
  <div className="relative">
    {/* Right: Visual or media */}
  </div>
</div>

Never center heroes when DESIGN_VARIANCE exceeds 4.

Motion Recipes

Scroll Reveal

import { motion } from 'framer-motion'

function RevealSection({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
    >
      {children}
    </motion.div>
  )
}

This pattern triggers on viewport entry, plays once, and uses a custom easing curve for smooth deceleration.

Magnetic Buttons

import { motion } from 'framer-motion'
import { useRef, useState } from 'react'

function MagneticButton({ children }) {
  const ref = useRef(null)
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const handleMouse = (e) => {
    const { clientX, clientY } = e
    const { left, top, width, height } = ref.current.getBoundingClientRect()
    const x = (clientX - left - width / 2) * 0.3
    const y = (clientY - top - height / 2) * 0.3
    setPosition({ x, y })
  }

  const reset = () => setPosition({ x: 0, y: 0 })

  return (
    <motion.button
      ref={ref}
      onMouseMove={handleMouse}
      onMouseLeave={reset}
      animate={{ x: position.x, y: position.y }}
      transition={{ type: 'spring', stiffness: 150, damping: 15 }}
      className="px-6 py-3 rounded-full bg-slate-900 text-white"
    >
      {children}
    </motion.button>
  )
}

The button follows the cursor with spring physics, creating an organic feel.

Layout Patterns

Bento Grid

The bento paradigm creates asymmetric, card-based layouts:

<div className="grid grid-cols-4 gap-4 p-4">
  <div className="col-span-2 row-span-2 rounded-[2.5rem] bg-white border border-slate-200/50 p-6" />
  <div className="col-span-2 rounded-[2.5rem] bg-white border border-slate-200/50 p-6" />
  <div className="rounded-[2.5rem] bg-white border border-slate-200/50 p-6" />
  <div className="rounded-[2.5rem] bg-white border border-slate-200/50 p-6" />
</div>

Key characteristics:

rounded-[2.5rem] for pill-shaped corners
border-slate-200/50 for subtle borders
Variable column/row spans for visual interest

Glassmorphism Cards

<div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl shadow-2xl">
  {/* Content */}
</div>

The combination of backdrop blur, transparent background, and subtle border creates depth without heaviness.

State Implementation

Every component needs three states minimum:

function DataComponent() {
  const { data, isLoading, error } = useData()

  if (isLoading) {
    return (
      <div className="animate-pulse">
        <div className="h-32 bg-slate-200 rounded-xl" />
      </div>
    )
  }

  if (error) {
    return (
      <div className="text-center py-8 text-red-500">
        Failed to load. Please try again.
      </div>
    )
  }

  if (!data || data.length === 0) {
    return (
      <div className="text-center py-8 text-slate-500">
        No results found.
      </div>
    )
  }

  return (
    <div>
      {/* Render data */}
    </div>
  )
}

The Creative Arsenal

The skill includes pre-built patterns for common UI elements:

Navigation: Dock magnification, magnetic buttons, dynamic island
Layout: Bento grid, masonry, split-screen scroll, curtain reveal
Cards: Parallax tilt, glassmorphism, holographic foil
Scroll: Sticky stack, horizontal hijack, locomotive sequence

Each pattern has implementation examples in the skill’s reference files, ready to adapt.

What This Enables

Before the frontend-dev skill, I’d spend hours:

Finding placeholder images
Writing dummy copy
Adding basic hover states
Fixing layout issues

Now I specify what I want, set the design dials, and get production-ready output. The skill handles the gap between mockup and deployment.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!