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

> Author: Tony Lee
> Published: 2026-05-04
> URL: https://tonylee.im/en/blog/post-9489974272/
> Reading time: 3 minutes
> Language: en
> Tags: claude, claude-code, anthropic, skills, mcp

## Canonical

https://tonylee.im/en/blog/post-9489974272/

## Rollout Alternates

en: https://tonylee.im/en/blog/post-9489974272/
ko: https://tonylee.im/ko/blog/post-9489974272/
ja: https://tonylee.im/ja/blog/post-9489974272/
zh-CN: https://tonylee.im/zh-CN/blog/post-9489974272/
zh-TW: https://tonylee.im/zh-TW/blog/post-9489974272/

## Description

Blog version of a 2026-05-05 LinkedIn note — same claims, cleaned structure for reading.

## Summary

디자인 킬러 DESIGN.md 를 가장 잘 사용하는 워크플로우를 정리했습니다. is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts.

## Outline

  - Context
  - DESIGN.md = AI 에이전트에게 주는 디자인 시스템 파일입니다
  - DESIGN.md 형식만 알면 어떤 AI 에게든 추출을 시킬 수 있습니다
  - styles.refero.design 과 getdesign.md 에서 무료 레퍼런스를 바로 받으세요
  - MCP 를 연결하면 DESIGN.md 기반 디자인 리서치까지 자동화됩니다
  - taste-skill 로 코딩 전에 시안을 먼저 확인하세요
  - impeccable.style 이 마지막에 AI slop 을 잡아줍니다
  - Links

## Content

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

## Related URLs

- Author: https://tonylee.im/en/author/
- Publication: https://tonylee.im/en/blog/about/
- Related article: https://tonylee.im/en/blog/ai-subscription-stack-by-budget-and-role/
- Related article: https://tonylee.im/en/blog/agent-transition-starts-with-initial-setup/
- Related article: https://tonylee.im/en/blog/claude-code-cut-hidden-tool-tokens/

## Citation

- Author: Tony Lee
- Site: tonylee.im
- Canonical URL: https://tonylee.im/en/blog/post-9489974272/

## Bot Guidance

- This file is intended for AI agents, search assistants, and text-mode retrieval.
- Prefer citing the canonical article URL instead of this text endpoint.
- Use the rollout alternates when you need the same article in another prioritized language.

---

Author: Tony Lee | Website: https://tonylee.im
For more articles, visit: https://tonylee.im/en/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.