디자인 레퍼런스 · DWG 07
design-isms
디자인 사조부터 UI 패턴까지, 사람과 에이전트가 함께 보는 레퍼런스
design-isms는 미니멀리즘부터 바우하우스, 브루탈리즘까지 디자인 사조와 인터랙션 패턴을 모은 시각 레퍼런스입니다. 웹에서 둘러보거나, 코딩 에이전트가 MCP로 팔레트·타이포그래피·레이아웃 지침과 코드 예시를 직접 조회합니다.
사양
- 설치
git clone https://github.com/lidge-jun/design-isms.git- 분류
- 디자인 레퍼런스
- 라이선스
- 미지정
- GitHub · npm
- 38+ 스타2026년 9월 25일 기준 · 스냅샷
기능
- FIG. 01
사조별 시각 레퍼런스
목업, 역사, 팔레트, 실제 사이트 예시를 사조마다 정리했습니다.
- FIG. 02
동작하는 패턴
바텀 시트, 드로어, 스크롤 등장 같은 패턴을 데모, HTML/CSS/JS, 접근성 지침과 함께 제공합니다.
- FIG. 03
에이전트용 코드 모드 MCP
에이전트가 같은 카탈로그를 질의해 구현 브리프를 받아 갑니다.
- FIG. 04
한국어·영어
사용 지침과 제약, 확인 항목을 두 언어로 제공합니다.
이런 때 씁니다
- 에이전트에게 "모던하게" 대신 구체적인 디자인 방향을 주고 싶을 때
- 모션이나 인터랙션 패턴을 접근성까지 챙겨 가져오고 싶을 때
- 디자인 결정을 팀과 같은 언어로 이야기하고 싶을 때
자주 묻는 질문
설치가 필요한가요?
웹사이트는 바로 볼 수 있고, MCP로 쓰려면 저장소를 클론해 설정에 서버 경로를 넣습니다. Node.js 22 이상이 필요합니다.
이 사이트와 관계가 있나요?
이 사이트의 스크롤·카드 모션은 design-isms 카탈로그의 효과를 사이트 톤에 맞게 옮겨 온 것입니다.
라이선스는요?
소스는 공개되어 있지만 아직 라이선스가 지정되지 않았습니다. 재사용 전에 저장소에서 확인해 주세요.