SYDE
SYDESYDESYDE유명 서비스의 디자인 시스템을 파일 하나로 내 프로젝트에 그대로 적용할 수 있어요.
DESIGN.md는 구글 Stitch가 도입한 개념으로, 브랜드의 디자인 시스템을 마크다운 파일 하나에 담은 거예요. AI 에이전트가 읽고 바로 일관된 UI를 만들어줘요.
getdesign.md에서 Stripe, Notion, Linear, Vercel, Supabase 등 70개가 넘는 브랜드의 DESIGN.md를 무료로 받을 수 있어요.
프로젝트 루트에 파일 하나 넣고 AI에게 "이걸 참고해서 만들어줘"라고 하면 끝이에요. Figma도, JSON 스키마도, 별도 설정도 필요 없어요.
각 파일에는 색상 팔레트, 타이포그래피, 컴포넌트 스타일, 레이아웃 원칙, Do's & Don'ts까지 9가지 섹션이 빠짐없이 담겨 있어요.
디자이너 없이 MVP를 빠르게 만들어야 하는 1인 개발자에게 특히 유용한 도구예요.
AI 코딩 도구로 서비스를 만들다 보면 항상 같은 문제가 생겨요. 기능은 잘 만들어주는데, UI가 영 어색하다고요. 버튼 크기가 이상하거나, 색이 튀거나, 전체적으로 "AI가 만든 느낌"이 팍 나는 것들이요.
이유는 단순해요. AI가 디자인 컨텍스트 없이 코드를 짜기 때문이에요.
DESIGN.md는 이 문제를 해결하는 파일이에요. 구글 Stitch 팀이 도입한 개념인데요. 쉽게 말하면 "이 프로젝트는 이런 디자인 시스템으로 만들어"라고 AI에게 건네주는 명세서예요. 마크다운 파일이라 LLM이 읽기에 최적화된 포맷이고, Figma 익스포트도, JSON 스키마도, 별도 설정도 필요 없어요. 프로젝트 루트에 파일 하나 넣으면 AI 에이전트가 읽고 해당 디자인 감성으로 UI를 생성해줘요.
AGENTS.md가 "어떻게 빌드할지"를 정의한다면, DESIGN.md는 "어떻게 보여야 할지"를 정의하는 거예요.
단순한 색상 코드 나열이 아니에요. 각 DESIGN.md는 9가지 섹션으로 빈틈없이 구성돼 있어요.
🎨 비주얼 테마 & 분위기: 브랜드의 전체적인 무드와 디자인 철학을 담아요. 예를 들어 Linear는 "울트라 미니멀, 정밀함"이고 Notion은 "따뜻한 미니멀리즘"이에요.
🎨 색상 팔레트 & 역할: 단순히 헥스 코드만 나열하는 게 아니라, 각 색상이 어떤 기능적 역할을 하는지까지 정의돼 있어요.
✍️ 타이포그래피 규칙: 폰트 패밀리부터 H1~H6 계층 구조, 본문 크기까지 전체 타이포그래피 테이블이 포함돼 있어요.
🧩 컴포넌트 스타일링: 버튼, 카드, 입력 폼, 네비게이션의 스타일과 각 상태(hover, active, disabled)까지 명시해요.
📐 레이아웃 원칙: 간격 스케일, 그리드, 여백 철학을 담고 있어요.
⛔ Do's & Don'ts: 디자인 가이드라인과 절대 하면 안 되는 안티패턴도 포함돼 있어요.
🤖 에이전트 프롬프트 가이드: AI에게 바로 붙여넣을 수 있는 색상 레퍼런스와 프롬프트 예시까지 들어있어요.
게다가 각 브랜드 파일에는 DESIGN.md 외에도 색상 스와치, 타입 스케일, 버튼, 카드를 시각적으로 보여주는 preview.html과 다크모드 버전인 preview-dark.html까지 함께 제공돼요.
DESIGN.md가 유용하다는 건 알겠는데, 직접 만들기엔 품이 많이 들어요. 실제 사이트의 색상을 분석하고, 타이포그래피 규칙을 정리하고, 컴포넌트 패턴을 뽑아내려면 꽤 시간이 걸리거든요.
getdesign.md는 그 작업을 이미 대신 해놓은 사이트예요. Vercel, Stripe, Figma, Notion, Supabase, Linear, Airbnb, Spotify, Apple, Framer, Raycast, Cursor, ElevenLabs, Sentry, Superhuman 등 지금까지 70개가 넘는 브랜드의 DESIGN.md가 무료로 올라와 있어요.
특히 개발자 도구 쪽이 잘 갖춰져 있는데요. Vercel(흑백 정밀함, Geist 폰트), Stripe(시그니처 퍼플 그라디언트), Supabase(다크 에메랄드 테마), Linear(울트라 미니멀, 퍼플 액센트)처럼 개발자 타겟 서비스들의 명세서가 풍부하게 있어서 사이드프로젝터한테 바로 써먹기 좋아요.
✅ 이렇게 해보세요:
본인 서비스의 타겟 유저와 분위기를 먼저 생각해보세요. B2B 개발자 도구라면 Linear나 Supabase, 소비자 대상 서비스라면 Airbnb나 Notion 스타일이 맞을 수 있어요. 1:1 카피가 아닌 레퍼런스로 활용하는 거예요.
방법은 정말 단순해요.
getdesign.md에서 원하는 브랜드를 골라 DESIGN.md 파일을 받아요.
프로젝트 루트에 DESIGN.md 파일로 저장해요.
Claude Code, Cursor, Lovable 같은 AI 코딩 에이전트에게 "DESIGN.md를 참고해서 만들어줘"라고 요청해요.
이게 전부예요. AI가 파일을 읽고 해당 브랜드 감성으로 컴포넌트를 구성해줘요. 구글 Stitch를 쓴다면 네이티브로 지원되기 때문에 별도 지시 없이도 자동으로 반영돼요.
✅ 이렇게 해보세요:
지금 만들고 있는 서비스의 랜딩페이지 또는 대시보드 컴포넌트 하나를 골라서, 마음에 드는 브랜드 DESIGN.md를 적용해 다시 생성해보세요. 전후 결과물을 비교해보면 체감이 바로 올 거예요.
AI 코딩 도구 덕분에 기능 구현의 허들은 계속 낮아지고 있는데요. 그다음 허들이 바로 "그럴듯해 보이는 UI"예요.
DESIGN.md는 디자인 역량이 없어도 AI에게 구체적인 맥락을 줄 수 있는 가장 현실적인 방법이에요. 처음엔 검증된 브랜드의 시스템을 빌려 시작하더라도, 서비스가 커지면서 본인만의 색을 덧입혀 가는 거죠.
빠르게 뭔가를 만들어내야 하는 사이더라면, 이 파일 하나가 결과물의 첫인상을 꽤 바꿔줄 거예요.
👇 getdesign.md
https://getdesign.md