Frontend Design

Frontend Design

Create distinctive, production-grade web interfaces that avoid generic AI aesthetics.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/frontend-design ~/.claude/skills/

Design Thinking Process

1. Understand Context

Before writing code, answer:

• Purpose: What problem does this interface solve? Who uses it?
• Audience: Technical sophistication, expectations, emotional state when arriving
• Constraints: Framework requirements, browser support, performance budget, accessibility needs

2. Commit to an Aesthetic Direction

Choose a specific point of view — not "clean and modern" but a real aesthetic:

3. Identify the Memorable Thing

Every interface should have one element someone remembers:

• An unexpected interaction
• A distinctive type treatment
• A bold color choice
• An animation that surprises
• A layout that breaks convention

4. Execute with Intentionality

The key is commitment, not intensity. Maximalism executed fully works. Minimalism executed with precision works. The mushy middle does not.

Typography

Principles

• Choose distinctive fonts, NOT defaults (avoid Arial, Inter, Roboto for display use)
• Pair a display font (personality) with a body font (readability)
• Size hierarchy: display (48-96px), heading (24-36px), body (16-18px), small (12-14px)
• Tight letter-spacing on large display text (-0.02 to -0.04em)
• Normal or slightly loose spacing on body text

Free Font Sources

Pairing Strategy

Color & Theme

Building a Palette

1. Start with one dominant color (the mood-setter)
2. Add 1-2 accent colors (for interaction, emphasis)
3. Define neutral scale (backgrounds, borders, text)
4. Add semantic colors (success, warning, error)
5. Store everything in CSS custom properties

:root {
  --color-primary: #...;
  --color-accent: #...;
  --color-bg: #...;
  --color-surface: #...;
  --color-text: #...;
  --color-text-secondary: #...;
  --color-border: #...;
}

Rules

• Dominant + accent, not evenly distributed
• WCAG AA contrast minimum (4.5:1 for text, 3:1 for large text)
• Dark vs. light: commit fully. Do not hedge.
• Test with real content, not lorem ipsum

Motion & Animation

CSS Transitions (Micro-interactions)

.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

CSS @keyframes (Ambient)

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floating-element { animation: float 3s ease-in-out infinite; }

Scroll-Triggered (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

Staggered Reveals

.stagger-item { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
.stagger-item.visible { opacity: 1; transform: translateY(0); }
.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.2s; }

Performance

• Animate only transform and opacity (GPU-composited)
• Avoid animating width, height, margin, padding (trigger layout)
• Use will-change sparingly and only on elements that will animate
• Prefer CSS over JS for simple animations
• Use prefers-reduced-motion media query for accessibility

Spatial Composition

• Break out of the centered-content-column default
• Use asymmetry and grid-breaking elements intentionally
• Overlap elements with z-index for depth
• Generous negative space OR controlled density — commit to one
• CSS Grid for complex layouts, Flexbox for component alignment

Code Quality

• Semantic HTML (nav, main, article, section, aside, footer)
• Accessible: ARIA labels, keyboard navigation, focus management
• Responsive: mobile-first or fluid, tested at 320-1440px
• Performance: lazy loading images, efficient selectors, minimal JS
• No external dependencies unless essential (CDN fonts are fine)

Anti-Patterns

• Generic AI aesthetics (purple gradients everywhere, glassmorphism on everything)
• Cookie-cutter component libraries used without customization
• Predictable layouts (hero → 3-column → testimonials → CTA)
• "Clean and modern" as the entire design direction
• Overused fonts (Inter, Poppins for display)
• Decorative elements without purpose
• Rounded everything (a specific choice is fine, but default rounding is lazy)
• Dark mode with neon accents (overdone)

For typography pairings, color construction, animation library, and accessibility checklist, see REFERENCE.md.

Brand Context (Optional)

If brand-profile.json exists in the working directory, read it before designing. Use colors (primary, secondary, background, text) for the design system, typography (heading and body fonts) for type selections, aesthetic (mood keywords, texture, negative space) for layout decisions, and imagery (style, composition) for hero sections and visual elements. This profile is produced by the brand-dna skill.