SuperDesign

• 세련되고 모던한 느낌의 UI 코드(HTML/CSS/Tailwind)를 생성하는 AI 에이전트가 필요할 때 — 템플릿처럼 보이지 않는 결과물을 원할 때.
• 랜딩 페이지, 대시보드, 또는 컴포넌트가 많은 인터페이스를 구축하면서 체계적인 디자인 프로세스가 자동으로 적용되길 원할 때.
• oklch()와 같은 최신 색상 기법을 활용하여 라이트/다크 모드 전반에 걸쳐 일관된 테마를 원할 때.
• 접근성을 갖춘 모바일 우선(mobile-first) 반응형 레이아웃과 올바른 시맨틱 HTML이 기본으로 제공되길 원할 때.

• 네이티브 모바일 환경(iOS/Android)에서 작업 중인 경우 — 이 가이드라인은 웹 중심입니다.
• 프로젝트가 엄격한 디자인 시스템(예: Material Design 엄격 준수)을 사용하고 있어 여기서 제공하는 독자적인 테마 패턴과 충돌하는 경우.

모든 UI는 레이아웃 디자인, 테마 디자인, 애니메이션 디자인, 그리고 구현의 순서로 접근합니다. 이 방식은 구조와 미적 요소를 고려하기 전에 바로 코드로 넘어가는 것을 방지하여, 보다 일관성 있는 결과물을 만들어냅니다.

이 스킬은 낡고 일반적인 팔레트(예: Bootstrap 블루)를 명시적으로 지양하며, 지각적으로 균일한 모던 색상 정의를 위해 oklch()를 적극 활용합니다. 다크 모드 (Vercel/Linear 스타일), 네오 브루탈리즘, 글래스모피즘을 위한 사전 제작된 테마 패턴이 바로 사용 가능한 CSS 변수와 함께 포함되어 있습니다.

산세리프, 모노스페이스, 세리프, 디스플레이 카테고리에 걸쳐 엄선된 Google Fonts 목록을 제공하며, Lucide 아이콘과 Flowbite 컴포넌트를 위한 CDN 즉시 연동 기능도 함께 제공합니다 — 타이포그래피 선택에 대한 불필요한 고민을 완전히 없애줍니다.

마이크로 인터랙션 계획을 위한 간결한 표기 시스템(예: button: 150ms [S1→0.95→1] press)은 애니메이션을 의도적으로 유지하는 데 도움이 됩니다. 진입 애니메이션, 호버 상태, 버튼 누름, 페이지 전환에 대한 권장 타이밍 범위가 정의되어 있습니다.

가이드라인은 시맨틱 HTML, 올바른 제목 계층 구조, ARIA 레이블, 최소 4.5:1 색상 대비율, 키보드 탐색 지원을 적용하여 추가적인 프롬프트 없이도 출력 결과가 기본 접근성 기준을 충족하도록 보장합니다.

카드, 버튼, 폼, 내비게이션에 대한 확고한 모범 사례가 내장되어 있으며 — 그림자 깊이, 터치 대상 크기, 포커스 상태, 로딩/비활성화 상태, 고정 헤더 동작을 포괄합니다.

에이전트에게 SaaS 랜딩 페이지를 만들어 달라고 요청하면, SuperDesign이 구조화된 레이아웃(헤더 → 히어로 → 기능 소개 → 푸터)을 따르고, 현대적인 폰트 조합을 선택하며, 일관된 색상 테마를 적용하고, 모바일 우선 반응형 CSS를 생성합니다 — 수동으로 디자인 방향을 지시하지 않아도 됩니다.

분석 또는 관리자 대시보드를 프로토타이핑할 때, 이 스킬은 에이전트가 먼저 레이아웃 와이어프레임을 작성하고, 일관된 간격과 은은한 카드 그림자를 적용하며, 호버/애니메이션 상태를 포함하도록 안내합니다 — 완성도 높은 프로덕션 수준의 프로토타입을 제작할 수 있습니다.

이 스킬을 사용하여 동일한 디자인 토큰(색상, 반경, 그림자에 대한 CSS 변수)을 공유하고 접근성 검사를 통과하는 버튼, 폼 필드 및 내비게이션 컴포넌트의 통일된 세트를 생성하세요.

라이트 모드와 다크 모드를 모두 지원해야 하는 인터페이스를 구축할 때, SuperDesign의 CSS 변수 접근 방식과 oklch() 색상 가이드라인은 나중에 다크 모드를 추가로 적용하는 대신, 처음부터 테마를 인식하는 시스템을 만들 수 있도록 에이전트를 지원합니다.