본문으로 건너뛰기

getdesign.md

v1
작성 2026-05-03읽는 시간 5분

유명 브랜드 디자인을 마크다운 한 장으로 가져오기

getdesign.md — 브랜드 디자인을 DESIGN.md 한 장으로 받아 AI에게 시키는 흐름도

이건 뭐예요?​

스타벅스에 가시면 매장마다 분위기가 똑같죠. 똑같은 초록색, 똑같은 글꼴, 똑같은 메뉴판 간격. 그게 우연이 아니에요. 스타벅스 본사가 만들어 둔 두꺼운 매뉴얼 덕분이에요. "초록색은 정해진 팬톤(Pantone) 색만 써라", "메뉴판은 위아래 여백 32픽셀", "타이틀 글꼴은 지정된 한 종류만 써라" — 이런 게 빼곡히 적혀 있어요.

이 매뉴얼을 디자이너들은 디자인 시스템(브랜드 한 회사의 색·글꼴·여백·말투를 정해둔 규칙집) 이라고 불러요.

문제는 우리 같은 1인 사업자나 소규모 팀이에요. 매뉴얼 만들 시간도 없고, 디자이너도 없죠. 그런데 정작 만들어야 할 건 많아요. 회사 홈페이지, 랜딩 페이지, IR 덱, 어드민 화면, 모바일 앱 시안...

getdesign.md 는 이 고민을 정확하게 풀어줘요. 애플, 스트라이프, 노션, 리니어, 피그마, 버셀, 스포티파이, 에어비앤비, 테슬라, BMW, 페라리 같은 70개 넘는 유명 브랜드의 디자인 시스템을 마크다운 파일 한 장(DESIGN.md)으로 압축 해 둔 카탈로그예요.

그리고 진짜 마법은 여기예요. 이 파일을 프로젝트 폴더에 넣어두고, 클로드 코드(Claude Code)나 커서(Cursor) 같은 AI 코딩 에이전트한테 이렇게 한 마디만 하면 돼요.

"DESIGN.md 참고해서 우리 회사 랜딩 페이지 만들어줘."

그러면 AI가 그 브랜드의 색·글꼴·여백·말투를 그대로 반영해서 코드를 짜줘요. 디자이너 한 명을 어깨 위에 얹은 셈이에요.

우리는 이렇게 쓰고 있어요​

저는 클라이언트 미팅에서 시안을 빨리 갈아끼워야 할 때 이걸 정말 자주 써요.

예를 들어 SaaS(서비스형 소프트웨어 — 매달 구독료 받는 형태) 랜딩 페이지 시안을 만든다고 해볼게요. 클라이언트가 "어떤 톤이 좋을까요?" 하고 망설이실 때, 저는 그 자리에서 두 가지 톤을 보여드려요.

  1. 리니어(Linear) 톤 — 어두운 배경, 하얀 굵은 타이포, 절제된 여백. "테크 스타트업 같은 느낌이에요."
  2. 노션(Notion) 톤 — 따뜻한 베이지 배경, 둥근 카드, 손글씨 같은 일러스트. "친근한 생산성 도구 느낌이에요."

원래 같으면 두 시안을 만드는 데 며칠씩 걸렸어요. 디자이너가 색상 팔레트 잡고, 폰트 고르고, 컴포넌트 스타일 잡고... 지금은 npx getdesign@latest add linear 한 줄, npx getdesign@latest add notion 한 줄이면 끝이에요. 두 개의 DESIGN.md 파일을 만들어두고 클로드 코드에게 "이 톤으로 한 번, 저 톤으로 한 번 보여줘" 하면 30분 안에 두 시안이 나와요.

지금 보고 계신 AI//STUDY 사이트는 HOLOGRID 라는 자체 다크 테마로 만들었지만, 만약 빠른 시연이 필요하다면 똑같은 사이트를 "스트라이프 톤" 으로, "버셀 톤" 으로 갈아끼워볼 수도 있어요. 디자인을 레고 블록처럼 꽂았다 뺐다 하는 감각, 이게 바이브 코딩의 진짜 재미예요.

한번 써볼까요?​

설치도 따로 없어요. npx(노드 패키지를 다운로드 없이 바로 실행하는 명령) 한 줄이면 끝이에요. 노드(Node.js)만 깔려 있으면 됩니다.

# 1. 사용 가능한 브랜드 목록 보기 (70개+ 브랜드)
npx getdesign@latest list

# 2. 원하는 브랜드 디자인을 프로젝트에 추가 (예: 애플)
npx getdesign@latest add apple

# 3. 다른 위치에 저장하고 싶을 때
npx getdesign@latest add stripe --out docs/STRIPE-DESIGN.md

# 4. 기존 DESIGN.md 를 덮어쓰고 싶을 때
npx getdesign@latest add notion --force

명령어를 실행하면 프로젝트 루트에 DESIGN.md 라는 파일 하나가 만들어져요. 열어보면 색상 코드, 타이포그래피 규칙(애플은 SF Pro 글꼴), 여백 가이드, 보이스/톤(애플 카피의 그 절제된 말투), 컴포넌트 스타일링 원칙이 한 파일에 마크다운으로 깔끔하게 정리돼 있어요. "Premium white space, SF Pro, cinematic imagery" 같은 디자인 철학 한 줄 요약도 들어 있고요.

어떤 브랜드들이 있냐면요​

