나민수 AI의 쇼츠 **「클로드로 만든 사이트 디자인 살리는 무료 도구 5개」**에서는 Claude로 만든 웹사이트가 비슷한 레이아웃과 스타일로 반복되는 문제를 줄이기 위해 사용할 수 있는 디자인 도구 5가지를 소개합니다. ## 1. awesome-design-md Apple, Stripe, Notion 같은 서비스의 디자인 규칙을 참고할 수 있도록 정리된 디자인 자료입니다. 프로젝트에 원하는 스타일의 파일을 넣고 Claude에게 해당 디자인 규칙을 따라 작업하도록 지시하는 방식으로 활용합니다. 핵심은 단순히 “예쁘게 만들어줘”라고 요청하는 것이 아니라, **명확한 디자인 레퍼런스와 규칙을 프로젝트 컨텍스트로 제공하는 것**입니다. ## 2. taste Claude가 자주 생성하는 무난하고 비슷한 레이아웃을 피하도록 도와주는 디자인 규칙입니다. AI가 기본적으로 선택하는 안전한 레이아웃 대신, 조금 더 명확한 디자인 방향과 개성을 유지하도록 가이드하는 역할을 합니다. ## 3. impeccable AI가 만든 화면에서 자주 보이는 전형적인 스타일을 다듬는 데 사용하는 도구로 소개됩니다. 영상에서는 다음과 같은 요소를 개선하는 용도로 설명합니다. - 흔한 AI 스타일의 그라데이션 - 반복적으로 사용되는 폰트 - 밋밋한 레이아웃 - 디테일이 부족한 UI 특히 로컬에서 실행 중인 사이트를 브라우저로 확인하면서 디자인을 직접 수정하는 흐름이 장점입니다. ## 4. UI UX Pro Max 웹과 앱 UI에서 자주 사용하는 디자인 패턴을 참고할 수 있는 도구입니다. 화면을 만들 때 다음과 같은 질문에 활용할 수 있습니다. - 이 기능은 화면 어디에 배치해야 하는가? - 어떤 컴포넌트가 적절한가? - 모바일과 웹에서 어떤 패턴을 써야 하는가? - 사용자가 자연스럽게 행동하도록 어떻게 구성할 것인가? 즉, 화면을 단순히 꾸미는 것보다 **UI 구조와 UX 패턴을 설계하는 데 도움을 주는 도구**입니다. ## 5. img2threejs 이미지 한 장을 기반으로 Claude가 Three.js 코드를 생성해 3D 형태로 재구성하도록 돕는 도구입니다. 영상에서는 자전거 사진을 입력해 사용자가 마우스로 회전하며 볼 수 있는 3D 결과물로 만드는 사례를 소개합니다. 제품 소개 페이지, 인터랙티브 랜딩 페이지, 포트폴리오 등에 활용할 수 있습니다. ## 핵심은 AI에게 디자인 기준을 주는 것 이 5개 도구의 공통점은 Claude가 알아서 디자인하도록 맡기는 것이 아니라, **사용자가 디자인 기준과 규칙을 먼저 정해주는 것**입니다. 정리하면 다음과 같습니다. - **awesome-design-md** → 디자인 레퍼런스와 스타일 규칙 - **taste** → 획일적인 레이아웃 방지 - **impeccable** → AI 특유의 UI 스타일 개선 - **UI UX Pro Max** → UI·UX 패턴 설계 - **img2threejs** → 이미지 기반 인터랙티브 3D 구현 AI 디자인 작업에서도 중요한 것은 모델에게 모든 결정을 맡기는 것이 아니라, **디자인 방향을 사람이 정하고 AI는 그 기준에 맞춰 실행하도록 만드는 것**입니다.