Tired of generic-looking interfaces that scream “AI made this”? This skill helps you create frontend designs that feel genuinely crafted, memorable, and intentional.

What This Skill Does

Frontend Design guides you in creating distinctive, production-grade interfaces that avoid cookie-cutter aesthetics. Whether you’re building from scratch or replicating a design from screenshots, this skill ensures you create something that stands out.

The skill handles two primary workflows: extracting design guidelines from screenshots and implementing them with precision, or creating original designs with bold aesthetic direction. It emphasizes creative typography choices, cohesive color systems, intentional motion design, and spatial composition that breaks expectations.

Think of it as your creative director and implementation guide combined. It won’t let you default to Inter font on a white background with purple gradients. Instead, you’ll learn to make bold choices that fit your specific context, whether that’s brutalist minimalism, maximalist chaos, or refined elegance.

Prerequisites

Before using this skill effectively, you should have:

• Basic understanding of HTML, CSS, and JavaScript
• Familiarity with React (for component-based workflows)
• Access to the ai-multimodal skill (for design extraction and asset generation)
• A code editor and browser for testing

The skill integrates with the AI Multimodal skill for analyzing screenshots and generating visual assets that match your design direction.

Two Primary Workflows

Workflow 1: Implementing from Screenshots

When someone hands you a screenshot, image, or design reference to replicate:

Step 1: Extract Design Guidelines

Never jump straight to code. Analyze the screenshot first using the ai-multimodal skill:

# Analyze the design with Gemini
python scripts/gemini_batch_process.py --files design-screenshot.png --task analyze --prompt "Extract design system: all colors as hex codes, typography (font families, sizes, weights, line heights), spacing scale, layout patterns, visual hierarchy, component styles"

Document your findings in docs/design-guidelines/extracted-design.md with sections for:

• Color palette (exact hex codes)
• Typography system (fonts, sizes, weights, line heights)
• Spacing scale (margins, padding patterns)
• Layout structure (grid, flexbox, positioning)
• Component patterns (buttons, cards, forms)
• Visual hierarchy and mood

Step 2: Implement with Precision

Now write code that faithfully reproduces the extracted design:

/* Use exact colors from extraction */
:root {
  --color-primary: #2D3748;
  --color-accent: #ED8936;
  --color-background: #F7FAFC;
}

