클로드 사이트 디자인 바꾸는 무료 도구 5개, DESIGN.md부터 3D까지

클로드 사이트 디자인이 다 비슷해 보일 때 쓸 수 있는 도구 다섯 개와, 각각을 어디서 찾아 어떻게 붙이는지 정리했습니다. 나민수 AI 채널의 52초 쇼츠가 소개한 이름을 실제 영문 이름과 맞춰 보고, 영상이 댓글로 미룬 설치 방법과 첫 요청 문장도 채워 넣었습니다.

클로드로 만든 사이트, 다 비슷하게 생겼다

화자는 "Claude(클로드)로 만든 사이트 다 비슷하게 생겼죠?"라고 묻고, 이걸 고쳐 줄 도구 다섯 개를 "AI 직원", "디자이너 다섯 명"에 빗대 소개합니다.

비용에 대해 화자는 "월급은 영원입니다"라고 말합니다. 자막 표기이고 "0원"이라는 뜻으로 보이며, 영상 제목은 "무료 도구"라고 적고 있습니다. 실제로 무료인지, Claude 사용 요금이 따로 드는지는 영상에 나오지 않습니다. 다섯 도구 자체는 깃허브(GitHub, 코드 공개 저장소)에 공개된 것들이지만, 이를 실행하는 클로드는 요금제에 따라 사용량이 줄어든다는 점은 알아 두어야 합니다.

• 소개된 도구는 5개입니다. 자막 표기로는 어섬 디자인 MD, 테이스트, 임팩커블, UIU 프로맥스, 이미지 2 3 JS입니다.
• 사용법이 발화에 나오는 건 첫 번째 도구 하나뿐입니다. 파일 하나를 프로젝트에 넣고 "이거 따라해"라고 하면 끝이라고 말합니다.
• 나머지 4개는 기능 소개만 있고 설치나 사용 동작은 나오지 않습니다. 아래에 편집자가 찾은 이름과 설치 방법을 붙였습니다.
• 화자는 댓글에 "디자인"이라고 남기면 정리해 둔 설치 방법을 준다는 취지로 말합니다.

클로드 사이트 디자인 도구 5가지 (기능은 화자 주장)

기능 설명은 모두 화자의 말입니다. 영문 이름은 자막 소리와 기능 설명을 바탕으로 편집자가 맞춰 본 것이니, 설치 전 원 영상 화면이나 댓글에서 한 번 더 확인하는 편이 안전합니다.

① 어섬 디자인 MD (Awesome DESIGN.md)

화자는 애플, 스프라이트, 노션 같은 회사의 디자인 규칙을 정리해 놓은 것이라고 말합니다. 자막의 "스프라이트"는 스트라이프(Stripe)를 잘못 받아 적은 것으로 보입니다. 자막에는 "7개"라는 숫자가 나오는데, 회사 수인지 규칙 수인지는 발화만으로 알 수 없습니다.

깃허브의 VoltAgent/awesome-design-md 저장소가 이 설명과 맞습니다. 유명 서비스의 디자인 규칙(색, 글꼴, 간격, 버튼 모양)을 DESIGN.md라는 마크다운 파일 한 장씩으로 정리해 둔 모음입니다. 저장소 안내에 애플, 노션, 스트라이프, 스포티파이 등이 들어 있습니다.

② 테이스트 (taste-skill)

Claude가 자꾸 무난한 레이아웃만 뽑는 걸 막아 주는 규칙이라고 화자는 설명합니다. 스킬(클로드가 작업할 때 꺼내 읽는 지침 문서) 형태로 배포됩니다.

③ 임팩커블 (Impeccable)

디자인을 다듬어 주는 도구라고 합니다. 화자는 브라우저에서 바로 보면서 고칠 수 있다는 점을 짚습니다. 글꼴, 여백, 색처럼 화면 품질을 손보는 스킬입니다.

④ UIU 프로맥스 (UI UX Pro Max)

웹과 앱 화면을 만들 때 어디에 뭘 놔야 하는지 패턴을 다 알고 있다고 화자는 말합니다. 자막에는 "맵"으로 적혀 있어 문맥상 "웹"으로 읽었습니다. 저장소 안내로는 화면 스타일, 색 조합, 글꼴 짝 같은 디자인 자료를 검색해 쓰는 스킬입니다.

⑤ 이미지 2 3 JS (img2threejs)