70개가 넘다 보니 다 적기는 어려운데, 카테고리별로 대표만 꼽아 보면 이래요.

카테고리대표 브랜드
AI/LLMClaude, Cursor, Cohere, Mistral, ElevenLabs
개발자 도구Cursor, Linear, Raycast, Warp, Cal.com
자동차Tesla, BMW, Ferrari
금융·암호화폐Stripe, Coinbase, Binance, Kraken, Wise, Revolut, Mastercard
그 외Apple, Notion, Figma, Spotify, Airbnb, Uber, Shopify, Vercel

전체 목록은 공식 사이트 또는 awesome-design-md 카탈로그 에서 보실 수 있어요. 카탈로그는 VoltAgent 팀이 운영하고, 명령어 도구(CLI — 터미널에서 명령어로 도구를 실행하는 방식)는 MohtashamMurshid 가 메인테이너예요.

클로드 코드 터미널에서는 이렇게​

자, 진짜 재미있는 부분이에요. 클로드 코드를 띄워두고 그 안에서 바로 실행해 볼게요.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 1. 리니어 디자인을 프로젝트에 추가 — 어두운 톤의 테크 스타트업 느낌
! npx getdesign@latest add linear

명령어가 끝나면 프로젝트 루트에 DESIGN.md 파일이 생겨요. 이제 클로드한테 자연어로 시키기만 하면 돼요. ! 없이 그냥 말로 하시면 됩니다.

getdesign 명령어 실행 결과 — DESIGN.md 설치 완료 메시지

DESIGN.md 를 참고해서 우리 회사 소개 랜딩 페이지를 한 페이지로 만들어줘.
섹션은 히어로, 핵심 가치 3개, CTA 순으로.
HTML/CSS 한 파일로 만들어줘.

그러면 클로드가 DESIGN.md 를 한 번 쭉 읽고, 리니어 톤의 어두운 배경 + 강한 타이포 + 절제된 여백이 적용된 코드를 한 번에 뽑아줘요. 색상 코드 하나하나, 폰트 굵기 하나하나가 다 리니어 가이드에 맞춰져 있어요.

활용 시나리오 3가지​

1. 내 브랜드 홈페이지 / 랜딩 페이지

DESIGN.md 참고해서 SaaS 랜딩 페이지 만들어줘.
가격 섹션, 기능 섹션, 고객 후기 섹션 포함해서.

→ 스트라이프(stripe), 리니어(linear), 애플(apple) 추천. 결제·테크·프리미엄 톤이 강해요.

2. PPT / IR 덱 슬라이드

DESIGN.md 참고해서 IR덱 16:9 슬라이드 5장 만들어줘.
표지, 문제, 해결책, 시장 규모, CTA 순.

→ 노션(notion), 피그마(figma) 추천. 슬라이드 만들 때는 슬라이드 만들기 스킬 과 같이 쓰면 더 강해져요.

3. 어드민 대시보드

DESIGN.md 참고해서 어드민 대시보드 만들어줘.
좌측 사이드바, 상단 헤더, 카드 4개 + 차트 2개 그리드로.

→ 리니어(linear), 버셀(vercel) 추천. 카드·차트·테이블 톤이 깔끔해요.

같은 명령을 노션으로 한 번, 리니어로 한 번 갈아끼우면서 보면 — 같은 코드가 완전히 다른 분위기로 변하는 게 보여요. 클라이언트한테 "이 톤은 어떠세요?" 하면서 시연하기 정말 좋아요.

이런 분께 추천해요​

이 도구는 "디자인은 약한데 결과물은 빨리 멋지게 보여줘야 하는 분" 께 정말 잘 맞아요. 구체적으로는 이런 분들이에요.

  • 디자이너가 따로 없는 1인 사업자/창업자 — 회사 홈페이지를 만들어야 하는데, 색·폰트·여백을 어떻게 잡아야 할지 막막한 분. 스트라이프나 리니어 톤을 그대로 빌려서 시작해보세요. 우리 회사 톤이 점점 잡혀갈 거예요.
  • PPT·IR 덱·제안서를 자주 만드는데 디자인 통일이 안 되는 분 — 매번 새로 만들 때마다 폰트와 색이 달라지죠. 한 브랜드 톤을 정해두고 DESIGN.md 를 참고시키면, 모든 슬라이드와 문서가 한 가족처럼 보여요.
  • 클라이언트한테 시안을 빨리 여러 톤으로 보여드려야 하는 프리랜서/대행사 — "고객님, 이 톤은 어떠세요? 그럼 이건요?" 가 가능해져요. 미팅 자리에서 30분 안에 시안 두 개를 갈아끼우는 게 진짜 강력한 무기가 됩니다.

비공개 커스텀 디자인 시스템이 필요하시면 공식 사이트 의 "Request private DESIGN.md" 옵션도 있어요. 카탈로그·CLI 자체는 무료입니다.

이것만 기억하세요

디자인을 잘 모르겠으면 잘 만든 사람들의 디자인을 빌리는 게 정답 이에요. npx getdesign@latest add <브랜드> 한 줄로 70개 회사의 디자인 가이드를 마크다운 한 장에 가져오고, 클로드한테 "이거 보고 만들어" 라고 시키세요. 디자이너 한 명을 어깨 위에 올린 효과가 나요.

참고 링크​

▸개정 이력1건
  • v12026-05-03초판

이 글이 도움이 되었나요?