VoltAgent/awesome-design-md

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

잘 알려진 웹사이트의 디자인 토큰, 패턴, 규칙을 정리한 markdown 문서인 DESIGN.md 파일 모음입니다. 프로젝트에 넣어 두면 AI coding agent가 그 디자인 언어를 따르는 UI를 만들 수 있습니다.

ATF에 주는 도움

UI를 작성하는 coding agent에게 일관된 스타일 기준을 건네는 방법으로 비교해 볼 만합니다. DESIGN.md를 AGENTS.md와 함께 두는 방식은 Harness가 executor에 프로젝트 규칙을 넘기는 방법에 참고할 수 있습니다.

라이선스

MIT 허용 범위가 넓습니다. 저작권 표시를 유지하면 상업적 이용과 수정이 가능합니다.

같은 분야 저장소

• alexpate/awesome-design-systems
  여러 회사와 기관의 디자인 시스템을 모은 목록입니다. 항목마다 코드로 된 컴포넌트, 보이스와 톤 가이드, 디자이너용 키트, 공개 소스 코드 제공 여부가 표시됩니다.
• chenglou/pretext
  여러 줄 텍스트의 크기를 재고 배치를 계산하는 JavaScript, TypeScript 라이브러리입니다. 자체 계산을 쓰기 때문에 layout reflow를 일으키는 DOM 측정을 피할 수 있습니다. 결과는 DOM, Canvas, SVG로 그릴 수 있습니다.
• google-labs-code/design.md
  DESIGN.md는 coding agent에 디자인 시스템을 설명하는 파일 형식입니다. YAML front matter의 design token과 Markdown으로 쓴 설계 이유를 함께 담습니다. lint 도구가 spec 준수, token 참조, WCAG 대비를 점검합니다.
• bwya77/vscode-dark-islands
  VS Code와 VSCodium 같은 호환 에디터용 다크 컬러 테마입니다. 떠 있는 유리 느낌의 패널, 둥근 모서리, 알약 모양의 activity bar와 스크롤바, 따뜻한 색감의 syntax highlighting을 제공합니다.
• alchaincyf/huashu-design
  Huashu Design은 Claude Code 등 여러 agent에서 쓰는 HTML 기반 디자인 skill로, 글로 적은 요청을 클릭 가능한 프로토타입, 슬라이드, 애니메이션, 인포그래픽으로 만듭니다. 디자인 철학 가이드, 5가지 관점의 디자인 리뷰, MP4 내보내기를 포함합니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.