web-design-idioms

Installation
SKILL.md

Web Design Idioms — 웹 디자인 관용

web-pack-curator가 웹 스타일을 팩으로 증류할 때 따르는, 웹 매체 고유의 지식.

웹이 PPT와 다른 점

  • 가변 뷰포트. 모바일~데스크탑. 콘텐츠 최대 폭과 브레이크포인트, clamp() 타이포를 지시한다.
  • 컴포넌트 단위 구성. 헤더 / 히어로 / 섹션 / 카드 / 폼 / 푸터. 슬라이드가 아니라 스크롤 흐름.
  • 인터랙션이 스타일의 일부. 호버·스크롤·전환 모션의 성격(없음/절제/스내피/장난스러움)이 정체성.
  • 접근성. 본문 대비 WCAG AA(4.5:1) 이상. 다크/저대비 팩도 텍스트 가독은 지킨다.

컴포넌트 위계

팩의 prompt.md는 최소 이 컴포넌트들에 대한 지시를 담는다:

  • 헤더/네비 — 고정 여부, 로고·메뉴 배치, 배경 처리.
  • 히어로 — 제목 타이포 스케일, 레이아웃(중앙/좌측/분할), 배경·이미지 처리.
  • 섹션/콘텐츠 블록 — 섹션 간 수직 리듬, 콘텐츠 폭.
  • 카드 — 보더·모서리·그림자·호버.
  • 푸터 — 밀도, 색 반전 여부.
Installs
6
GitHub Stars
180
First Seen
May 23, 2026
web-design-idioms — epoko77-ai/design-diversity