UI UX Pro Max 딥다이브: 코딩 에이전트에 디자인 기준을 먼저 쥐여 주기

한 줄 요약

UI UX Pro Max는 코딩 에이전트가 화면을 만들기 전에 제품 유형에 맞는 스타일·색·글꼴·레이아웃 패턴을 찾아 디자인 시스템으로 묶어 주는 UI/UX 스킬입니다.

저장소: nextlevelbuilder/ui-ux-pro-max-skill

에이전트에게 "랜딩 페이지를 만들어 주세요"라고 하면 대개 동작하는 화면은 금방 나옵니다. 문제는 어디서 본 듯한 보라색 그라데이션과 화면마다 새로 정한 색 코드가 쌓이면서 고치는 시간이 더 길어진다는 점입니다. UI UX Pro Max는 구현 전에 "이 제품에 맞는 패턴·색·글꼴과 피해야 할 것"을 먼저 정리하게 합니다. 깃허브에서 별 약 13.9만 개를 받은 저장소로, MIT 라이선스로 공개돼 있습니다.

앞서 소개한 mattpocock/skills와 Superpowers는 요구 정리·계획·테스트·리뷰처럼 개발 절차를 다루는 스킬 모음이었습니다. UI UX Pro Max는 방향이 다릅니다. 절차가 아니라 디자인 판단에 쓸 데이터를 에이전트 옆에 둡니다. 스타일·색·글꼴·UX 가이드라인을 로컬 검색으로 꺼내 쓰는 구조라 앞의 두 스킬과 함께 써도 역할이 겹치지 않습니다. 절차는 Superpowers로, 화면의 기준은 UI UX Pro Max로 나눠 보시면 편합니다.

저희가 권하는 첫 작업은 새 화면 하나입니다. 이미 디자인 시스템이 정해진 제품보다, 아직 색과 글꼴이 정해지지 않은 사이드 프로젝트의 랜딩 페이지나 사내 도구의 첫 대시보드가 좋습니다. 추천된 기준과 금지 패턴이 구현에서 지켜지는지 따라가 보면 팀에 맞는지 빠르게 판단할 수 있습니다.

무엇을 할 수 있나

핵심은 README의 디자인 시스템 생성기입니다. "뷰티 스파 랜딩 페이지"처럼 요청하면 제품 유형, 스타일, 색 팔레트, 랜딩 페이지 패턴, 글꼴 조합을 나란히 검색하고, 제품 유형별 규칙으로 걸러 한 장의 디자인 시스템으로 묶습니다. 결과에는 섹션 순서와 CTA 위치를 담은 페이지 패턴, 스타일 이름과 키워드, 주색·보조색·CTA색·배경색·본문색, 제목·본문 글꼴 조합, 피해야 할 패턴, 출시 전 점검 목록이 들어갑니다.

데이터 규모도 살펴볼 만합니다. README 기준으로 검색 가능한 UI 스타일 79종(기본 추천에 쓰이는 활성 50종), 제품 유형과 1:1로 맞춘 색 팔레트 192종, 글꼴 조합 74종, 차트 유형 25종, UX 가이드라인 119개, 제품 유형별 추론 규칙 192개를 담고 있습니다. 규칙마다 "은행 서비스에 AI풍 보라·분홍 그라데이션을 쓰지 말 것" 같은 금지 패턴이 붙어 있습니다.

검색은 외부 API가 아니라 스킬 폴더 안의 CSV와 Python 스크립트로 동작합니다. README의 준비 사항은 Python 3.x 표준 라이브러리만 쓰고, 스크립트가 아무것도 설치하지 않으며 네트워크 호출도 하지 않는다고 밝힙니다. 보안 검토에서 데이터 흐름을 설명하기 쉬운 구조입니다.

스택 가이드라인은 HTML + Tailwind를 기본으로 React·Next.js·shadcn/ui·Vue·Svelte, 모바일의 SwiftUI·Flutter, 데스크톱의 WPF 등 22개를 다룹니다. 설치 대상 에이전트도 Claude Code, Cursor, Codex CLI, GitHub Copilot, OpenCode 등 20종이 넘습니다.

설치와 첫 실행

Claude Code를 쓴다면 README의 설치 안내대로 대화창에서 마켓플레이스를 추가하고 플러그인을 설치합니다.

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

다른 에이전트를 쓰거나 프로젝트 폴더에 스킬 파일을 직접 두고 싶다면 README가 권장하는 CLI 설치를 씁니다. npm 패키지 이름은 ui-ux-pro-max-cli이고, 설치하면 uipro 명령이 생깁니다.

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai codex       # Codex CLI

