フロントエンドデザインスキルの例

---
name: Modern Frontend Design
description: Create beautiful, unique UI designs that avoid generic AI aesthetics
version: 1.0.0
author: Design Community
platforms:
  - claude-code
  - codex
categories:
  - design
  - frontend
tags:
  - ui
  - ux
  - css
  - tailwind
---

# Modern Frontend Design

## Design Philosophy

Create interfaces that feel crafted and intentional, not generated.
Every design decision should serve the user experience and reflect
the brand's unique identity.

## Avoiding the "AI Look"

Common AI design patterns to avoid:
- Generic gradient backgrounds (#667eea to #764ba2)
- Overused stock-like illustrations
- Perfectly symmetric layouts everywhere
- Purple/blue/pink color combinations
- Generic rounded cards with drop shadows

## Visual Principles

### Typography

**Hierarchy is everything:**
- One display font, one body font maximum
- Clear size progression (1.25x or 1.333x scale)
- Generous line height (1.5-1.75 for body text)
- Intentional letter spacing for headings

**Good combinations:**
- Display: Clash Display / Body: Satoshi
- Display: Cabinet Grotesk / Body: General Sans
- Display: Fraunces / Body: Commissioner

### Color Strategy

**Build from brand colors, not trends:**
1. Start with one primary color
2. Add a neutral palette (warm or cool grays)
3. One accent color maximum
4. Use tints/shades, not random colors

**Example palette:**
- Primary: Deep teal #0F766E
- Neutrals: Slate scale
- Accent: Warm amber #F59E0B
- Background: Off-white #FAFAF9

### Spacing and Layout

**Consistent rhythm:**
- Use 8px grid system
- Generous whitespace (more than you think)
- Asymmetry creates visual interest
- Let content breathe

**Grid guidelines:**
- Max content width: 1200-1440px
- Generous side margins (5-10% viewport)
- Component spacing: 24px, 48px, 96px

### Components

**Cards:**
- Subtle shadows (not box-shadow: 0 4px 6px)
- Consider no shadow + border instead
- Micro-interactions on hover
- Avoid perfectly rounded corners everywhere

**Buttons:**
- Clear visual hierarchy (primary, secondary, ghost)
- Adequate padding (12px 24px minimum)
- Hover states that feel responsive
- Consider pill shape OR slight rounding, not both

**Forms:**
- Large touch targets (44px minimum)
- Clear focus states
- Inline validation feedback
- Helpful placeholder text

## Modern CSS Techniques

### Layout

\`\`\`css
/* Fluid container with max width */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

/* Responsive grid without media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
\`\`\`

### Typography

\`\`\`css
/* Fluid typography */
.heading {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.body {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
}
\`\`\`

### Motion

\`\`\`css
/* Smooth, intentional transitions */
.interactive {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interactive:hover {
  transform: translateY(-2px);
}
\`\`\`

## Do's and Don'ts

### Do
- Start with content, then design around it
- Use real copy, not lorem ipsum
- Test on real devices
- Consider dark mode from the start
- Prioritize performance

### Don't
- Use more than 2-3 font weights
- Animate everything
- Ignore accessibility
- Copy Dribbble shots directly
- Over-complicate simple interfaces

## Examples

### Hero Section - Good
Clean, focused layout with clear hierarchy and intentional spacing.
Single call-to-action, minimal distractions, authentic imagery.

### Hero Section - Bad
Gradient background, multiple CTAs competing for attention,
stock photos, too many decorative elements.

## Tailwind Recommendations

\`\`\`jsx
// Good: Intentional, accessible
<button className="
  bg-teal-700 text-white
  px-6 py-3 rounded-lg
  font-medium
  hover:bg-teal-800
  focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2
  transition-colors
">
  Get Started
</button>

// Avoid: Generic AI style
<button className="
  bg-gradient-to-r from-purple-600 to-pink-600
  px-4 py-2 rounded-full
  shadow-lg hover:shadow-xl
  text-white font-bold
">
  Click Here!
</button>
\`\`\`