Ui Design Aesthetics

UI Design & Aesthetics

Expert guidance for designing and implementing beautiful, high-performance user interfaces. This skill enforces distinctive aesthetics while ensuring technical excellence through progressive disclosure and dynamic loading.

Core Capabilities

• Aesthetic Direction: avoiding "AI slop" by enforcing distinctive typography, color, and depth.
• Performance Architecture: ensuring UI components load dynamically to minimize initial payload.
• Progressive Disclosure: designing interfaces that reveal complexity only when needed.
• API Contract Validation: ensuring frontend components align with backend data structures.

Usage

Use this skill when:

• Designing a new feature or application from scratch.
• Refactoring an existing UI to be more modern and performant.
• Implementing complex dashboards or data-heavy interfaces.

Quick Reference

Design Workflow

1. Analyze & Select Aesthetic: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults. 2. Architect for Performance: Identify heavy components for lazy loading (React.lazy, dynamic imports). 3. Design Interaction: Plan staggered reveals and interaction-based loading. 4. Validate Data: Define TypeScript interfaces or Zod schemas for API responses. 5. Implement: Write the code using utility classes (Tailwind) and enforcing the design system.

Performance Requirements

• Initial Payload: Critical path CSS/JS only.
• Dynamic Loading: Secondary components MUST load on interaction or visibility (IntersectionObserver).
• Latency: Design optimistic UI states for interactions > 100ms.

Aesthetic Guidelines

Goal: Avoid generic "AI slop". Make distinctive, high-quality choices.

Typography

• Avoid: Inter, Roboto, Open Sans, Arial, system defaults.
• Use:
• Code: JetBrains Mono, Fira Code, Space Grotesk.
• Editorial: Playfair Display, Crimson Pro, Fraunces.
• Startup: Clash Display, Satoshi, Cabinet Grotesk.
• Technical: IBM Plex family, Source Sans 3.
• Weights: Use extremes (100 vs 900) for contrast. Avoid safe middles (400 vs 600).

Color & Theme

• Commit: Choose a cohesive aesthetic (Solarpunk, Swiss Style, Brutalism, Glassmorphism).
• Avoid: Soft purple gradients on white backgrounds.
• Contrast: High contrast accents on neutral bases.

Motion

• Performance: CSS-only transforms and opacity.
• Choreography: Staggered page load reveals (animation-delay).
• Feel: Snappy (spring physics) over linear.

Backgrounds

• Depth: Layered gradients, noise textures, geometric patterns.
• Avoid: Flat, sterile solid colors.

API Contract Validation

Goal: Ensure seamless integration between frontend skills/components and backend APIs.

Strategy

1. Schema-First Design: Define the API contract before implementing the UI. 2. Validation: Use runtime validation (Zod, Io-TS) to ensure incoming data matches the contract. 3. Mocking: Generate strict mocks based on the schema for development.

Implementation Pattern

1. Define Schema (Zod)

import { z } from 'zod';

export const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(2),
  role: z.enum(['admin', 'user']),
  preferences: z.record(z.boolean()).optional()
});

export type User = z.infer<typeof UserSchema>;

2. Validation Hook

function useUser(id: string) {
  return useQuery(['user', id], async () => {
    const data = await fetch(`/api/users/${id}`).then(r => r.json());
    // Runtime validation - throws if contract is violated
    return UserSchema.parse(data);
  });
}

3. Contract Tests

• Write integration tests that verify the UI handles both success states (valid data) and contract violations (invalid data/error boundaries) gracefully.

Progressive Disclosure & Dynamic Loading

Goal: Minimize initial payload and load complexity only when needed.

Strategies

1. Component Lazy Loading

• React: Use React.lazy and Suspense for all non-critical routes and heavy modals.
• Next.js: Use dynamic() imports.
• Pattern:

  const HeavyChart = dynamic(() => import('./HeavyChart'), {
    loading: () => <Skeleton />,
    ssr: false
  });

2. Interaction-Based Loading

• Defer loading of components until the user interacts with a trigger.
• Example: Don't load the SettingsModal code until the user hovers over the "Settings" button.

3. Visibility-Based Loading

• Use IntersectionObserver to load components only when they scroll into view.
• Example: Below-the-fold content, image galleries, comment sections.

4. Progressive Disclosure UI

• Summary First: Show high-level stats/summary.
• Details on Demand: Reveal complex data tables or forms only upon user action (click/expand).
• Optimistic UI: Show the "success" state immediately while the async operation completes.

Performance Metrics

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1