# Awesome Design.MD - 유명 웹사이트 디자인 시스템을 내 사이트에 적용하기

> Clean Markdown view of GeekNews topic #28246. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28246](https://news.hada.io/topic?id=28246)
- GeekNews Markdown: [https://news.hada.io/topic/28246.md](https://news.hada.io/topic/28246.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-04-06T10:21:02+09:00
- Updated: 2026-04-06T10:21:02+09:00
- Original source: [github.com/VoltAgent](https://github.com/VoltAgent/awesome-design-md)
- Points: 118
- Comments: 5

## Summary

**Google Stitch**가 도입한 `DESIGN.md` 개념을 확장해, **Stripe, Notion, Vercel** 등 **60개 이상** 서비스의 디자인 시스템을 마크다운 하나로 패키징한 프로젝트입니다. 프로젝트 루트에 복사하면 AI 에이전트가 즉시 해당 스타일을 인식하고 UI를 생성합니다. Figma도 JSON 스키마도 필요 없고요. 기존 `AGENTS.md`가 에이전트의 **행동 규칙**을 정의했다면, `DESIGN.md`는 **시각적 외형**을 정의하는 쌍이라고 보시면 됩니다. 에이전트에게 "이렇게 생긴 페이지 만들어줘" 한마디로 되는 시대가 왔네요.

## Topic Body

- **DESIGN.md**는 [Google Stitch가 도입한 개념](https://news.hada.io/topic?id=27635)으로, AI 에이전트가 읽고 일관된 UI를 생성하기 위한 **텍스트 디자인 문서**  
- Figma, JSON 스키마, 별도 툴링 없이 **마크다운 파일 하나**만 프로젝트 루트에 복사하면 AI 코딩 에이전트가 즉시 UI 스타일 인식  
- 기존 `AGENTS.md`와 쌍을 이루며, `DESIGN.md`는 **시각적 외형과 느낌**을 정의  
- 각 파일은 색상 팔레트, 타이포그래피, 컴포넌트 스타일링, 레이아웃, 반응형 동작 등 **9개 표준 섹션**으로 구성  
- 각 사이트마다 `DESIGN.md` + `preview.html` + `preview-dark.html` **3종 세트** 제공  
- Claude, Vercel, Stripe, Notion, Figma, Cursor 등 **AI·개발툴·핀테크·엔터프라이즈 60개 이상** 서비스의 디자인 시스템 수록  
  - 원하는 사이트의 `DESIGN.md`를 프로젝트 루트에 복사하고, AI 에이전트에게 해당 파일을 참조하여 UI를 빌드하도록 지시  
  - **"이렇게 생긴 페이지를 만들어줘"** 한 마디로 원본 사이트와 일치하는 UI 생성 가능  
- MIT 라이선스   
  
### 각 DESIGN.md 파일 구성  
- [Stitch DESIGN.md](https://stitch.withgoogle.com/docs/design-md/format/) 포맷을 따르며, 아래 9개 섹션으로 확장 구성  
  
  | # | 섹션 | 캡처 내용 |  
  |---|------|-----------|  
  | 1 | Visual Theme & Atmosphere | 무드, 밀도, 디자인 철학 |  
  | 2 | Color Palette & Roles | 색상명 + HEX + 기능적 역할 |  
  | 3 | Typography Rules | 폰트 패밀리, 전체 계층 테이블 |  
  | 4 | Component Stylings | 버튼, 카드, 입력, 내비게이션 및 상태 |  
  | 5 | Layout Principles | 간격 스케일, 그리드, 여백 철학 |  
  | 6 | Depth & Elevation | 그림자 시스템, 서피스 계층 |  
  | 7 | Do's and Don'ts | 디자인 가이드라인 및 안티패턴 |  
  | 8 | Responsive Behavior | 브레이크포인트, 터치 타깃, 축소 전략 |  
  | 9 | Agent Prompt Guide | 색상 빠른 참조, 즉시 사용 가능한 프롬프트 |  
    
### 포함된 컬렉션   
  
- **AI & Machine Learning**: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI  
- **Developer Tools & Platforms**: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier  
- **Infrastructure & Cloud**: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe  
- **Design & Productivity**: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow  
- **Fintech & Crypto**: Coinbase, Kraken, Revolut, Wise  
- **Enterprise & Consumer**: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

## Comments



### Comment 54734

- Author: hidarite
- Created: 2026-04-06T10:29:12+09:00
- Points: 2

개념은 좋고 유용할것 같긴 합니다만...   
웹디자인도 저작권이 있을텐데,   
이렇게 통채로 카피해서 적용하는 것이 저작권 문제는 없을지, 상도덕의 문제는 없을지 궁금하네요.

### Comment 55133

- Author: tsboard
- Created: 2026-04-12T12:05:19+09:00
- Points: 2
- Parent comment: 54734
- Depth: 1

저도 이생각이 바로 들었습니다. 요즘은 AI 서비스나 에이전트가 뭔가 초법적인 권한을 가진 상태를 그냥 가정하는 것 같아요. 뭔가 이렇게 반쯤 눈 가린 상태로 가도 되나? 하는...

### Comment 54796

- Author: kaydash
- Created: 2026-04-07T03:57:07+09:00
- Points: 1

좋네요. 프론트엔드와 디자인하시는분들은 이런걸 미리 만들어두고 시작하시던데

### Comment 54740

- Author: m00nlygreat
- Created: 2026-04-06T11:58:52+09:00
- Points: 1

근데  보통 프론트엔드 프레임웤 안에 디자인 시스템을 코드 조각 형태로 가지고 있어서, 이걸 공통으로 사용해야 하지 않나요..?   
  
DESIGN.md를 따른다는 건, 해당 컬러와 지시사항을 매번 자의적으로 생성하겠다는 의미 같은데 ...

### Comment 54738

- Author: hmmhmmhm
- Created: 2026-04-06T11:11:02+09:00
- Points: 1

단순히 카피가 아니라 뭔가 여러 디자인 시스템을 토대로 새로운 디자인 시스템을 만들어내는 용도로 사용되면 좋을 것 같아요.