ADU AI 실전 노트

디자인 못해도 됩니다
감각을 설치하면 되니까

AI에게 페이지를 만들어 달라고 하면 어딘가 2010년대 느낌의 결과가 나오죠. 디자인 기준이 없어서 그렇습니다. 스타일 84종과 색 조합 192개를 통째로 설치해서 클로드가 알아서 근사하게 만들게 하는 스킬입니다. 설치 두 줄부터 결과가 확 달라지는 주문법까지 정리했습니다.

2026년 8월 3일 GitHub 기준 ⭐ 112,808 · 무료 오픈소스

🤔 혹시 지금 이런 상태 아닌가요

"홈페이지가 필요한데 디자이너를 쓸 돈은 없고 내 눈은 이미 높고."

AI로 페이지를 만들어 본 분은 알 겁니다. 만들어는 주는데 촌스럽다는 것. 이건 AI가 못해서가 아니라 기준 없이 만들어서 그렇습니다. 좋은 디자이너는 업종마다 어울리는 색·글꼴·여백의 공식을 알고 시작하는데 맨몸의 AI는 그 공식 없이 평균값을 내놓습니다. 평균은 언제나 촌스럽습니다.

UI UX Pro Max는 그 공식집을 클로드에 심는 스킬입니다. 안에 든 것이 UI 스타일 84종·색 팔레트 192개·폰트 조합 74개·업종별 디자인 규칙 161개. 설치해 두면 디자인 관련 요청이 들어올 때 스스로 발동해서 내 업종과 목적에 맞는 조합을 고른 뒤 그 기준대로 만듭니다. 매번 부르는 명령을 외울 필요가 없습니다.

✅ 이 페이지 사용법 설치(명령 두 줄) → 주문서 공식(결과를 가르는 4요소) → 고쳐 나가는 대화법 → 결과물 여는 법 순서입니다. 명령어는 전부 클로드 코드의 채팅 입력창에 붙여넣습니다.
설치

채팅창에 두 줄 — 순서대로 붙여넣으세요

GitHub 원본 보기 → 1 — 마켓플레이스 등록
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
2 — 설치
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

설치됐다는 안내가 나오면 끝입니다. 이후에는 아무것도 부르지 않아도 디자인 관련 요청에서 알아서 작동합니다.

💡 설치 전에 하나만 해두세요 설치하기 전에 "우리 가게 소개 페이지 만들어줘" 같은 요청을 한 번 해서 결과를 받아두세요. 설치 후 같은 요청을 다시 하면 같은 프롬프트로 전후 비교가 됩니다. 색·글꼴·여백의 격이 달라지는 게 눈으로 확인되고 이 스킬을 계속 쓸지 여기서 판단하면 됩니다.
방법론

제가 권하는 방식 — 주문서 공식 4요소

이 스킬은 업종별 규칙이 들어 있어서 내 정보를 얼마나 주느냐가 결과를 가릅니다. "예쁘게 만들어줘"는 최악의 주문입니다. 제가 쓰는 주문서 공식은 네 칸입니다.

업종

필라테스 스튜디오 · 온라인 강의 · 카페 · 세무사무소 — 구체적일수록 업종 규칙이 정확히 걸립니다.

목적 행동 1개

방문자가 뭘 하면 성공인지 하나만 — 상담 신청 · 구매 · 예약 · 연락처 남기기. 두 개를 말하면 둘 다 흐려집니다.

느낌 2개

일상어면 충분합니다 — "차분하고 신뢰감 있게" "따뜻하고 아늑하게" "고급스럽지만 부담스럽지 않게".

산출물 형식

"완성되면 index.html 파일 하나로 저장해줘" — 이 한 줄이 있어야 결과를 더블클릭으로 열어볼 수 있습니다.

