출처
- source_url: https://discuss.pytorch.kr/t/awesome-claude-design-design-md-ui/10667
- author: 9bow
- published: 2026-06-25
- raw: raw source:
web-2026-06-30-awesome-claude-design-design-md-ui-scaffolding
요약
awesome-claude-design은 Anthropic의 디자인 전용 워크스페이스 Claude Design에 바로 넣을 수 있는 DESIGN.md 파일을 모아둔 큐레이션 저장소다. AI 에이전트 프레임워크 개발사 VoltAgent가 관리하며, 디자인 시스템을 백지에서 시작하는 대신 원하는 분위기와 가까운 예시를 골라 DESIGN.md를 Claude Design에 넘기면 색상·타이포그래피·컴포넌트·미리보기 카드·동작하는 UI 키트가 한 번에 만들어진다.
DESIGN.md라는 개념 자체는 Google Stitch가 처음 제안했고 getdesign.md가 실제 모음집으로 구체화했다. 핵심은 브랜드의 시각 언어를 **토큰, 규칙, 그리고 그 근거(rationale)**까지 한 파일에 담아, Figma 익스포트(무엇을 쓸지만 알려줌)나 브랜드 가이드라인 PDF(사람 대상이라 에이전트가 따르기엔 느슨함)의 한계를 보완하는 데 있다. 마치 AGENTS.md가 코딩 에이전트에게 “어떻게 빌드할지”를 알려주듯, DESIGN.md는 디자인 에이전트에게 “어떻게 보이고 느껴져야 하는지”를 알려주는 대응 개념이다.
사용법은 세 단계다. 모음집에서 원하는 디자인 시스템 예시를 고르고, Claude Design에서 새 디자인 시스템으로 업로드하거나 프로토타입 채팅에 파일을 첨부해 시스템 생성을 요청하면, 몇 분 안에 README, CSS 변수·타입 스케일이 담긴 colors_and_type.css, 컴포넌트 미리보기, 동작하는 UI 키트(index.html), 재사용 가능한 SKILL.md까지 완성형 패키지가 만들어진다.
현재 컬렉션은 68개의 DESIGN.md를 AI/LLM 플랫폼, 개발자 도구, 백엔드·데브옵스, 생산성·SaaS, 디자인 도구, 핀테크, 이커머스, 미디어, 자동차 등 아홉 개 분야로 나눠 제공한다. 모든 DESIGN.md는 시각 테마, 색상 팔레트, 타이포그래피, 컴포넌트 스타일, 레이아웃 원칙, 깊이·입체감, Do’s and Don’ts, 반응형 동작, 에이전트 프롬프트 가이드라는 동일한 9개 섹션 구조를 따른다. 이 구조 덕분에 한 번 시스템을 스캐폴딩한 뒤에는 “가격 페이지를 만들어줘” 같은 후속 요청에도 같은 브랜드 위에서 일관되게 화면이 확장된다. 저장소는 MIT 라이선스이며, 수록된 파일들은 공개적으로 관찰 가능한 디자인 패턴에서 영감을 받은 출발점일 뿐 해당 기업의 공식 디자인 시스템이 아니라는 점을 명시한다.
관련 위키
원문 보존 위치
원문 전체는 raw source: web-2026-06-30-awesome-claude-design-design-md-ui-scaffolding에 source_url과 함께 저장되어 있다.