Frontend Design Pro

The Problem

AI-generated frontends all look the same: Inter font, purple gradients, card grids. Boring.

The Solution

This skill forces your agent to make bold design choices:

• Typography — Distinctive font pairings, not system defaults
• Color — Dominant colors with sharp accents, not timid palettes
• Motion — Orchestrated reveals and hover states, not scattered animations
• Layout — Asymmetry, overlap, grid-breaking elements
• Texture — Grain overlays, gradient meshes, decorative elements

What Your Agent Produces

Working HTML/CSS/JS (or React/Vue) with:

• Design thinking phase before coding
• Clear aesthetic direction (brutalist, editorial, retro-futuristic, etc.)
• Production-ready responsive code
• Micro-interactions and scroll effects

Example

We used this skill to build a personal homepage in one shot — editorial aesthetic with DM Serif Display, terracotta accents, scroll-reveal animations, and grain overlay. No template, no framework — pure custom design.