DESIGN.md
AI를 위한 디자인 시스템의 중요성은 백번 강조해도 전혀 모자르지 않습니다.
아래는 제가 실제로 사용하고 있는 관련 사이트들 입니다. 바이브코딩하실 때, ppt 만드실 때 다양하게 참고해보세요.
-
https://getdesign.md/
DESIGN.md 모음 사이트로는 가장 보기 편한 곳입니다. 브랜드·서비스별 DESIGN.md를 웹에서 바로 탐색할 수 있고,npx getdesign@latest add ...형태로 프로젝트에 추가하는 흐름도 제공하는 사이트입니다. -
https://github.com/VoltAgent/awesome-design-md
DESIGN.md 컬렉션의 원본에 가까운 GitHub 레포입니다. 인기 브랜드 디자인 시스템에서 영감을 받은 DESIGN.md 파일들을 모아둔 곳이며, 프로젝트 루트에 넣어서 AI 코딩 에이전트가 UI 톤을 맞추도록 하는 용도입니다. -
https://github.com/VoltAgent/awesome-design-md/issues
원하는 브랜드의 DESIGN.md 요청이나 추가 논의를 볼 수 있는 이슈 페이지입니다. 특정 서비스 DESIGN.md 요청도 올라와 있어서, 앞으로 어떤 파일이 추가될지 확인하기 좋은 곳입니다. -
https://github.com/kzhrknt/awesome-design-md-jp
일본어/CJK UI에 특화된 DESIGN.md 모음입니다. 일본어 조판, CJK 폰트, line-height, letter-spacing 같은 규칙을 보강한 쪽이라 한국어 UI 디자인에도 참고 가치가 높은 레포입니다. -
https://github.com/google-labs-code/design.md
모음 사이트는 아니고 공식 스펙 레포입니다. DESIGN.md 파일을 어떻게 써야 하는지, 어떤 구조가 표준인지 확인하는 기준점입니다. Google Stitch에서 시작된 형식이고, AI 코딩 에이전트에 시각적 아이덴티티를 전달하는 Markdown 포맷입니다. -
https://stitch.withgoogle.com/docs/design-md/overview/
Google Stitch의 DESIGN.md 공식 문서입니다. Stitch에서 DESIGN.md를 import/export하고 디자인 규칙을 재사용하는 맥락을 이해할 때 참고할 수 있는 문서입니다. -
https://github.com/bergside/awesome-design-skills
DESIGN.md만이 아니라 Claude Design, design skill, 에이전트용 디자인 지시 파일까지 같이 모은 레포입니다. 단순 디자인 토큰보다 “AI에게 디자인 작업을 어떻게 시킬 것인가”까지 볼 때 유용한 자료입니다. -
https://www.paralect.com/stack/getdesign-md
getdesign.md가 무엇인지 설명하는 소개 페이지입니다. getdesign.md를awesome-design-md의 브라우저형 프론트엔드로 설명하고, DESIGN.md가 colors, typography, components, spacing, elevation, responsive behavior 등을 담는다고 정리한 페이지입니다. -
https://getdesign.md/what-is-design-md
DESIGN.md 개념 설명 페이지입니다. DESIGN.md가 브랜드의 시각 언어를 AI 코딩 에이전트가 사용할 수 있는 Markdown 파일로 정리한 것이라는 설명과 기본 섹션 구조를 볼 수 있는 페이지입니다.
좋은 자료 감사드립니다