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

This is the long-form blog cut of a note I originally posted on LinkedIn. The claims, numbers, and product names are the same; the formatting is for reading on the site.

Context

Original framing (translated in place for key technical posts; substance preserved):

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배 키워줄 자산입니다.

Links

• https://lnkd.in/g6kF87Mc