Codex와 Claude Code에서 UI UX Pro Max 사용하는 방법.
UI UX Pro Max는 GitHub에서 별이 가장 많은 디자인 스킬 중 하나입니다. 고정된 스타일 대신 스타일, 팔레트, 폰트 조합 데이터베이스를 검색해 제품에 맞는 디자인 시스템을 추천합니다. 이 튜토리얼은 Codex와 Claude Code에 설치하는 방법, 디자인 시스템을 만들고 저장하는 방법, 뻔해 보이지 않는 결과를 얻는 방법을 보여 줍니다.
2026년 11월 6일 업데이트 · 7분 분량
UI UX Pro Max란
UI UX Pro Max는 nextlevelbuilder가 만든 오픈소스 스킬(MIT 라이선스)입니다. 버전 2.15에는 스타일 80개, 제품 유형 192개, 색상 팔레트 192개, 폰트 조합 74개, 그리고 React, Next.js, Tailwind, SwiftUI, Jetpack Compose, React Native, Flutter를 포함한 스택 22개에 대한 가이드라인이 담긴 검색 가능한 데이터베이스가 들어 있습니다.
에이전트에게 UI 작업을 요청하면 스킬이 제품을 검색 스크립트에 설명하고, 스크립트가 추천 디자인 시스템을 돌려줍니다. 페이지 패턴, 스타일, 색상, 폰트, 효과, 해당 업종에서 피해야 할 안티 패턴, 출시 전에 돌려 볼 체크리스트입니다. 에이전트는 이를 바탕으로 만듭니다. 스크립트는 Python 표준 라이브러리만 쓰고 네트워크 호출을 하지 않습니다.
설치하기
Python 3가 필요합니다. python3 --version으로 확인하세요.
Codex(와 대부분의 다른 에이전트)에서는 CLI를 한 번 설치한 뒤 프로젝트에 스킬을 추가합니다.
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
Claude Code에서는 플러그인 마켓플레이스를 쓰세요.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
또는 uipro init --ai claude로 CLI를 쓸 수도 있습니다. 모든 프로젝트에 설치하려면 --global을 붙이세요. 나중에 uipro update는 스킬 파일을 갱신하고 uipro uninstall은 제거합니다.
요청해서 쓰기
UI 작업을 요청하면 스킬이 알아서 활성화되므로, Codex나 Claude Code에서 별도의 명령은 필요 없습니다. 제품, 대상 고객, 플랫폼을 구체적으로 말하세요.
[예약 주문을 받는 동네 빵집]의 모바일 앱 홈 화면을 만들어 줘. 고객은 [주말 먹거리를 주문하는 바쁜 부모]야. ui-ux-pro-max 스킬로 먼저 디자인 시스템을 정해서 나에게 보여 주고, 그다음에 화면을 만들어 줘.
화면보다 디자인 시스템을 먼저 보여 달라고 요청하는 것이 이 스킬의 가장 유용한 습관입니다. 모든 페이지에 스타일이 반영되기 전에 거절할 수 있기 때문입니다.
디자인 시스템 직접 생성하기
검색 스크립트를 직접 실행할 수도 있습니다. 스킬 폴더의 위치는 에이전트에 따라 다릅니다. Claude Code에서는 .claude/skills/ui-ux-pro-max/이고, Codex는 .agents/skills/ui-ux-pro-max/ 아래에 설치합니다.
# Recommend a design system for a product, named "Crumb"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# The same, as Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# Search one area only: styles, typography, charts, UX rules, icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Guidelines for a specific stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
README의 예시는 결과가 얼마나 촘촘하고, 얼마나 움직이고, 얼마나 독특해야 하는지를 정하는 세 가지 다이얼 --density, --motion, --variance도 조정합니다.
모든 세션에서 쓰도록 디자인 시스템 저장하기
--persist를 붙이면 결과가 design-system/<name>/MASTER.md에 저장되고, --page를 붙이면 한 페이지용 오버라이드가 추가됩니다.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
그 뒤로는 어떤 화면을 디자인하기 전에든 에이전트에게 MASTER.md를 읽으라고 요청하세요. 다른 도구도 함께 쓴다면 색상, 폰트, 간격을 프로젝트 루트의 DESIGN.md로 복사하고 AGENTS.md에서 그 파일을 가리키게 해서, 모든 에이전트가 같은 시스템을 따르게 하세요.
기존 앱의 테마 바꾸기
이 스킬은 앱을 다시 쓰지 않고 새로운 룩을 입히는 데도 유용합니다. 목표 스타일을 말하고, 에이전트에게 기존 토큰을 활용해 작업하라고 요청하세요.
ui-ux-pro-max 스킬로 이 앱에 [스위스풍, 미니멀] 룩을 입혀 줘. 먼저 이 앱이 이미 쓰고 있는 프레임워크, 스타일링 라이브러리, 테마 토큰을 정리해 줘. 모든 컴포넌트의 구조와 동작은 그대로 유지해 줘. 두 번째 테마를 추가하지 말고 기존의 색상, 타입, 간격, 반경, 그림자 토큰을 업데이트하고, 하드코딩된 스타일은 컴포넌트 하나씩 교체해 줘. 묶음마다 끝날 때 대비, 포커스 상태, 다크 모드를 확인해 줘.
뻔해 보이지 않는 결과 얻기
- 피할 것을 말하세요. 데이터베이스는 다른 스킬이 AI 티가 난다고 지적하는 글래스모피즘이나 오로라 UI 같은 룩도 평범한 스타일로 취급합니다. “글래스모피즘 금지, 그라데이션 금지, 이모지 아이콘 금지” 같은 줄을 추가하세요.
- 결과를 직접 보세요. 이 스킬에는 시각적 점검 단계가 없습니다. 화면을 더 만들기 전에 페이지를 휴대폰과 데스크톱 너비로 열어 보거나, 몇 가지 방향을 나란히 비교하세요.
- 스타일이 아니라 제품을 설명하세요. 결과는 검색에 쓰는 단어에 달려 있습니다. “모던하고 깔끔한 앱”보다 “부모를 위한 빵집 예약 주문 앱”이 더 나은 결과를 찾아 줍니다.
- 완성된 시스템에서 시작해도 됩니다. 저희 디자인 시스템 라이브러리에는 DESIGN.md로 에이전트에게 줄 수 있는 완성된 웹·앱 시스템이 있습니다.
Taste Skill, Impeccable, Anthropic의 frontend-design과의 비교는 Taste Skill vs Impeccable vs UI UX Pro Max를 참고하세요.
자주 묻는 질문
UI UX Pro Max는 무료인가요?
네. GitHub 저장소의 스킬은 MIT 라이선스의 무료 오픈소스입니다. README에는 브랜드, 로고, 슬라이드 도구가 추가된 프리미엄 버전도 소개되어 있지만 가격은 나와 있지 않습니다.
UI UX Pro Max는 Codex에서 작동하나요?
네. npm install -g ui-ux-pro-max-cli로 CLI를 설치한 다음 프로젝트에서 uipro init --ai codex를 실행하세요.
이 스킬에 Python이 필요한 이유는 무엇인가요?
디자인 시스템 검색이 스킬의 데이터 파일을 대상으로 하는 작은 Python 스크립트로 실행되기 때문입니다. 표준 라이브러리만 쓰므로 따로 패키지를 설치할 필요가 없습니다.