web-design-pro
SKILL.md
Web Design Pro (Modern Design Engineering)
When to Use This vs Others
- Use this (
web-design-pro) for advanced design engineering: tokens, accessibility, performance, and production-grade UI systems. - Use
web-design-guidelineswhen the primary task is compliance auditing against external guideline rules. - Use
ui-ux-pro-maxwhen you need deliverable-driven UX flows, component specs, and direct UI generation/refinement output.
웹 디자인의 심미성을 넘어, 시스템 설계, 성능 최적화, 접근성, 그리고 게임 특화 UX를 통합한 전문가 레벨의 기술셋.
1. Design Systems & Tokens (디자인 시스템 & 토큰)
디자인 결정을 데이터로 관리하여 디자인과 코드 간의 간극을 없앤다.
토큰 계층 구조
- Primitive Tokens (Raw): 기초적인 값 (예:
blue-500: #3B82F6) - Semantic Tokens (Meaning): 역할과 맥락 부여 (예:
action-primary: var(--blue-500)) - Component Tokens (Specific): 특정 컴포넌트 전용 (예:
btn-bg: var(--action-primary))