Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.

Core Principle: Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

When to Use This Skill

Use when:

• Building web components, pages, or applications

• Auditing existing CSS for design inconsistencies

• Extracting design tokens from legacy codebases

• Generating color palettes and typography systems

• Creating component templates across frameworks

• Checking accessibility compliance for design elements

Don't use when:

• Simple text content changes

• Backend-only work

• Non-visual functionality

Prerequisites

• Deno runtime (for script execution)

• Optional: Existing CSS/design files for analysis

• Optional: Design tokens file for reference

Quick Start

This skill operates in three modes:

1. Analyze Mode

Audit existing styles, extract tokens, check accessibility.

Audit CSS for design patterns and inconsistencies

deno run --allow-read scripts/analyze-styles.ts styles.css

Extract design tokens from existing CSS

deno run --allow-read scripts/extract-tokens.ts ./src --format css

Check accessibility (contrast, focus states)

deno run --allow-read scripts/analyze-accessibility.ts component.tsx

2. Specify Mode

Create JSON specifications defining what to generate. See assets/ for schema examples.

3. Generate Mode

Create palettes, typography systems, tokens, and components.

Generate a color palette

deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm

Generate typography system

deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"

Generate design tokens file

deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/

Generate a component

deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind

Instructions

Phase 1: Analysis (Optional but Recommended)

Before creating new designs, audit existing code to understand current patterns.

1a. Style Analysis

Analyze CSS files to identify colors, typography, spacing, and inconsistencies:

deno run --allow-read scripts/analyze-styles.ts <input> [options]

Options: --tokens <file> Compare against existing design tokens --pretty Pretty-print JSON output --format <type> Output format: json (default), summary

Output includes:

• Color usage inventory with hex normalization

• Typography patterns (fonts, sizes, weights)

• Spacing value distribution

• Inconsistencies and recommendations

1b. Token Extraction

Extract design tokens from CSS files into standardized formats:

deno run --allow-read scripts/extract-tokens.ts <input> [options]

Options: --format <type> Output: css, scss, tailwind, style-dictionary, tokens-studio --output-css Also output CSS variables file

1c. Accessibility Audit

Check design-related accessibility issues:

deno run --allow-read scripts/analyze-accessibility.ts <input> [options]

Options: --format <type> Output: json, summary --level <AA|AAA> WCAG conformance level (default: AA)

Checks include:

• Color contrast ratios

• Focus indicator presence

• Touch target sizes

• Motion preference respect

Phase 2: Generation

2a. Color Palette Generation

Generate cohesive color palettes from seed colors or themes:

deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>

Options: --seed <color> Primary seed color (hex) --theme <type> warm, cool, neutral, vibrant, muted, dark, light --style <type> minimalist, bold, organic, corporate, playful --shades Generate 50-950 shade scale --semantic Generate success/warning/error colors --contrast <lvl> Target contrast: AA (default), AAA --format <type> css, scss, tailwind, tokens, json

Example specification (palette-spec.json ):

{ "seedColors": { "primary": "#2563eb", "accent": "#f59e0b" }, "theme": "cool", "generateShades": true, "generateSemantics": true, "contrastTarget": "AA", "outputFormat": "css" }

2b. Typography System Generation

Generate typography systems with font stacks and scales:

deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>

Options: --display <font> Display/heading font family --body <font> Body text font family --mono <font> Monospace font family --scale <type> minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio --base <px> Base font size (default: 16) --line-height tight, normal, relaxed --responsive Generate responsive breakpoints --format <type> css, scss, tailwind, tokens

Type scales:

Scale Ratio Character

minor-second 1.067 Subtle, conservative

major-second 1.125 Balanced, professional

minor-third 1.200 Clear hierarchy

major-third 1.250 Strong presence

perfect-fourth 1.333 Bold, impactful

golden-ratio 1.618 Dramatic, artistic

2c. Design Token Generation

Generate comprehensive design token files in multiple formats:

deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>

Specification structure:

{ "name": "my-design-system", "tokens": { "color": { "primary": "#2563eb", "secondary": "#64748b" }, "spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" }, "typography": { "fontFamilies": { "display": "Playfair Display", "body": "Inter" }, "fontSizes": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" } }, "shadow": { "sm": "0 1px 2px rgba(0,0,0,0.05)" }, "border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } }, "animation": { "duration": { "fast": "150ms", "normal": "300ms" } } }, "outputFormats": ["css", "scss", "tailwind", "ts"] }

