VoltAgent/awesome-design-md

어떤 프로젝트인가요?

핵심 기능

• 01수십 개 브랜드 웹사이트에서 바로 사용할 수 있는 DESIGN.md 파일을 제공합니다.
• 02각 파일은 색상, 타이포그래피, 컴포넌트, 레이아웃, 입체감, 반응형 규칙을 다룹니다.
• 03색상 견본, 글꼴 크기 단계, 버튼, 카드가 포함된 미리보기 HTML 페이지를 제공합니다.
• 04사이트별로 라이트 모드와 다크 모드 미리보기 버전을 제공합니다.
• 05특별한 도구 없이 사용할 수 있는 일반 Markdown 형식인 Stitch DESIGN.md 형식을 따릅니다.

활용 사례

• 브랜드의 DESIGN.md를 프로젝트에 복사한 뒤, AI 에이전트에 해당 스타일로 페이지를 만들도록 요청합니다.
• 잘 알려진 사이트에서 디자인 토큰과 컴포넌트 규칙을 어떻게 구성하는지 살펴봅니다.
• 1990년대와 2000년대 초반 컬렉션을 활용해 레트로 스타일의 인터페이스를 생성합니다.
• 프로젝트 전반에서 AI가 생성한 UI의 시각적 일관성을 유지합니다.

빠른 시작

1. 1

   getdesign.md 컬렉션에서 DESIGN.md를 선택하세요

2. 2

   DESIGN.md 파일을 프로젝트 루트에 복사한 다음, AI 에이전트에게 이에 맞는 페이지를 만들어 달라고 요청하세요

포함된 컬렉션

토픽

자주 묻는 질문

awesome-design-md은(는) 무엇인가요?

브랜드 웹사이트에서 추출한 DESIGN.md 파일을 모아, AI 코딩 에이전트가 해당 디자인 시스템에 맞는 UI를 생성하도록 돕는 엄선된 컬렉션입니다. Awesome DESIGN.md는 일반 텍스트 형식의 DESIGN.md 파일 모음으로, 각 파일은 특정 웹사이트나 브랜드의 색상, 타이포그래피, 컴포넌트, 레이아웃, 깊이감, 반응형 동작을 비롯한 시각적 디자인 시스템을 설명합니다. 각 항목은 프로젝트 루트에 넣어 두면 AI 코딩 에이전트가 읽고 같은 시각적 언어로 UI를 만들 수 있는 Markdown 파일입니다.

awesome-design-md은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

awesome-design-md은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

awesome-design-md은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. awesome-design-md의 마지막 커밋은 2026년 10월 28일입니다.

awesome-design-md은(는) 어디에 사용할 수 있나요?

브랜드의 DESIGN.md를 프로젝트에 복사한 뒤, AI 에이전트에 해당 스타일로 페이지를 만들도록 요청합니다. 잘 알려진 사이트에서 디자인 토큰과 컴포넌트 규칙을 어떻게 구성하는지 살펴봅니다. 1990년대와 2000년대 초반 컬렉션을 활용해 레트로 스타일의 인터페이스를 생성합니다. 프로젝트 전반에서 AI가 생성한 UI의 시각적 일관성을 유지합니다.

awesome-design-md는 어떻게 설치하나요?

getdesign.md 컬렉션에서 DESIGN.md를 선택하세요 DESIGN.md 파일을 프로젝트 루트에 복사한 다음, AI 에이전트에게 이에 맞는 페이지를 만들어 달라고 요청하세요

awesome-design-md은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/VoltAgent/awesome-design-md