브랜드 사이트 2,000개 디자인 파일, AI한테 붙여 쓰는 법

1. DESIGN.md 가 뭐예요

한 줄로: AI한테 주는 디자인 설명서 파일이에요. 색이랑 글씨체, 여백, 버튼 모양을 사람이 읽는 글(마크다운)로 적어 둔 파일이에요.

왜 필요해요: AI한테 "예쁘게 만들어 줘"라고만 하면 흔한 템플릿의 평균 같은 화면이 나와요. 인테리어 업체에 "예쁘게요"라고 하는 것보다 "이 카페 사진처럼, 벽은 이 색, 의자는 이 높이"라고 주는 게 결과가 정확한 것과 같아요. DESIGN.md 는 그 '사진 + 치수표'예요.

파일 안에 실제로 있는 것 (ElevenLabs 스타일 페이지 예, 2026-11-02 확인):

• 색: Eggshell #fdfcfc(바탕), Warm Taupe #f5f3f1(구역 배경), Ink #000000(글자·버튼) 같은 이름 + 색 코드 + 어디에 쓰는지
• 글씨체: 큰 제목은 Waldenburg 300, 나머지는 Inter 400/500
• 여백·모양: 카드 모서리 20~24px, 버튼은 완전히 둥근 알약 모양(9999px)
• 해야 할 것·하지 말 것: 예) "포인트 색은 버튼에 쓰지 말 것"

2. 따라 하기 — 파일 복사해서 AI한테 주기

1. https://styles.refero.design/ 을 열어요. 로그인은 필요 없어요.
2. 아래 카드 목록(Trending·Popular·Newest)에서 마음에 드는 사이트를 눌러요. 위 검색창(Search DESIGN.md examples)에 분위기를 영어로 쳐도 돼요. 예: warm cream editorial, dark minimal.

3. 스타일 페이지에서 Preview 옆의 DESIGN.md 탭을 눌러요.
4. 오른쪽 Copy 버튼을 누르면 파일 내용 전체가 복사돼요. 파일로 받고 싶으면 옆의 .md 버튼(다운로드)을 눌러요. Compact(짧게) / Extended(자세히) 중 고를 수 있어요.

5. 쓰는 도구에 맞게 붙여요.

클로드 코드(Claude Code) — 프로젝트 폴더에 파일로 두는 게 제일 편해요. .md 로 받은 파일을 프로젝트 폴더에 DESIGN.md 이름으로 넣고:

DESIGN.md 를 읽고 그 색·글씨체·여백·버튼 규칙대로 [만들 페이지]를 만들어 줘. 브랜드 로고·이름·문구는 넣지 말고 스타일만 따라 줘. 다 만들면 DESIGN.md 규칙과 다른 곳이 있는지 스스로 점검해 줘.

커서(Cursor) — 프로젝트 폴더에 DESIGN.md 를 넣고 채팅에서 파일을 붙여(@ 로 파일 선택) 같은 문장을 써요.

@DESIGN.md 를 기준으로 [만들 페이지]를 만들어 줘. 색·글씨체·여백·버튼은 이 파일 값만 쓰고, 로고·브랜드 문구는 쓰지 마.

v0·러버블 같은 채팅형 도구 — 채팅창에 Copy 한 내용을 그대로 붙이고 맨 위 '제일 빠른 방법' 문장을 써요.

이미 있는 사이트에 입힐 때:

DESIGN.md 를 읽고, 지금 프로젝트의 [페이지 이름] 디자인만 이 규칙으로 바꿔 줘. 기능·문구·구조는 그대로 두고 색·글씨체·여백·버튼 모양만 바꿔 줘. 바꾸기 전에 무엇을 바꿀지 목록부터 보여 줘.

3. 확인하는 법

• 만들어진 화면의 바탕색·버튼색을 브라우저 개발자 도구(F12)로 찍어 보고, DESIGN.md 의 색 코드와 같은지 봐요.
• 큰 제목 글꼴이 파일과 다르면, 그 글꼴이 내 프로젝트에 없어서일 수 있어요. AI한테 "파일의 글꼴을 쓸 수 없으면 비슷한 무료 글꼴로 바꾸고 무엇으로 바꿨는지 알려 줘"라고 하세요. (유료 글꼴은 따로 라이선스가 필요해요.)

4. 막히면 (흔한 실수)

• 파일만 붙이고 "예쁘게"라고만 함 → 파일을 '읽고 그대로 따르라'고 분명히 쓰고, 어떤 페이지에 적용할지 적어요.
• 스타일 여러 개를 한 번에 붙임 → 규칙이 서로 부딪혀요. 한 번에 하나만.
• 로고·상표·문구까지 베낌 → 아래 '조건' 참고. 색·여백·분위기만 가져와요.
• 결과가 파일과 다름 → "DESIGN.md 와 다른 곳을 목록으로 찾아서 고쳐 줘"라고 한 번 더 시켜요.

5. 조건 — 쓰기 전에 꼭

• 공식 브랜드 가이드가 아니에요. 사이트의 DESIGN.md 예시 페이지에 "these are not official brand guides"(공식 브랜드 가이드가 아님), "These are real style records"(실제 사이트를 보고 적은 스타일 기록)라고 직접 적혀 있어요. 그 회사가 만든 자료가 아니에요.
• 결을 참고하는 용도예요. 색·간격 같은 스타일은 참고하되, 로고·상표·고유 그림·문구를 그대로 쓰거나 남의 사이트처럼 보이게 복제하면 문제가 될 수 있어요.
• 베타예요. 사이트 맨 위에 'Beta'가 붙어 있어요. 아직 시험 운영 중이라 화면·버튼 이름·무료 여부가 바뀔 수 있어요. 이 자료는 2026-11-02 기준이에요.

6. 덤 — 비슷한 무료 모음

• awesome-design-md (깃허브, VoltAgent/awesome-design-md): 유명 사이트 DESIGN.md 모음 저장소. 파일을 저장소에서 바로 받아요. (12.AI티도구3개에서 다룸)
• 차이: Refero Styles 는 2,000개 이상 + 색·글씨체 화면 미리보기 + Copy 버튼이 있고, 깃허브 모음은 개수가 적은 대신 파일을 한 번에 받기 편해요.

체크리스트

• https://styles.refero.design/ 에서 스타일 하나 고르기
• DESIGN.md 탭 → Copy (또는 .md 다운로드)
• 프로젝트 폴더에 DESIGN.md 로 두거나 채팅창에 붙이기
• '읽고 그대로 따르라' + 만들 페이지 + '로고·문구는 빼고' 문장 쓰기
• 바탕색·버튼색이 파일 색 코드와 같은지 확인
• 로고·상표·문구를 베끼지 않았는지 확인

출처 (2026-11-02 확인, 로그인 없이)

• Refero Styles 홈: https://styles.refero.design/ — "Browse 2,000+ AI-readable design systems from leading product websites. Open any style for colors, typography, spacing, components, and a DESIGN.md you can use in Cursor, Claude Code, Codex, v0, or Lovable.", 'Beta', 'New styles added every week'
• ElevenLabs 스타일 페이지: https://styles.refero.design/style/031056ff-7af1-46db-8daa-115f731c5d26 — 'DESIGN.md' 탭, 'Copy'·'.md' 버튼, 색·글씨체·Guidelines
• DESIGN.md 예시 페이지: https://styles.refero.design/ai-agents/design-md-examples — "these are not official brand guides"