명작 2천 개의 디자인 규칙이 마크다운 한 장씩으로 풀렸습니다

리니어, 노션, 일레븐랩스, 람보르기니. 세계에서 제일 잘 만든 제품 2천여 개의 디자인 언어를 누군가 전부 파일로 바꿨습니다. 파일 이름이 곧 용도예요. DESIGN.md. 클로드 코드와 코덱스가 직접 읽는 마크다운 형식입니다.

영어 소개 트윗이 조회 28만, 일본어 소개가 26만. 북마크만 합쳐 9천 개를 넘겼습니다. 북마크는 나중에 쓰려고 저장하는 행동이라, 이 숫자가 조회수보다 정직한 수요 지표예요.

DESIGN.md 한 장에는 뭐가 들어 있나요?

설계 규칙의 전부입니다.

색상 팔레트와 디자인 토큰. 서체와 크기, 굵기의 위계. 여백 체계와 페이지 배치. 컴포넌트별 스타일링 규칙. 그리고 제일 값진 항목, 뭘 쓰고 뭘 피할지의 명시 규칙까지.

쓰는 법은 한 동작입니다. styles.refero.design에서 마음에 드는 제품 스타일을 골라 내려받고, 프로젝트 루트에 .md 한 장을 놓습니다. 그다음 에이전트에게 UI를 시키면, 그 규칙대로 짓습니다. 커서, 클로드 코드, 코덱스, v0을 지원하고 테일윈드 v4와 CSS 변수 형식까지 갖춰져 있어요.

왜 이게 AI 촌티의 해독제인가요?

일본어 소개 트윗의 표현이 정곡을 찔렀습니다. AI 특유의 촌스러운 UI를 박멸하는 사이트.

에이전트가 만든 화면은 어딘가 서로 닮아 있습니다. 같은 그라데이션, 같은 보라색 계열, 같은 카드 배치. 모델이 훈련 데이터의 평균값을 뱉기 때문이에요. 프롬프트로 예쁘게, 모던하게를 아무리 외쳐도 평균의 중력을 벗어나기 어렵습니다.

DESIGN.md는 그 중력을 끊는 지름길입니다. 말로 취향을 설명하는 대신, 검증된 제품의 규칙 체계를 통째로 이식해요. 에이전트에게는 흉내 낼 평균 대신 따를 법전이 생기는 겁니다.

디자인 자산은 어디까지 추상화되나요?

이 방식은 낯익은 흐름의 다음 단계입니다.

컴포넌트 코드를 모아 레고처럼 조립하는 방식이 먼저 돌았어요. beautifului, shadcn 계열 리소스를 에이전트에게 주고 통합시키는 방법. 그때의 자산 단위는 부품이었습니다.

DESIGN.md의 단위는 규칙이에요. 부품은 고르고 조립하는 감각이 여전히 필요하지만, 규칙은 에이전트가 알아서 전체에 적용합니다. 이미지에서 코드로, 코드에서 규칙으로. 디자인 자산이 한 칸씩 추상화되는 중입니다.

멩투가 디자인 팀 전체를 three.js 코드 사이트로 옮긴 것도 같은 줄기예요. 전부 코드라서 AI가 정밀하게 고친다는 것. 이제는 코드 위에 규칙 층이 하나 더 생긴 겁니다.

남는 생각

저는 이 라이브러리가 무료인 지금이 창이라고 봅니다.

사이트에 현재 무료라고 명시돼 있어요. 북마크 9천 개로 수요는 증명됐고, 이런 창은 오래 열려 있지 않습니다.

그리고 더 큰 과제가 하나 보여요. 남의 DESIGN.md를 쓰는 것에서 멈추지 않고, 내 제품의 DESIGN.md를 만들어두는 것.

에이전트에게 취향을 이식하는 파일 한 장. 그게 앞으로 팀 디자인 시스템의 최소 단위가 될 거예요. 글 쓰는 에이전트에게 문체 코퍼스를 주듯, 그리는 에이전트에게는 규칙 파일을 주는 시대입니다.

---

원문·소스

• 원 소개 트윗(@Voxyz_ai): https://x.com/Voxyz_ai/status/2093766772029559077
• 일본어 확산 트윗: https://x.com/codex_lab_/status/2094091484320657619
• 라이브러리: https://styles.refero.design/