화자가 "이게 제일 신기한데"라고 한 도구입니다. 자전거 사진 한 장을 주면, Claude가 그걸 돌려서 볼 수 있는 3D를 코드로 만든다고 말합니다. Three.js(웹 브라우저에서 3D를 그리는 자바스크립트 도구)로 사진 속 물체를 코드로 다시 빚는 스킬입니다.

어섬 디자인 MD 적용 2단계

영상에서 동작 순서가 나오는 부분은 여기뿐입니다. 발화 순서 그대로, 파일을 먼저 넣고 나서 요청합니다.

준비물

• Claude 계정. 화자가 "클로드로 만든 사이트"를 전제로 이야기합니다. 요금제는 나오지 않습니다.
• Claude로 만들고 있는 사이트 프로젝트 폴더. 클로드 코드(터미널에서 코드를 읽고 고치는 AI 코딩 도구)나 Claude 데스크톱 앱의 프로젝트를 씁니다.
• 어섬 디자인 MD 파일 1개. 영상은 어디서 받는지 말하지 않습니다. 아래 0단계에서 받습니다.

0단계. 원하는 회사의 DESIGN.md를 받는다

1. 깃허브에서 awesome-design-md를 검색해 VoltAgent의 저장소를 엽니다.
2. 목록에서 닮고 싶은 서비스(예: 노션) 폴더를 엽니다.
3. 그 안의 DESIGN.md 파일을 열고, 오른쪽 위 내려받기 버튼으로 받습니다.

• 확인: 내 컴퓨터에 DESIGN.md 파일 하나가 생겼다.

1단계. 파일 하나를 프로젝트에 넣는다

• 위치: 영상은 어느 폴더에 넣는지 말하지 않습니다. 저장소 안내는 프로젝트 맨 위 폴더(루트)에 두라고 합니다.
• 확인: 프로젝트 루트에 DESIGN.md가 들어가 있다.

2단계. Claude에게 따라 하라고 요청한다

화자가 말한 요청 문장은 이것입니다.

이거 따라해

조금 더 분명하게 하려면 아래처럼 씁니다.

프로젝트 루트의 DESIGN.md를 읽고, 지금 사이트의 색·글꼴·간격·버튼 모양을 그 규칙에 맞게 바꿔 줘. 내용과 기능은 바꾸지 말고, 바꾼 파일 목록을 알려 줘.

• 확인: 발화에 성공 판정 기준은 없습니다. 화자는 이렇게 하면 "끝"이라고 말합니다. 결과 디자인이 바뀌었는지는 브라우저에서 직접 확인해야 합니다.
• 되돌리기: 영상은 다루지 않습니다. 작업 전에 깃(git)으로 커밋해 두거나 폴더를 복사해 두면, 마음에 안 들 때 이전 상태로 돌아갈 수 있습니다.

나머지 네 도구 설치하는 법

영상에서는 설치 방법을 말하지 않습니다. 아래는 각 저장소 안내와 이 사이트의 기존 정리 기준입니다. 터미널(맥은 "터미널" 앱, 윈도우는 PowerShell)을 열고 실행합니다. npx 명령은 Node.js가 깔려 있어야 동작합니다.

테이스트 스킬은 저장소 주소를 붙여 설치합니다.

npx skills add https://github.com/Leonxlnx/taste-skill

임팩커블은 아래 명령으로 설치합니다.

npx skills add pbakaus/impeccable

UI UX Pro Max는 클로드 코드 안에서 플러그인으로 설치합니다. 채팅창에 두 줄을 차례로 입력합니다.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

img2threejs는 같은 이름의 저장소가 여럿 보여, 깃허브에서 img2threejs를 검색해 별(관심 표시) 수와 최근 수정일을 보고 고른 뒤 README의 설치 안내를 따르는 편이 안전합니다.

• 확인: 설치 뒤 클로드 코드를 다시 켜고, 채팅창에 /를 입력했을 때 스킬 이름이 목록에 보이면 됩니다.

화자가 실제로 권한 것

1. 어섬 디자인 MD 파일 하나를 프로젝트에 넣고 "이거 따라해"라고 하면 끝이다.
2. "AI한테 끌려가지 마세요. 시키는 건 우리가 합니다."
3. 설치 방법을 정리해 놨으니 댓글에 "디자인"이라고 남겨 달라.

출처: youtube.com/…