AI UI가 늘 비슷하다면: DESIGN.md 리소스와 활용법
1. AI에게 디자인의 기준을 전달하기
Claude Code나 Cursor가 만든 화면이 늘 비슷하다면, 디자인 판단의 기준을 파일로 정리해 전달할 수 있습니다.
- DESIGN.md는 색상, 서체, 간격, 컴포넌트와 디자인 의도를 마크다운으로 기록한 파일입니다.
- 프로젝트의 코드와 함께 관리하고, 에이전트가 작업할 때 참고하도록 연결합니다.
- 관련 리소스는 크게 두 가지로 나뉩니다.
- 브랜드 기반 파일: 기존 서비스의 시각적 구조를 참고해 디자인 방향을 잡습니다.
- 원칙 파일: 폼, 키보드 탐색, 포커스, 접근성처럼 실제 사용에 필요한 규칙을 정리합니다.
2. 원하는 결과에 맞는 리소스 고르기
DESIGN.md 생태계에는 스타일 모음부터 명세, 체크리스트, 리뷰 스킬까지 서로 다른 역할의 자료가 있습니다.
- 시각적 방향을 정할 때
- VoltAgent/awesome-design-md: 여러 브랜드의 디자인 파일과 미리보기를 비교할 수 있는 참고 모음입니다.
- Anthropic의 frontend-design: 상투적인 AI 디자인에서 벗어나 미적 방향, 서체 조합, 레이아웃에 의도를 담도록 돕습니다.
- bergside/awesome-design-skills: 브루탈리즘, 에디토리얼 등 스타일별 지침에 컴포넌트 상태와 접근성 기준을 함께 담습니다.
- 팀의 기준을 문서와 코드에 연결할 때
- google-labs-code/design.md: 구조화된 디자인 토큰과 설명을 결합하고, 검사와 내보내기 기능을 제공하는 형식입니다.
- kwakseongjae/oh-my-design: 검증된 정보와 참고 자료의 품질 수준을 구분하며 프로젝트의 디자인 기준을 정리하는 워크플로입니다.
- 인터페이스의 완성도를 점검할 때
- Vercel Web Interface Guidelines: 폼, 키보드 동작, 포커스, 애니메이션, 성능 등 구현 과정에서 놓치기 쉬운 규칙을 다룹니다.
- raunofreiberg/interfaces: 입력창, 버튼, 타이포그래피 등 작은 인터페이스 디테일을 돌아보는 체크리스트입니다.
- gnurio/refactoring-ui-plugin: 『Refactoring UI』의 방법론을 바탕으로 구현 후 시각적 위계, 간격, 색상 등을 검토하는 독립 플러그인입니다.
- 모바일 화면을 만들 때
- Meliwat/awesome-ios-design-md: 모바일 컴포넌트의 상태뿐 아니라 모션과 햅틱까지 참고할 수 있는 디자인 시스템 모음입니다.
3. 스타일 파일과 원칙 파일을 조합하기
시각적 방향을 정하는 파일에 동작과 접근성 기준을 더하면, 생성 결과를 평가할 기준도 명확해집니다.
- 빠르게 시각적 방향을 잡고 싶다면
- VoltAgent의 참고 파일에 Vercel의 인터페이스 규칙을 조합합니다.
- 결과물이 지나치게 획일적이라면
- frontend-design으로 미적 방향을 구체화하고, 필요한 스타일 지침을 더합니다.
- 팀의 디자인 시스템을 지속적으로 관리하려면
- Google Labs 형식의 토큰·내보내기 기능과 oh-my-design의 관리 흐름을 살펴볼 만합니다.
4. 많은 지침보다 명확한 우선순위 남기기
파일을 추가하는 것만큼 프로젝트에 맞게 줄이고 정리하는 과정이 중요합니다.
- 현재 사용하는 색상·서체·컴포넌트 규칙부터 적용합니다.
- 시각적 스타일과 접근성 기준이 충돌할 때는 우선순위와 예외를 기록합니다.
- 브랜드 참고 자료에서 가져올 구조와 우리 제품에 맞게 바꿀 표현을 구분합니다.
- 작은 화면 하나에 먼저 적용하고, 생성 결과와 실제 동작을 함께 검토합니다.
