애플·스포티파이 디자인을
파일 1개로 이식하는 법

🤔 혹시 지금 이런 상태 아닌가요

"AI한테 '깔끔하고 모던하게'라고 했는데 매번 다른 깔끔함이 나온다."

말로 하는 디자인 주문의 한계입니다. "깔끔하게"라는 단어에서 나와 AI가 떠올리는 그림이 다르고 심지어 AI도 매번 다른 그림을 떠올립니다. 디자이너들이 회사에서 이 문제를 어떻게 푸느냐면 말 대신 디자인 시스템 문서를 만듭니다. 색은 이것만, 글꼴은 이것만, 여백은 이 규칙으로 — 라고 적어두는 것이죠.

DESIGN.md는 그 문서를 AI가 읽기 좋은 텍스트 파일 한 장 으로 만든 것입니다(구글의 디자인 도구 Stitch가 제안한 개념). awesome-design-md 저장소는 애플·스포티파이·스트라이프 같은 유명 브랜드 73곳 이상의 홈페이지를 분석해 만든 DESIGN.md 파일을 모아뒀습니다. 내 프로젝트 폴더에 한 장 넣고 "이 파일 참고해서 만들어줘"라고 하면 그 브랜드의 문법으로 결과물이 나옵니다. 매번 같은 문법으로요.

73개 중에 뭘 고를지가 첫 관문인데 기준은 간단합니다. 내 고객이 느껴야 할 감정을 이미 잘 팔고 있는 브랜드를 고르는 것입니다. 좋아하는 브랜드가 아니라요.

클로드 코드를 쓴다면 세 단계를 통째로 맡기세요. 아래를 붙여넣고 브랜드 이름과 만들 것만 바꾸면 됩니다.

https://github.com/VoltAgent/awesome-design-md 저장소에서 Linear의 DESIGN.md를 가져와 지금 폴더에 저장해줘. 그리고 그 디자인 규칙대로 내 포트폴리오 소개 페이지를 index.html 파일 하나로 만들어줘.

🏷️ 심화 — 우리 브랜드의 DESIGN.md 만들기

이 방식에 익숙해지면 최종 형태는 남의 브랜드를 빌리는 게 아니라 내 브랜드의 규칙 파일을 하나 만들어 두는 것입니다. 로고 색·주로 쓰는 글꼴·말투가 이미 있다면 클로드에게 이렇게 시키세요.

내 브랜드의 DESIGN.md를 만들어줘. 저장소 파일 하나를 형식 견본으로 참고하고 내용은 이걸로 채워줘.
- 메인 색: [예: 진한 초록]
- 느낌: [예: 차분하고 믿음직한]
- 글꼴 분위기: [예: 고딕 계열의 단정한]
완성되면 지금 폴더에 DESIGN.md로 저장해줘.

한 번 만들어 두면 그다음부터 뭘 만들든 "내 DESIGN.md대로"라는 한 마디로 톤이 유지됩니다. 소개 페이지·행사 안내·제안서가 전부 한 브랜드로 보이기 시작하는 게 이 파일 한 장의 효과입니다.

💼 이런 장면에서 씁니다

❓ 자주 묻는 질문