/* Match typography specifications */
.heading {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

.body-text {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

Step 3: Verify Quality

Compare your implementation to the original screenshot:

# Take a screenshot of your implementation
# Use chrome-devtools skill or browser dev tools

# Compare with ai-multimodal
python scripts/gemini_batch_process.py --files original.png implementation.png --task analyze --prompt "Compare these two designs. Check color accuracy, spacing consistency, typography matching, and overall fidelity"

Workflow 2: Building from Scratch

When creating original designs without a reference:

Step 1: Design Thinking

Before writing any code, answer these questions:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: What aesthetic direction fits this purpose? (See “Choosing Your Aesthetic” below)
• Constraints: Framework requirements? Performance targets? Accessibility needs?
• Differentiation: What will make this unforgettable?

Step 2: Choose a Bold Direction

Pick an extreme aesthetic and commit to it. Some examples:

• Brutally Minimal: Monospace font, stark black/white, generous whitespace, zero decoration
• Editorial Magazine: Large display fonts, multi-column layouts, dramatic imagery
• Retro-Futuristic: Neon gradients, geometric shapes, synthwave colors
• Organic Natural: Earth tones, flowing shapes, soft shadows
• Industrial Utilitarian: Exposed grids, monospace, technical aesthetic

Step 3: Execute with Precision

Implement your chosen direction with meticulous attention to detail.

Choosing Your Aesthetic

The skill provides detailed guidance on creating distinctive designs across five key areas:

Typography: Break the Default

Stop using Inter, Roboto, Arial, and system fonts. Choose fonts with character:

• Pair a distinctive display font with a refined body font
• Examples: Playfair Display + Source Sans Pro, Syne + IBM Plex Sans, Fraunces + Work Sans
• Use unexpected font choices that match your context
• Consider variable fonts for dynamic weight and width control

Color & Theme: Commit Fully

Use CSS variables for consistency, but choose boldly:

:root {
  /* Dominant colors with sharp accents */
  --color-primary: #1A202C;
  --color-accent: #F56565;
  --color-neutral: #E2E8F0;

  /* Not timid, evenly-distributed palettes */
}

Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion: High-Impact Moments

Focus on one well-orchestrated page load with staggered reveals rather than scattered micro-interactions:

/* Staggered entrance animation */
.hero-title {
  animation: fadeInUp 0.6s ease-out;
}

.hero-subtitle {
  animation: fadeInUp 0.6s ease-out 0.2s;
  animation-fill-mode: backwards;
}

.hero-cta {
  animation: fadeInUp 0.6s ease-out 0.4s;
  animation-fill-mode: backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

For React components, use the Motion library. For advanced JavaScript animations, the skill includes anime.js reference documentation.

Spatial Composition: Break the Grid

Create unexpected layouts:

• Asymmetric arrangements
• Overlapping elements
• Diagonal flow instead of strict vertical/horizontal
• Generous negative space OR controlled density (pick one)

Backgrounds & Visual Details

Never default to solid colors. Create atmosphere:

• Gradient meshes with multiple color stops
• Noise textures for subtle grain
• Geometric patterns (SVG backgrounds)
• Layered transparencies for depth
• Dramatic shadows (not just box-shadow: 0 2px 4px rgba(0,0,0,0.1))

Working with Visual Assets

The skill integrates with ai-multimodal for generating and analyzing visual assets:

Generating Assets

When you need hero images, backgrounds, or decorative elements:

# Generate a background texture
python scripts/gemini_batch_process.py --task generate --prompt "Abstract geometric pattern, teal and navy, minimal style for website background"

# Generate hero image
python scripts/gemini_batch_process.py --task generate --prompt "Isometric illustration of a modern workspace, soft shadows, pastel color palette" --model imagen-4.0-ultra-generate-001

Ensure generated assets align with your chosen aesthetic direction.

Analyzing Design References

When you find inspiration but need to understand how it works:

# Extract the design system
python scripts/gemini_batch_process.py --files inspiration.png --task analyze --prompt "Analyze this design: identify the aesthetic direction, extract color palette, describe typography choices, explain spatial composition, note distinctive elements"

Real-World Examples

Replicate a Landing Page from Screenshot

You received a screenshot of a competitor’s landing page to replicate:

# Extract design system
python scripts/gemini_batch_process.py --files competitor.png --task analyze --prompt "Full design system extraction: colors (hex), fonts (names, sizes, weights), spacing (margins, padding), layout structure, component styles"

# Document findings in docs/design-guidelines/extracted-design.md

# Implement components following exact specifications

# Verify with side-by-side comparison

Create an Original Portfolio Site

You’re building a portfolio from scratch:

Design Thinking: Personal brand, creative professional, needs to stand out.

Aesthetic Direction: Editorial magazine style with large typography, multi-column layouts, dramatic black and white photography.

Implementation:

:root {
  --color-bg: #FAFAF9;
  --color-text: #1C1917;
  --color-accent: #DC2626;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

.content-main {
  grid-column: 1 / 9;
}

.content-aside {
  grid-column: 9 / 13;
}

Best Practices

Never Default to Generic Choices: Every project gets a unique aesthetic direction. Don’t converge on Space Grotesk, Inter, or system fonts across all projects.

Match Complexity to Vision: Maximalist designs need elaborate code with extensive animations. Minimalist designs need precision, restraint, and attention to spacing and typography details.

Design Before Coding: Whether extracting from screenshots or building from scratch, understand the design system before writing implementation code.

Use CSS Variables: Define your design tokens (colors, spacing, typography) as CSS custom properties for consistency.

Test Responsively: Ensure your design works across viewport sizes. Use clamp() for fluid typography, CSS Grid for flexible layouts.

Reference Documentation

The skill includes comprehensive reference files in the Engineer Kit:

• references/design-extraction-overview.md - Process for analyzing screenshots
• references/extraction-prompts.md - Prompts for comprehensive design analysis
• references/visual-analysis-overview.md - Verifying implementation quality
• references/asset-generation.md - Generating design-aligned visual assets
• references/technical-overview.md - Optimization and performance best practices
• references/animejs.md - Advanced JavaScript animations

These live at ../claudekit-engineer/.claude/skills/frontend-design/references/.

Related Skills and Commands

Combine Frontend Design with these other skills for complete workflows:

• AI Multimodal - Extract design from screenshots, generate visual assets
• Frontend Development - Implement with React/TypeScript best practices
• Media Processing - Optimize generated images, remove backgrounds
• Chrome DevTools - Take screenshots of implementations for comparison

Key Principle

The skill exists to help you avoid “AI slop” aesthetics. Every design should feel intentional, contextual, and memorable. Whether you’re replicating a screenshot with pixel-perfect precision or creating an original design with bold choices, the goal is the same: create something distinctive that people actually remember.