AI를 위한 디자인 시스템의 중요성은 백번 강조해도 전혀 모자르지 않습니다.
스킬샵 멤버 자유 게시판
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 파일로 정리한 것이라는 설명과 기본 섹션 구조를 볼 수 있는 페이지입니다.
꽤 오래갑니다
좋은 자료 감사드립니다
정리를 잘 해놓으셨네요. 감사합니다~^^