Web Design Skills

Web Design System Skills for Claude Code

A comprehensive collection of Claude Code skills for building world-class websites. These skills work together as an integrated design system — from visual philosophy and responsive patterns to full website rebuild pipelines.

Built by [Jesse Anglen](https://github.com/lotfb86) at [Ruh AI](https://ruh.ai).

---

What Are These?

These are **Claude Code skills** — structured instructions that give Claude deep expertise in specific domains. Drop them into your `~/.claude/skills/` directory and Claude gains the ability to build production-grade websites with agency-level quality.

The system is designed to produce sites that pass the **AI Slop Test**: if someone looked at the output and was told "AI made this," they wouldn't believe it.

---

Skills Overview

1. Frontend Design (`01-frontend-design/`)

The core visual design philosophy. Defines how to make bold, distinctive interfaces that avoid generic AI aesthetics.

**Key concepts:**

• Bold aesthetic direction — pick an extreme and commit
• Typography: distinctive font pairings (with a banned font list)
• Color systems with CSS custom properties
• Motion: CSS-only animations, staggered reveals, scroll-triggered effects
• Spatial composition: asymmetry, overlap, grid-breaking layouts
• Visual depth: textures, gradients, layered compositions

**Use when:** Building any UI component, page, or application.

---

2. Responsive Design (`02-responsive-design/`)

Mobile-first layout patterns, breakpoint systems, fluid typography, and container queries.

**Key concepts:**

• Standard breakpoint system (640/768/1024/1280/1536px)
• Mobile-first with min-width media queries only
• CSS Grid auto-responsive patterns (no media queries needed)
• Fluid typography with clamp()
• Container queries for component-level responsiveness
• Responsive images with srcset and
• Testing checklist for all viewport sizes

**Use when:** Any UI that must work across mobile,