모든 프로젝트에서 쓰려면 uipro init --ai claude --global처럼 --global을 붙이고, 파일을 쓰기 전에 무엇이 설치될지 보고 싶다면 uipro init --dry-run으로 미리 확인할 수 있습니다. 예전 패키지 uipro-cli는 쓰지 말라고 README가 안내합니다. 검색 스크립트에 필요한 Python 3.x는 python3 --version으로 먼저 확인해 두세요.

설치가 끝나면 따로 명령을 외울 필요가 없습니다. Claude Code·Cursor·Codex CLI 같은 도구에서는 UI 작업을 요청하면 스킬이 자동으로 켜집니다. README의 예시 그대로 시작해 보세요.

Build a landing page for my SaaS product

Kiro·Roo Code처럼 워크플로 모드를 쓰는 도구에서는 /ui-ux-pro-max Build a landing page for my SaaS product처럼 슬래시 명령으로 부릅니다. 첫 실행에서는 결과 화면보다 구현 전에 정한 디자인 시스템이 제품과 맞는지부터 읽어 보세요.

활용 시나리오 1: 새 랜딩 페이지의 기준부터 세우기

예약제 스파의 랜딩 페이지를 만든다고 해 보겠습니다. 스킬을 설치한 프로젝트 루트에서 README의 디자인 시스템 명령을 직접 실행하면 에이전트에게 넘기기 전에 추천 결과를 먼저 볼 수 있습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

README에 실린 예시 결과는 히어로와 고객 후기 중심의 패턴, 서비스·후기·예약·문의로 이어지는 섹션 순서, 부드러운 그림자의 Soft UI 스타일, 분홍·세이지 그린·금색 CTA 팔레트, Cormorant Garamond와 Montserrat 조합을 제안합니다. 피해야 할 패턴으로는 네온 색과 AI풍 보라·분홍 그라데이션이, 출시 전 점검 목록에는 이모지 대신 SVG 아이콘, 본문 대비 4.5:1 이상, 키보드 포커스 표시, 375px부터 1440px까지의 반응형 확인이 붙습니다.

이 결과를 저장해 두면 다음 세션에서도 같은 기준을 이어 쓸 수 있습니다. --persist를 붙이면 design-system/<프로젝트>/MASTER.md에 전체 기준이, --page를 더하면 pages/ 아래에 페이지별 예외가 저장됩니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

그다음 페이지를 만들 때는 README의 안내처럼 MASTER.md를 먼저 읽고 페이지 파일이 있으면 그 규칙을 우선하라고 요청합니다. 가격·예약 페이지를 이어 만들 때 화면마다 색과 글꼴이 달라지는 일을 줄여 줍니다. 스킬 지침은 이미 MASTER.md가 있으면 덮어쓰지 않고 건너뛰도록 되어 있어서, 팀이 합의한 기준이 실수로 사라질 걱정도 덜합니다.

활용 시나리오 2: 운영 대시보드를 촘촘하게 다시 짜기

사내 운영 대시보드는 마케팅 페이지와 요구가 다릅니다. 여백보다 한 화면에 담기는 정보가 중요하고, 화려한 움직임은 오히려 방해가 됩니다. UI UX Pro Max의 디자인 다이얼은 이런 차이를 쿼리를 바꾸지 않고 조정합니다. --variance는 정돈된 배치에서 과감한 비대칭까지, --motion은 은은한 마이크로 인터랙션에서 복잡한 연출까지, --density는 넉넉한 여백에서 대시보드용 촘촘한 간격까지 1~10으로 고릅니다.

README의 예시 절에는 평범한 운영 대시보드(변경 전)를 스킬이 만든 디자인 시스템만으로 다시 꾸민 화면(변경 후)이 실려 있습니다. 이때 쓴 조건이 아래와 같습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "internal operations dashboard" --design-system --density 8 --motion 3 --variance 4

밀도는 높이고, 움직임은 낮추고, 배치는 무난하게 둔 조합입니다. 두 링크를 나란히 열어 보면 같은 데이터가 간격·색·위계만으로 얼마나 달라지는지 감이 옵니다. README는 이 예시를 커뮤니티가 기여한 참고 사례이며 공식 데모가 아니라고 밝히니, 다이얼 조합을 고를 때 참고할 장면으로 보시면 됩니다.

대시보드에서는 차트 선택도 자주 막히는 부분입니다. 디자인 시스템을 정한 뒤 차트 유형은 따로 찾아볼 수 있습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart

에이전트에게 넘길 때는 "디자인 시스템과 차트 추천을 근거로 지표 카드와 추이 차트를 배치하고, 각 결정의 근거를 함께 적어 주세요"처럼 요청해 보세요. 나중에 "왜 이 차트를 썼는지"를 대화 기록에서 찾지 않아도 됩니다.

