테슬라·애플·페라리 같은 사이트의 «디자인 규칙»을 파일 하나로 받아서, 코딩 에이전트에 그대로 넣는 방법입니다. 무료입니다.

0. 먼저 알아두실 것

• 이 글에서 쓰는 라이브러리는 Refero 의 Styles(베타) 입니다 → styles.refero.design
• 사이트가 스스로 «2,000+ AI-readable design systems» 라고 적어 둔 규모입니다. 제가 센 숫자가 아니라 사이트 표기를 그대로 옮긴 것입니다.
• 스타일 페이지를 열고 파일을 복사하는 데 로그인도 결제도 필요 없습니다 (2026년 9월 6일 확인).
• 유료 상품은 따로 있습니다 — 에이전트가 사이트 전체를 검색하게 해 주는 Refero MCP 입니다. 아래 방법은 그것 없이도 됩니다.

1. 왜 이렇게까지 하나

AI에게 «예쁘게 만들어줘» 라고 하면 결과가 매번 다릅니다. 사람이 말로 설명하는 «예쁨»에는 숫자가 없기 때문입니다.

디자인이 실제로 작동하는 방식은 이렇습니다.

          말                    ↔                 값
  "파란색 버튼"                          #3e6ae1
  "제목은 크게"                          48px / line-height 1.17
  "여백은 넉넉히"                        4px 배수 (4 · 8 · 16 · 24)
  "모서리 살짝"                          radius 4px

오른쪽이 있어야 결과가 매번 같습니다. DESIGN.md 는 오른쪽을 적어 둔 파일입니다.

2. 전체 구조 한 장

  ① 스타일 고르기            ② 파일 복사              ③ 프로젝트에 두기        ④ 시키기
 styles.refero.design  →   [Copy] 또는 [.md]  →   내 프로젝트/DESIGN.md  →  "DESIGN.md 규칙대로
  (브랜드 · 분위기로 검색)      (마크다운 통째로)         (루트에 그냥 둔다)          랜딩 페이지 만들어줘"

3. 준비물

4. 스타일 고르기 — 브랜드로도, 분위기로도

styles.refero.design 에 들어가면 검색창과 칩이 있습니다.

• 브랜드 이름으로 — tesla, apple, ferrari, linear, notion, stripe …
• 분위기로 — Minimal Design · Clean SaaS · Editorial Type · Soft Gradients · Monochrome UI · Playful Design · High Contrast · Premium Design

카드에는 그 사이트의 실제 화면 미리보기가 붙어 있습니다. 눈으로 보고 고르면 됩니다.