Frontend Design

Frontend Design

Build web interfaces that look like a human designer made them, not an AI. This skill enforces intentional aesthetic choices, proper typography hierarchy, and deliberate color systems to produce production-grade frontend code.

Design Thinking

Before writing any code, answer these questions:

1. What is the purpose? — What is the user trying to accomplish? What emotion or response should the interface evoke? (Trust? Excitement? Calm efficiency?)

2. Pick a bold aesthetic direction — Choose a specific visual identity. Examples:

   • Dark editorial (high contrast, serif headlines, generous whitespace)
   • Warm minimal (earth tones, rounded corners, soft shadows)
   • Technical precision (monospace accents, grid-heavy, data-forward)
   • Playful conversational (hand-drawn feel, bright accents, informal type)

3. Identify constraints — Viewport targets, accessibility needs, brand guidelines, performance budgets, framework requirements.

4. Find differentiation — What makes this interface not look like every other AI-generated page? At least one element should be unexpected or distinctive.

Anti-Slop Checklist

Before shipping, verify none of these appear:

Banned Defaults

• No default blue (#3b82f6) — If you need blue, choose a specific shade with intention (slate blue, electric blue, navy). Never use Tailwind's blue-500 without customization.
• No generic gradients — bg-gradient-to-r from-blue-500 to-purple-600 is the hallmark of AI-generated UI. If using gradients, make them subtle and purposeful.
• No "Hero → Features Grid → CTA" template — This is the most common AI layout. Break the pattern: lead with a story, use asymmetric layouts, or let content dictate structure.
• No Lorem Ipsum — Every piece of text should be real or clearly marked as placeholder with context (e.g., "[Company tagline — 6-8 words]").
• No decorative emojis as design elements — Emojis are content, not decoration. Use proper icons (Lucide, Heroicons) or custom SVG.
• No centered-everything layouts — Left-aligned text is easier to read. Center-align only headlines and short CTAs.
• No identical card grids — If showing multiple items, vary the presentation (featured item larger, alternating layouts, editorial list style).

Typography Hierarchy

Establish a clear type scale. Every level should be visually distinct at a glance.

Type Rules

• Maximum two typefaces — One for headings, one for body. Or one typeface at different weights.
• Line length: 50–75 characters per line for body text. Use max-w-prose or equivalent.
• Vertical rhythm: Maintain consistent spacing between type levels. Heading margin-bottom should relate to body line-height.

Color System

Structure

• 2–3 primary colors maximum — One dominant, one secondary, one accent. Adding more dilutes the visual identity.
• Neutral palette — Build from a tinted neutral (warm gray, cool slate, olive) rather than pure gray. Pure #gray feels flat.
• Semantic colors — Success, warning, error, info. These should harmonize with your primary palette, not use default green/yellow/red/blue.

Contrast Requirements

• Body text on background: minimum 4.5:1 contrast ratio (WCAG AA)
• Large text (>18px bold or >24px): minimum 3:1
• Interactive elements: clearly distinguished from static content
• Hover/focus states: visible change in at least one property (color, shadow, border, scale)

Accent Usage

• Accent color should appear on 5–15% of the visible surface
• Use for: primary CTAs, active states, key data points, navigation indicators
• Never use accent as a background for large areas

Layout Principles

Whitespace

• More than you think — The most common amateur mistake is insufficient spacing. When in doubt, add more padding.
• Consistent spacing scale — Use a base unit (4px or 8px) and multiply. Common scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
• Section breathing room — Major sections need 64–128px vertical padding. This is not wasted space; it is structure.

Visual Rhythm

• Vary element sizes — Not every card should be the same size. Not every section should be the same height. Monotony is the enemy of engagement.
• Create focal points — Each viewport should have one dominant element that draws the eye first. Use size, color, or position contrast.
• Asymmetry with intent — Perfectly centered, perfectly symmetric layouts feel static. Introduce controlled asymmetry (offset headings, unequal column widths, varied card sizes).

Responsive Design

• Design for content, not breakpoints — Let content determine where the layout needs to adapt, rather than forcing arbitrary breakpoints.
• Mobile is not "desktop but smaller" — Reconsider information hierarchy for small screens. What matters most on mobile may differ from desktop.
• Touch targets — Minimum 44×44px for interactive elements on touch devices.

Banned Patterns

These specific patterns are overused in AI-generated interfaces and should be avoided or significantly reimagined:

Platform Guidance

Zo.space (React + Tailwind)

• Routes are single-file React components with Tailwind CSS 4
• lucide-react available for icons
• Use useState, useEffect for interactivity
• Tailwind classes for all styling — no external CSS files
• Reference assets with absolute paths (/images/...)

Standalone HTML

• Single-file delivery: inline CSS in <style>, inline JS in <script>
• Use CSS custom properties for theming
• Prefer modern CSS (grid, flexbox, clamp, container queries) over frameworks
• Include viewport meta tag and minimal reset

Next.js

• Component-based architecture with proper file structure
• Use CSS Modules, Tailwind, or styled-components consistently (pick one)
• Server components by default, client components only when needed
• Image optimization via next/image
• Font optimization via next/font