Claude Code Skill+Component library for buildingpremium, Editorial-grade web interface — 고급 브랜드, 고급 제품, 디자인-forward SaaS 및 크리에이티브 포트폴리오.

Think: 편집 잡지는 동의 디자인을 만납니다. Serif 전시 전기, 의도적인 동의, 구속된 팔레트, 비대칭 구성. tech-SaaS가 매끄럽지 않습니다. - 편집 럭스.

내부는 무엇입니까?

**13 진정한 원래 구성 요소 **, 모든 거친 디자인 언어의 주위에 스크래치에서 내장 :

|구성 | 부품 | |—||| 내비게이션 | Editorial Masthead (데스크탑 호버 + 풀스크린 모바일 오버레이) | | 히어로 | 킨틱 마스크 히어로(scroll-driven, no product mockup) | | 특징 | 편집 인덱스 (숫자 행 + 스포트라이트) | | 통계 | 편집 번호(세르프 카운터 애니메이션) | | 로고 / 클라이언트 | 편집 클라이언트 Ledger (인쇄, 로고 이미지 없음) | | 갤러리 / 작품 | 편집 작품 색인 (대칭 스팬) | | 회사소개 | 편집 이야기 / Manifesto (drop-cap + Pull Quote) | | 증언 | 편집부 풀 견적 (단, 큰 견적 + 항해자) | | 가격 | 편집대 비대칭(5-col, 추천+ stacked) | | 자주 묻는 질문 | 편집표(이탈문, 확장 가능) |

Premium Design Skill — Kinetic Luxe

A Claude Code skill + component library for building premium, editorial-grade web interfaces — for high-end brands, luxury products, design-forward SaaS, and creative portfolios.

Think: editorial magazine meets motion design. Serif display typography, intentional motion, restrained palettes, asymmetric composition. Not tech-SaaS sleek — editorial-luxe.

What’s inside

13 genuinely original components, all built from scratch around a cohesive design language:

Plus design foundation docs:

• design-tokens.md — colors, typography scale, spacing
• motion-principles.md — easing library, duration scale, reveal patterns

Install

Clone into your Claude Code skills directory:

git clone https://github.com/luukalleman/premium-design-skill.git ~/.claude/skills/premium-design-skill

Then symlink the skill into place:

ln -s ~/.claude/skills/premium-design-skill/skills/premium-design ~/.claude/skills/premium-design

Restart Claude Code. The skill triggers on: “premium design”, “editorial”, “luxe”, “high end”, “atelier”, “make it premium”, “creative agency site”, “portfolio site”.

Use the components directly (without the skill)

Every component is standalone TSX. Copy what you need from skills/premium-design/references/catalog/components/:

cp skills/premium-design/references/catalog/components/hero-variant-1.tsx src/components/

Dependencies per component:

• framer-motion (all components)
• react (all)
• Tailwind CSS with the design tokens (see skills/premium-design/references/design-tokens.md)
• Fonts: Fraunces (display) + Inter (body) — load via Google Fonts

Design language: Kinetic Luxe

Five rules (from SKILL.md):

1. Typography is the protagonist — Fraunces for display at huge clamp() sizes, Inter for body, strict tracking and leading.
2. Motion is intentional — no bouncy springs. Long easeOutExpo (1.2–1.8s) reveals tied to scroll.
3. Depth through layers — noise texture + warm radial gradients + hairline borders. No shadow-lg.