AI 코딩으로 화면을 만들 때는 먼저 DESIGN.md처럼 에이전트가 읽을 수 있는 디자인 기준을 잡고, 실제 앱 화면과 웹 레퍼런스는 용도별로 따로 봅니다. 예쁜 화면을 그대로 베끼기보다 색상, 폰트, 컴포넌트 밀도, 정보 구조, 흐름을 분해해서 우리 브랜드에 맞게 재조합합니다.

AI 코딩용 DESIGN.md 참고

• getdesign.md — 유명 브랜드/서비스의 DESIGN.md 분석을 웹에서 보기 좋게 탐색할 때.
• VoltAgent/awesome-design-md — getdesign 계열의 원본격 GitHub 컬렉션. 브랜드별 DESIGN.md 파일을 직접 가져와 비교하기 좋음.
• DesignMD.co — 브랜드별 색상, 폰트, 컴포넌트 패턴을 DESIGN.md 형태로 정리한 카탈로그.
• designmd.ai — 커뮤니티형 DESIGN.md 라이브러리. 태그 기반으로 탐색하고 다운로드하기 좋음.
• designkit.sh — DESIGN.md 키트를 레지스트리처럼 설치/적용하는 쪽에 가까움. 공개 GitHub repo의 DESIGN.md도 설치 대상으로 삼을 수 있음.

실제 앱 UI(User Interface, 사용자 인터페이스) / UX(User Experience, 사용자 경험) 패턴

• Mobbin — 실제 iOS/Web 앱 스크린, 플로우, UI 요소 검색이 강한 1순위 레퍼런스.
• Page Flows — 온보딩, 체크아웃, 예약, 계정관리처럼 사용자가 목표를 완료하는 흐름을 볼 때.
• SaaSUI — SaaS(Software as a Service, 서비스형 소프트웨어) 제품 화면 패턴 위주. 대시보드, 설정, 온보딩 참고에 좋음.
• SaaSFrame — SaaS 랜딩, 제품 인터페이스, 이메일 시퀀스까지 함께 봐야 할 때.

웹 / 랜딩 / 브랜드 무드 참고

• Godly — 요즘 감도의 웹 디자인 큐레이션. 모션과 비주얼 톤 참고용.
• Siteinspire — 오래된 고품질 웹 갤러리. 카테고리 필터가 좋아서 산업/스타일별 탐색에 적합.
• Landbook — 랜딩, 이커머스, 포트폴리오 필터링이 좋고 섹션 단위 참고에도 유용.
• Lapa Ninja — 랜딩페이지 레퍼런스가 많음. 초반 구조 잡을 때 빠르게 보기 좋음.
• Awwwards — 실험적이고 비주얼이 강한 웹 참고. 실제 제품 UI로 그대로 가져오면 과한 경우가 많으므로 톤, 모션, 히어로 연출만 골라보기.

비주얼 무드보드 / 그래픽 레퍼런스

• Pinterest — 브랜드 무드, 사진 톤, 공간감, 컬러 팔레트, 레이아웃 감각을 넓게 모을 때. 출처 확인은 별도로 필요.