공식대로 쓴 주문 — 이대로 붙여넣고 내용만 바꾸세요
동네 필라테스 스튜디오의 소개 페이지를 만들어줘. 방문자가 상담 신청을 남기는 게 목적이야. 차분하고 신뢰감 있는 느낌으로. 완성되면 index.html 파일 하나로 저장해줘.
내가 파는 온라인 강의의 판매 페이지를 만들어줘. 수강 신청 버튼을 누르게 하는 게 목적이야. 전문적이면서 부담스럽지 않은 느낌으로. 완성되면 index.html 파일 하나로 저장해줘.

🔁 첫 결과에서 끝내지 마세요 — 고쳐 나가는 대화법

여기가 사람들이 가장 많이 놓치는 부분입니다. 첫 결과물은 시안 1차라고 생각하세요. 디자이너와 일할 때처럼 수정 요청을 대화로 이어가면 되는데 요령은 한 번에 하나씩입니다.

수정 대화 예시 — 이렇게 이어갑니다

"상담 신청 버튼을 더 크고 눈에 띄게 해줘" → 결과 확인 → "고객 후기 섹션을 버튼 위에 추가해줘. 후기는 자리만 잡아줘" → 결과 확인 → "전체적으로 색을 조금 더 차분하게 해줘". 세 번의 왕복이면 대부분 쓸 만한 수준까지 갑니다.

💡 결과물은 이렇게 엽니다 저장된 index.html 파일을 더블클릭하면 브라우저에서 완성된 페이지가 열립니다. 폰으로 보면 어떤지도 확인하고 싶다면 클로드에게 "모바일 화면에서 어떻게 보이는지도 점검해줘"라고 시키세요.

💼 이런 장면에서 씁니다

장면 1 — 자영업자의 소개 페이지

가게 소개·위치·상담 버튼이 있는 한 장짜리 페이지는 이 스킬의 주 종목입니다. 위 주문서 공식에 가게 정보를 넣는 것부터 시작하세요.

장면 2 — 프리랜서·이직자의 포트폴리오

"내 경력과 작업물을 보여주는 포트폴리오 페이지"를 주문서 공식으로 시키고 목적 행동을 "연락처 남기기"로 잡으면 됩니다. 내용은 이력서 파일을 주면서 "이걸 바탕으로 채워줘"라고 하면 빠릅니다.

장면 3 — 사이드 프로젝트 아이디어 검증

아이디어가 실제 서비스처럼 보이는 랜딩페이지가 있으면 지인 반응을 받기가 쉬워집니다. 완성도 높은 가짜 첫 화면을 하루 만에 만드는 용도로 유용합니다.

❓ 자주 묻는 질문

무료인가요?

네. 스킬 자체는 무료 오픈소스입니다. 클로드 코드의 요금제는 별개입니다.

디자인 용어를 하나도 모르는데 괜찮을까요?

괜찮습니다. 스타일을 고르는 건 스킬의 몫이고 내가 할 일은 주문서 공식의 네 칸을 일상어로 채우는 것뿐입니다.

코딩을 몰라도 결과물을 쓸 수 있나요?

보는 것까지는 코딩이 필요 없습니다. 파일을 더블클릭하면 브라우저로 열립니다. 실제 웹사이트 주소로 공개하는 건 별도 서비스가 필요한데 그 방법도 클로드에게 물어보면 단계별로 안내받을 수 있습니다.

이미 만들어둔 페이지를 고치는 데도 쓸 수 있나요?

네. 기존 HTML 파일을 주고 "이 페이지를 더 신뢰감 있는 느낌으로 다듬어줘"라고 하면 됩니다. 처음부터 다시 만드는 것보다 이쪽이 빠를 때가 많습니다.

지우고 싶으면 어떻게 하나요?

채팅창에 /plugin을 입력하면 나오는 관리 메뉴에서 제거할 수 있습니다.

이런 정리가 더 필요하다면

검증된 AI 도구와 활용법을
바로 써먹을 수 있는 형태로 나누고 있습니다.

카카오 오픈채팅방 참여 →