디자인 시스템
AI 에이전트를 위한 디자인 시스템.
웹사이트나 앱에 맞는 완성된 디자인 시스템(라이트와 다크 모드의 색상, 폰트, 타입 스케일, 모서리 반경, 간격)을 골라 Codex나 Claude Code에 한 번에 전달하세요. DESIGN.md 파일, shadcn 테마, 프롬프트 한 줄 중 편한 방법으로 쓸 수 있습니다.
Platform
Style
Use
24 design systems
- PaperWeb차분하고 에디토리얼하며 읽기 편한, 잘 짜인 책의 한 페이지처럼.Headings in Source Serif 4
- SwissWeb엄격한 그리드 위의 검정, 흰색, 시그널 레드 하나.Headings in Archivo
- LedgerWeb숫자를 위한 촘촘한 다크 인터페이스, 터미널 앰버 포인트.Headings in IBM Plex Sans
- MonoWeb문서와 개발 도구를 위한 민낯의 흰 페이지, Geist 서체, 코발트 블루 하나.Headings in Geist
- AtelierWeb아이보리, 잉크, 세련된 세리프. 패션 하우스의 룩북 같은 분위기.Headings in Cormorant Garamond
- NoirWeb검정, 본 화이트, 거대한 세리프. 색은 작품 하나뿐.Headings in Instrument Serif
- HarborWeb진지한 B2B 제품을 위한 네이비, 여백, 탄탄한 구조.Headings in Plus Jakarta Sans
- NordicWeb생산성 도구를 위한 톤다운된 파랑, 부드러운 회색, 조용한 자신감.Headings in Manrope
- ClinicWeb건강 웹사이트를 위한 차분한 틸, 또렷한 타이포그래피, 쉬운 말.Headings in Source Sans 3
- TerraWeb땅과 가까이 일하는 브랜드를 위한 이끼, 린넨, 클레이.Headings in DM Serif Display
- ChalkWeb밝고, 둥글고, 격려하는 분위기. 좋은 교실처럼.Headings in Nunito
- PopWeb굵은 검정 테두리, 단단한 그림자, 레몬 옐로. 일부러 시끄럽게.Headings in Unbounded
- StrideApp움직이는 앱을 위한 큼직한 콘덴스드 숫자와 에너지 넘치는 주황.Headings in Barlow Condensed
- PantryApp따뜻하고 친근하고 먹음직스럽게. 음식과 주문 앱을 위해.Headings in Bricolage Grotesque
- CalmApp부드러운 세이지, 온화한 세리프, 숨 쉴 공간.Headings in Newsreader
- WalletApp또렷한 잔액, 차분한 초록, 믿을 수 있는 숫자.Headings in Manrope
- FocusApp흰 화면, 파랑 하나, 그리고 할 일을 가로막는 것은 없음.Headings in Instrument Sans
- ChatterApp둥근 말풍선, 친근한 틸, 대화가 중심인 앱.Headings in Plus Jakarta Sans
- VoyageApp꽉 찬 사진, 오션 블루, 엽서 같은 세리프.Headings in DM Serif Display
- BoutiqueApp가장자리까지 꽉 찬 사진, Bodoni 세리프, 흰 바탕에 검정. 쇼윈도 같은 앱.Headings in Bodoni Moda
- QuestApp연속 기록, XP, 두툼한 버튼으로 연습을 게임처럼 느끼게.Headings in Nunito
- CareApp화면마다 명확한 할 일 하나. 빨리 끝내고 싶은 환자를 위해.Headings in Source Sans 3
- VinylApp커버 아트가 먼저, 핫핑크 재생 버튼, 듣기 좋은 어두운 방.Headings in Syne
- HearthApp어둡고 조용한 홈 화면 위의 따뜻한 앰버 불빛.Headings in Outfit
각 디자인 시스템에 들어 있는 것
- 라이트·다크 모드 색상. shadcn과 Tailwind처럼 역할별로 이름을 붙였습니다. background, primary, muted, border, ring, 그리고 차트 색상 다섯 가지. 모든 텍스트 색상은 배경 위에서 WCAG 대비 기준을 충족합니다.
- 폰트와 타입 스케일. Google Fonts 기반이며 디스플레이부터 작은 글씨까지 크기, 줄 높이, 자간을 정했습니다.
- 모서리 반경, 간격, 그림자. 웹사이트용 그리드, 또는 모바일 앱용 터치 영역, 탭 바, 화면 패딩도 포함합니다.
- 사용 규칙. 무엇에 쓰는지, 어떤 컴포넌트를 만들지, 무엇을 피할지를 담아 에이전트가 이 시스템이라면 했을 선택을 하게 합니다.
쓰는 방법 세 가지
- 프롬프트를 복사해 Codex나 Claude Code에 붙여 넣으세요. 에이전트가 시스템의 일반 텍스트 DESIGN.md를 프로젝트에 저장하고, 모든 화면에서 따릅니다.
- DESIGN.md를 내려받아 프로젝트 루트에 직접 넣으세요. DESIGN.md가 무엇이고 어떻게 쓰는지를 참고하세요.
- 명령어 한 줄로 shadcn 테마를 설치하거나,
globals.css를 Tailwind v4 프로젝트에 붙여 넣으세요.
24개 디자인 시스템은 모두 GitHub에도 공개되어 있으며, DESIGN.md 파일과 shadcn 테마가 함께 들어 있습니다: ummydev/design-md.
웹 시스템과 앱 시스템
웹 시스템은 랜딩 페이지, 마케팅 사이트, 문서, 대시보드를 위한 것입니다. 앱 시스템은 휴대폰 화면을 위한 것으로, 더 큰 터치 영역, 하단 탭 바, iOS와 Android에서 읽기 좋은 글자 크기를 갖췄습니다. 모든 시스템은 각자의 개성이 있으며, 보라색 그라데이션이나 글래스모피즘처럼 AI가 만든 인터페이스를 다 비슷하게 만드는 패턴을 피하도록 골랐습니다.
자주 묻는 질문
이 디자인 시스템은 무료인가요?
네. 모든 디자인 시스템을 무료로 복사하고, 내려받고, 내 프로젝트에서 쓸 수 있습니다.
Codex와 Claude Code 외의 AI 도구에서도 되나요?
네. DESIGN.md는 일반 Markdown이라 프로젝트 안의 파일을 읽는 에이전트라면 따를 수 있고, shadcn 테마는 어떤 shadcn이나 Tailwind 프로젝트에서도 작동합니다.
디자인 시스템을 바꿔도 되나요?
네. DESIGN.md나 CSS 변수를 직접 고치거나, 에이전트에게 고쳐 달라고 하세요. 예를 들어 메인 색상을 브랜드 색상으로 바꿀 수 있습니다.