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-guidelines when the primary task is compliance auditing against external guideline rules.
• Use ui-ux-pro-max when 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))