활용 시나리오 3: 기존 앱에 새 테마 입히기와 출시 전 점검

이미 운영 중인 서비스라면 처음부터 다시 만드는 일은 드뭅니다. 더 흔한 요청은 "구조와 기능은 그대로 두고 화면만 정리해 주세요"입니다. README에는 기존 앱에 테마를 적용하는 프롬프트가 따로 실려 있습니다. 아래는 그 내용을 우리말로 옮겨 줄인 예시입니다.

ui-ux-pro-max 스킬로 기존 React 앱의 테마를 바꿔 주세요. 목표 스타일은 Minimalism & Swiss Style입니다.
먼저 프레임워크·스타일 라이브러리 버전, 라우트, 컴포넌트, 기존 테마 토큰을 살펴보고
컴포넌트 구조와 동작, 비즈니스 로직은 그대로 유지해 주세요.
새 테마 시스템을 만들지 말고 기존 의미 토큰을 고쳐 쓰고, 하드코딩된 스타일은 컴포넌트 하나씩 바꿔 주세요.
대비, 키보드 포커스, 반응형, 라이트·다크 모드를 확인하고 바뀐 파일과 남은 하드코딩 스타일을 정리해 주세요.

README의 점검 순서도 같은 방향입니다. bg-blue-600이나 text-[#1e293b]처럼 하드코딩된 값을 찾고(점검), background·surface·primary·border 같은 의미 역할에 연결하고(매핑), 작은 묶음으로 바꾼 뒤(이전), 묶음마다 대비·포커스·반응형을 확인합니다(검증). README가 강조하듯 토큰만 바꾸면 토큰을 쓰지 않는 스타일에는 반영되지 않으니, 남은 하드코딩 목록을 꼭 받아 두세요.

테마를 바꾸지 않더라도 출시 전 점검에 쓸 수 있습니다. UX 가이드라인은 접근성, 터치 영역, 성능, 레이아웃, 폼 피드백 같은 항목에 우선순위가 매겨져 있고, 문제 하나를 짧은 쿼리로 찾도록 되어 있습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "error summary validation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "badge chip label wraps to second line" --domain ux

오류 메시지가 화면 맨 위에만 뜨거나 칩 문구가 두 줄로 깨지는 문제처럼 리뷰에서 자주 놓치는 항목을 짚을 수 있습니다. "접근성 전체"보다 관찰 가능한 결과 하나씩 묻는 것이 스킬 지침의 권장 방식입니다.

어떤 팀에 맞나

장점: 디자이너 없이 에이전트로 화면을 만드는 1인 빌더와 작은 팀에게 특히 도움이 됩니다. 구현 전에 패턴·색·글꼴·금지 패턴을 정하고 MASTER.md로 남기기 때문에, 화면이 늘어나도 기준이 흩어지지 않습니다. 검색이 로컬 데이터로 동작하고 결과가 사람이 읽는 형식이라 추천을 검토하기도 쉽습니다.

한계: 추천은 출발점입니다. README도 검색 결과는 디자인 가이드일 뿐 앱을 자동으로 고쳐 주지 않는다고 밝힙니다. 이미 브랜드 가이드와 디자인 시스템이 확립된 제품이라면, 추천 팔레트보다 자사 토큰을 우선하도록 에이전트에 명시하고 UX 가이드라인과 점검 목록 위주로 쓰는 편이 맞습니다. 첫 결과를 확정안으로 받기보다 쿼리를 바꿔 두세 번 비교해 보세요. 사람이 읽는 출력은 긴 항목을 300자에서 자르므로 전체 데이터가 필요하면 --json을 씁니다.

버전 구분: 저장소는 기본 버전이고, 브랜드 아이덴티티·로고·배너·슬라이드 같은 브랜드 디자인 기능과 대규모 팀용 토큰 구조는 uupm.cc의 유료 버전에 있다고 README가 구분합니다. 위에서 살펴본 디자인 시스템 생성, 스타일·색·글꼴 검색, 스택별 가이드라인은 모두 오픈소스 기본 버전 범위입니다. 업데이트가 잦은 저장소라 uipro update로 스킬 파일을 갱신할 담당자와 시점도 정해 두면 좋습니다.

원문과 함께 읽기

마치며

하이프마크 빌더 커뮤니티는 앞으로도 이렇게 직접 살펴본 AI 도구와 오픈소스를 꾸준히 공유하려고 합니다. 빌더 여러분께 도움이 될 좋은 자료들을 계속 모아 나누겠습니다.

오픈채팅방: AI빌더스
도입 상담·문의: 문의 폼
다음 글 받아보기: 블로그 RSS · AI 자료실