클로드가 만든 화면이 촌스럽다면
DESIGN.md 하나로 해결
AI한테 "예쁘게 해줘"라고 하면 늘 비슷한 화면이 나와요. DESIGN.md는 색·글꼴·간격·버튼 규칙을 글로 정리한 파일이에요. getdesign.md에는 실제 사이트 스타일을 분석한 DESIGN.md가 550개 넘게 있고, Claude Code·Codex·Cursor가 이 파일을 읽고 그대로 따라 해요.
완성하면 이렇게 돼요
문구·할 일 3개·링크는 그대로 두고, 제목 크기·색·간격·카드만 바꿨어요. 직접 만든 가상 페이지 예시이고, 결과 품질을 보장하지는 않아요.
준비물
- Claude Code 또는 Codex (Cursor도 돼요). AI 이용료는 각 서비스 요금제를 따라요.
- 다시 디자인할 내 페이지가 있는 프로젝트 폴더
getdesign.md에 들어가 Website catalog에서 마음에 드는 분위기를 골라요. 노션처럼 깔끔하게, 리니어처럼 어둡고 정밀하게 등 사이트마다 한 줄 설명이 붙어 있어요.
무료로 받으려면 공개 GitHub 저장소(VoltAgent/awesome-design-md)에서 같은 이름의 DESIGN.md를 열고 내용을 복사해, 프로젝트 맨 위 폴더에 DESIGN.md로 저장해요. 기존 DESIGN.md가 있으면 먼저 백업하세요.
Node.js가 있다면 공식 명령으로도 받을 수 있어요 (notion 자리에 원하는 이름):
npx getdesign@latest add notion
사이트의 Download 버튼은 로그인을 요구할 수 있어요.
Claude Code나 Codex에 그대로 붙여 넣어요.
프로젝트 루트의 DESIGN.md를 따라 이 페이지를 다시 디자인해줘. 먼저 DESIGN.md를 읽고 적용할 색상·타이포·간격·컴포넌트 규칙을 짧게 정리해줘. 문구, 링크, 기능은 유지하고 시각 디자인만 개선해줘. 타사 브랜드·로고·고유 일러스트는 복제하지 말고 우리 서비스 이름을 유지해줘. 폰트는 사용권이 확인된 시스템 한글 폰트로 대체해줘. 모바일 한 열 배치와 버튼 대비, 가로 스크롤 유무를 확인해줘. 끝나면 변경 파일과 적용한 규칙, 실제 확인한 항목과 미확인 항목을 알려줘.
같은 화면 크기에서 전후를 열고 아래 확인표로 체크해요. 마음에 안 들면 다른 DESIGN.md로 바꿔서 한 번 더 해보세요.
전후 확인표
| 확인 | OK |
|---|---|
| 문구·링크·기능이 그대로인가 | ☐ |
| 제목 → 설명 → 버튼 순으로 눈이 가는가 | ☐ |
| 색과 간격이 DESIGN.md 규칙을 따르는가 | ☐ |
| 휴대폰 화면에서 글자·버튼이 겹치거나 넘치지 않는가 | ☐ |
| 버튼이 실제 목적지로 이동하는가 | ☐ |
| 다른 회사 로고·이름·일러스트를 넣지 않았는가 | ☐ |
잘 안 될 때
출처: getdesign.md · Website catalog · VoltAgent/awesome-design-md (2026.11.01 확인). 전후 예시는 직접 만든 가상 페이지예요.