2d. Component Generation

Generate component templates with design-focused styling:

deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>

Options: --name <name> Component name (required) --type <type> button, card, input, modal, navigation, hero, custom --framework <fw> react, vue, svelte, html --styling <type> css, tailwind, css-modules, styled-components, emotion --aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism --animation <lvl> none, subtle, expressive --dark-mode Include dark mode support --tokens <file> Use design tokens file

Framework output examples:

React with Tailwind:

export function Button({ variant = 'primary', children }: ButtonProps) { return ( <button className="px-4 py-2 rounded-lg font-medium transition-all"> {children} </button> ); }

Vue with scoped CSS:

<template> <button :class="['btn', btn--${variant}]"><slot /></button> </template> <script setup lang="ts"> defineProps<{ variant?: 'primary' | 'secondary' }>(); </script> <style scoped>.btn { /* styles */ }</style>

Svelte:

<script lang="ts"> export let variant: 'primary' | 'secondary' = 'primary'; </script> <button class="btn btn--{variant}"><slot /></button> <style>.btn { /* styles */ }</style>

Examples

Example 1: Audit and Modernize Legacy CSS

1. Analyze existing styles

deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json

2. Extract tokens from the analysis

deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css

3. Generate improved palette from dominant color

deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

Example 2: Create Design System from Scratch

1. Generate color palette

deno run --allow-read --allow-write scripts/generate-palette.ts
--seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css

2. Generate typography system

deno run --allow-read --allow-write scripts/generate-typography.ts
--display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css

3. Generate comprehensive tokens

deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

Example 3: Generate Component Library

Generate button component for React with Tailwind

deno run --allow-read --allow-write scripts/generate-component.ts
--name Button --framework react --styling tailwind --aesthetic bold ./components/

Generate card component for Vue with CSS modules

deno run --allow-read --allow-write scripts/generate-component.ts
--name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/

Generate input for Svelte

deno run --allow-read --allow-write scripts/generate-component.ts
--name Input --framework svelte --styling css --aesthetic minimal ./components/

Example 4: Accessibility Check Before Launch

Audit all components

deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary

Script Reference

Script Purpose Permissions

analyze-styles.ts

Audit CSS for patterns and inconsistencies --allow-read

extract-tokens.ts

Extract design tokens from CSS --allow-read

analyze-accessibility.ts

Check design accessibility --allow-read

generate-palette.ts

Generate color palettes --allow-read --allow-write

generate-typography.ts

Generate typography systems --allow-read --allow-write

generate-tokens.ts

Generate multi-format tokens --allow-read --allow-write

generate-component.ts

Generate framework components --allow-read --allow-write

Design Philosophy

Avoid generic "AI slop" aesthetics. See references/design-philosophy.md for detailed guidance.

Key principles:

• Typography: Choose distinctive fonts, not defaults (avoid Arial, Inter, Roboto)

• Color: Dominant colors with sharp accents, not timid palettes

• Motion: Orchestrated reveals over scattered micro-interactions

• Composition: Asymmetry, overlap, grid-breaking elements

• Texture: Gradients, noise, patterns - not flat solid colors

Never converge on:

• Purple gradients on white backgrounds

• System fonts or overused families

• Predictable card-based layouts

• Cookie-cutter Bootstrap aesthetics

Common Issues

"CSS parsing failed"

• Ensure valid CSS syntax

• SCSS/PostCSS may need preprocessing first

"Color contrast check failed"

• Check for CSS variables that couldn't be resolved

• Provide the actual color values or tokens file

"Unknown framework"

• Supported: react, vue, svelte, html

• Check spelling and lowercase

"Token format not supported"

• Supported: css, scss, tailwind, style-dictionary, tokens-studio, json, ts

Additional Resources

• references/design-philosophy.md

• Detailed anti-slop aesthetics guide

• references/token-formats.md

• Design token format specifications

• references/framework-templates.md

• Framework-specific patterns

• assets/*.json

• JSON schema files for specifications

Related Skills

• web-search

• Research design inspiration and trends

• research-workflow

• Deep dive into design systems