세계적인 웹 사이트 구축을 위한 Claude Code Skill의 종합 컬렉션. 이 기술은 통합 설계 시스템과 함께 작동합니다. 시각적 철학과 반응형 패턴에서 전체 웹 사이트 재건 파이프.

Ruh AI에 Jesse Anglen에 의해 건축하는.

---

이러한 것은 무엇입니까?

이 Claude Code Skill - 특정 도메인에서 Claude 딥 전문 지식을 제공하는 구조 지침. ~/.claude/skills/] 디렉토리에 드롭하고 Claude는 대행사 수준의 품질로 생산 등급 웹 사이트를 구축 할 수있는 능력을 얻습니다.

시스템은 AI Slop Test를 통과하는 사이트를 생산하기 위해 설계되었습니다. 누군가가 출력을보고 "AI가 이것을 만들었습니다"라고 말하면 믿지 않을 것입니다.

---

기술 개요

1 프론트엔드 디자인 (01-frontend-design/)

핵심 시각 디자인 철학. 대담하고 독특한 인터페이스를 만드는 방법, 일반적인 AI 미학을 피하는.

키 컨셉:

• Bold 미적 방향 - 극적이고 커밋을 선택하십시오.
• 전기 : 특수 폰트 페어링 (배우 글꼴 목록 포함)
• CSS 사용자 정의 속성이있는 색상 시스템
• 모션 : CSS 전용 애니메이션, 비틀림, 스크롤 트리거 효과

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