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 at 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, tablet, and desktop.

---

3. Web Design Guidelines (03-web-design-guidelines/)

Reviews UI code against Vercel’s Web Interface Guidelines for compliance.

How it works:

1. Fetches latest guidelines from Vercel’s repo
2. Reads specified files
3. Checks against all rules
4. Outputs findings in file:line format

Use when: Reviewing or auditing existing UI code.

---

4. Theme Factory (04-theme-factory/)

10 pre-built professional themes with color palettes and font pairings, plus custom theme generation.

Available themes:

1. Ocean Depths — Professional maritime
2. Sunset Boulevard — Warm, vibrant
3. Forest Canopy — Natural earth tones
4. Modern Minimalist — Clean grayscale
5. Golden Hour — Rich autumnal
6. Arctic Frost — Cool winter
7. Desert Rose — Soft, sophisticated
8. Tech Innovation — Bold, modern
9. Botanical Garden — Fresh, organic
10. Midnight Galaxy — Dramatic, cosmic