디자인 킬러 DESIGN.md 를 가장 잘 사용하는 워크플로우를 정리했습니다.

AI 에이전트에게 UI 를 시키면 두 가지 문제가 생깁니다. 하나는 매번 보이는 AI 슬롭. 다른 하나는 부족한 디자인 연속성.

이 두 문제를 동시에 잡는 포맷이 DESIGN.md 입니다. DESIGN.md 하나로 세팅하는 디자인 워크플로우, 6단계로 정리했습니다.

❶ DESIGN.md = AI 에이전트에게 주는 디자인 시스템 파일입니다

원래 Google 이 Stitch 에서 쓰던 포맷인데 올해 4월 오픈소스로 공개됐습니다. YAML front matter 에 color, typography, spacing 같은 design token 을 넣고 마크다운 본문에 “왜 이 값을 쓰는지” 디자인 근거를 적어요. 에이전트는 이 파일을 읽고 UI 를 만들 때마다 같은 규칙을 적용합니다. 슬롭 문제는 token 으로 기본값을 덮어쓰면서 해결되고, 연속성 문제는 파일이 프로젝트에 계속 남아 있으니까 세션이 바뀌어도 유지됩니다. Codex, Claude Code 어디서든 플러그인 없이 바로 읽어요.

❷ DESIGN.md 형식만 알면 어떤 AI 에게든 추출을 시킬 수 있습니다

직접 작성할 필요가 없어요. 마음에 드는 사이트 URL 을 ChatGPT 든 Claude 든 어디에든 주고 “이 사이트의 디자인 시스템을 DESIGN.md 형식으로 추출해줘”라고 하면 됩니다. YAML token 과 마크다운 rationale 로 나뉘는 구조만 알고 있으면 어떤 AI 든 뽑아줘요. 포맷을 아는 게 도구를 아는 것보다 낫습니다.

❸ styles.refero.design 과 getdesign.md 에서 무료 레퍼런스를 바로 받으세요

참고 사이트 1: styles.refero.design 참고 사이트 2: getdesign.md

이미 추출된 DESIGN.md 가 수백 개 있습니다. 브랜드 톤을 고르고 프로젝트 루트에 넣으면 바로 적용돼요.

❹ MCP 를 연결하면 DESIGN.md 기반 디자인 리서치까지 자동화됩니다

무료 사이트: lazyweb.com 유료 사이트: mobbin.com/settings/mcp

DESIGN.md 가 “어떻게 만들지”를 정의한다면 MCP 는 “뭘 참고할지”를 잡아줍니다. 보통 에이전트가 코드를 바로 쓰면 레퍼런스 없이 기본값으로 찍어내요.

MCP 를 붙이면 실제 앱 화면을 먼저 검색하고 참고한 뒤에 코드를 씁니다. Lazyweb 은 25만 개 이상 실제 앱 스크린을 검색할 수 있고, Mobbin 은 flow 단위 레퍼런스와 정교한 필터를 제공해요. 저는 두 개 모두를 Codex 에 붙여 쓰고 있는데 DESIGN.md 와 레퍼런스 이미지를 같이 참고하니까 결과가 확 달라집니다.

❺ taste-skill 로 코딩 전에 시안을 먼저 확인하세요

github repo: https://lnkd.in/g6kF87Mc

DESIGN.md 로 규칙을 잡았으면 코드를 쓰기 전에 시안을 먼저 뽑아보는 게 빠릅니다.

imagegen-frontend-web 스킬을 Codex 에 붙이면 웹사이트 섹션별 디자인 시안을 생성해요. 시안을 눈으로 확인하��� 방향이 맞으면 image-to-code 스킬이 그걸 분석해서 코드로 구현합니다. 디자이너한테 시안 컨펌 받는 것처럼 에이전트한테도 시각적 방향을 먼저 잡아주는 겁니다.

❻ impeccable.style 이 마지막에 AI slop 을 잡아줍니다

skill site: impeccable.style

Impeccable 은 보라색 그라데이션, 카드 중첩, Inter 남용 같은 24가지 AI 슬롭 패턴을 자동 탐지하는 스킬입니다. /audit 로 코드를 검사하고 /critique 로 Nielsen 휴리스틱 기반 UX 평가까지 돌릴 수 있습니다. DESIGN.md 가 “이렇게 만들어”라면 Impeccable 은 “이건 하지 마”예요. 검수 단계에서 같이 쓰면 에이전트의 판단이 훨씬 좁혀집니다.

정리하면 이렇습니다. DESIGN.md 로 정의 → 레퍼런스로 확보 → MCP 로 리서치 → 이미지 시안으로 확인 → 스킬로 검수.

AI 를 사용해 웹사이트를 만드는 것은 평균적인 일입니다. 조금 더 taste 를 추가하는 것은 여러분의 능력입니다. DESIGN.md 는 능력을 100배 키워줄 자산입니다.