DESIGN.md 가이드
DESIGN.md는 웹사이트의 디자인 시스템을 코딩 에이전트가 읽을 수 있는 파일로 바꿔요. 색상, 타이포그래피, 간격, 모서리 반경, 컴포넌트와 그 사용 규칙이 담겨요. 이 가이드들은 DESIGN.md로 무엇을 할 수 있는지 단계별로 보여 주며, 각각 DESIGN.md 갤러리의 실제 파일로 만든 실전 예시가 있어요.
이 형식이 처음이라면 DESIGN.md란 무엇인지부터 읽어 보세요. 바로 만들어 보고 싶다면 웹사이트에서 DESIGN.md를 추출하세요.
활용 사례별 가이드
- AI 코딩 에이전트로 개발하는 개발자
Claude Code와 Cursor가 웹사이트 디자인에 맞는 UI를 만들게 하기
마음에 드는 사이트를 추출하고, DESIGN.md를 저장소에 넣고, 에이전트에게 알려 주세요. Claude Code와 Cursor용 프롬프트도 함께 제공해요.
- 1인 창업자와 소규모 팀
디자이너가 없나요? 검증된 디자인 시스템을 내 앱에 가져오세요
참고할 사이트를 고르는 법, DESIGN.md에서 유지할 것과 바꿀 것을 정해 복사본이 아닌 내 것으로 만드는 법.
- 리빌드, 리브랜딩, 마이그레이션을 계획하는 팀
사이트를 리빌드하나요? 먼저 디자인 시스템을 추출하세요
리빌드, 리브랜딩, 프레임워크 이전 전에 현재 사이트를 DESIGN.md로 저장하고, 직접 확인해야 할 부분을 파악하세요.
- 프로토타입을 만드는 디자이너와 에이전시
참고 사이트 두 곳을 섞어 프로토타입용 디자인 하나 만들기
추출한 DESIGN.md 두 개를 토큰 단위로 비교하고, 직접 또는 에이전트로 프로토타입용 사양 하나로 합치세요.
- 에이전트와 에이전트 워크플로를 만드는 개발자
MCP로 코딩 에이전트에게 필요할 때마다 디자인 사양 제공하기
MCP 서버를 연결하면 에이전트가 스스로 사이트의 DESIGN.md를 추출하고, 기다렸다가, 그걸로 UI를 만들어요.