주제를 말하면 로컬 디자인 DB에서 스타일·팔레트·글꼴·UX 규칙을 골라 주고, 그대로 랜딩 페이지와 앱 화면을 만들게 합니다.
python3만 있으면 도는 로컬 CSV 검색이라 설치가 가볍습니다. 같은 모델이라도 베이커리 앱, 대학 축제 랜딩, 북카페 3안처럼 주제마다 뚜렷이 다른 디자인 방향이 나왔습니다. 12번 중 1번은 리포트의 경고 아이콘이 화면 폭만큼 커져 첫 화면을 가린 실패였습니다. 누적 스타는 137,469개입니다.
플러그인을 설치하면 ui-ux-pro-max 외에 design·design-system·ui-styling·banner-design·brand·slides 스킬도 함께 들어온다. 그중 design 스킬의 로고·아이콘 생성은 사용자가 GEMINI_API_KEY 등을 넣었을 때 외부 이미지 API를 호출하고, 일부 스킬은 Node(npx shadcn, .cjs 스크립트)가 필요하다. 시험한 ui-ux-pro-max 스킬은 python3만 있으면 로컬 CSV 검색으로 동작한다. README의 npm CLI(uipro) 설치는 Node가 필요해 시험하지 않았다.
보안 검토: caution — 훅·플러그인 MCP 서버 없음. 시험 대상 ui-ux-pro-max 스킬의 search.py는 표준 라이브러리만 쓰는 로컬 CSV 검색(네트워크 없음, --persist 때만 design-system/ 아래 파일 생성). 함께 설치되는 design 스킬의 로고·아이콘 스크립트는 사용자 키로 Gemini·atlascloud·muapi 이미지 API를 호출하며, 스킬 폴더 .env, ~/.claude/skills/.env, ~/.claude/.env 파일의 모든 KEY=VALUE 줄을 프로세스 환경 변수로 읽어들인다(외부로는 각 서비스 키만 사용). 그래서 caution. 시험에서는 design 스킬을 쓰지 않았다. (리더 수정 2026-10-19, 최종 QA 반박 반영)
써 보니
플러그인을 설치하면 design 스킬 등 7개 스킬이 함께 들어옵니다. 그중 로고 생성 등 외부 API를 부르는 스크립트는 ~/.claude/.env 같은 .env 파일 내용을 읽으니, 이미지 API 키는 따로 분리해 두세요.
--design-system과 --persist를 쓰면 디자인 규칙이 MASTER.md로 남아 다음 화면에서도 같은 톤을 이어 갑니다.
디자인 다이얼(variance, motion, density)만 바꿔도 같은 주제의 시안 3안이 뚜렷이 달라집니다.
차트가 들어간 화면은 생성 뒤 첫 화면에 아이콘이 비정상으로 커지지 않았는지 직접 열어 확인하세요.
결과물 7개
갤러리에서 뺀 성공 실행: run01(히어로 배지가 잘린 캡처), run06·run07·run11(화면 속 가상 이름이 실존 서비스·브랜드 이름과 겹침). 성공 실행 수에는 그대로 셉니다.
run04 · 한국어 요청: 가상 베이커리 '밀과 오븐' 픽업 주문 앱 3화면(홈·상품 상세·장바구니)을 휴대폰 목업으로, 브라운·크림 팔레트와 44pt 터치 영역 적용ui-ux-pro-max 스킬을 사용해 줘. 동네 수제 베이커리 '밀과 오븐'의 모바일 픽업 주문 앱을 디자인한다. search.py --design-system 으로 "bakery food ordering mobile app warm" 디자인 시스템을 만들고, --domain web 으로 모바일 터치·세이프 에어리어 가이드를 한 번 찾아 반영해. 결과는 app.html 한 파일: 홈(오늘의 빵), 상품 상세, 장바구니 세 화면을 휴대폰 목업 3개로 나란히 보여 준다. 화면 안 텍스트는 모두 한국어, 아이콘은 인라인 SVG. 마지막에 실행한 search.py 명령을 나열해.run08 · 한국어 요청: 가상 대학 축제 '청춘 페스타 2026' 랜딩 페이지(variance 9·motion 8): 기울어진 블록 히어로, 출연진 띠, 카운트다운, 라인업 그리드ui-ux-pro-max 스킬을 사용해 줘. 가상의 대학 축제 '청춘 페스타 2026' 랜딩 페이지를 만든다. search.py --design-system 에 "music festival event entertainment vibrant youth" 쿼리와 디자인 다이얼 --variance 9 --motion 8 --density 4 를 주고, --domain landing 으로 "event countdown lineup ticket" 구조를 한 번 더 찾아 반영해. 결과는 festival.html 한 파일: 히어로, 카운트다운, 라인업 그리드, 타임테이블, 티켓 CTA. 모든 문구는 한국어, 출연진은 가상의 이름, 애니메이션은 CSS로 하고 prefers-reduced-motion을 지킨다. 마지막에 실행한 search.py 명령을 나열해.run09 · 한국어 요청: 가상 가계부 SaaS '머니로그' 다크 모드 랜딩(앱 화면 목업, 기능 3개, 요금제 3단, FAQ), 디자인 시스템을 MASTER.md로 저장ui-ux-pro-max 스킬을 사용해 줘. 1인 개발자가 만든 가상의 가계부 SaaS '머니로그' 랜딩 페이지를 다크 모드로 만든다. search.py --design-system 으로 "personal finance budgeting saas dark mode trust" 디자인 시스템을 만들어 --persist --output-dir . -p "Moneylog" 로 저장하고, --domain google-fonts 로 "korean sans serif" 한글 글꼴을 찾아 본문에 쓴다. 결과는 landing.html: 히어로(앱 화면 목업 포함), 기능 3개, 요금제 3단 비교표, FAQ 아코디언, 푸터. 문구는 모두 한국어. 마지막에 실행한 search.py 명령을 나열해.run12 · 한국어 요청: 같은 쿼리에 디자인 다이얼만 바꿔 북카페 '책방 온새미로' 첫 화면 3안 비교(A Minimalism & Swiss, B Minimalism, C Brutalism)ui-ux-pro-max 스킬의 디자인 다이얼(--variance, --motion, --density)이 결과를 어떻게 바꾸는지 보여 줘. 같은 쿼리 "independent bookstore cafe community events" 로 search.py --design-system 을 세 번 실행한다: A안 --variance 2 --density 2, B안 --variance 5 --density 5, C안 --variance 9 --density 7. 각 결과로 가상의 동네 북카페 '책방 온새미로' 홈페이지 첫 화면(히어로 + 이번 주 행사 카드 3개)을 a.html, b.html, c.html 로 만들고, compare.html 에서 세 안을 iframe으로 나란히 보여 주며 각 안 위에 스킬이 고른 스타일 이름·색·글꼴을 표시해. 문구는 한국어. 마지막에 실행한 search.py 명령을 나열해.run02 · --design-system 없이 style·color·typography 도메인 검색 3번으로 만든 암호화폐 거래 앱 스타일 타일(Dark Mode OLED, 골드·퍼플 팔레트, Inter)Use the ui-ux-pro-max skill. Do NOT use --design-system this time: run three separate search.py domain queries for a crypto trading app (--domain style "dark fintech trading", --domain color "fintech crypto", --domain typography "technical modern"). Turn the top results into a one-page style tile styletile.html (plain HTML + inline CSS): style name and keywords, labeled color swatches with hex codes, a font-pairing specimen, and sample button/card/input components. Finish by listing the search.py commands you ran.run03 · 디자인 다이얼(variance 8, motion 7, density 8)로 만든 가상 물류 운영 대시보드: KPI 카드, 실시간 처리량 차트, 허브×시간 지연 히트맵, 예외 처리 표(인라인 SVG)Use the ui-ux-pro-max skill to design an internal ops analytics dashboard for a fictional logistics company "Ops Console". Run search.py with --design-system and the design dials --variance 8 --motion 7 --density 8, and also query --domain chart for "real-time monitoring trend". Then build dashboard.html (single file, inline CSS/JS, charts drawn as inline SVG, no external chart library) with KPI cards, a shipments trend chart, a delay heatmap and an exceptions table, using the generated colors, fonts and dense spacing scale. Finish by listing the search.py commands you ran.run05 · 일부러 나쁘게 만든 가입 폼을 넣어 UX·접근성 리뷰: 문제 16개(치명 4·높음 8·중간 3·낮음 1)를 스킬 가이드라인과 짝지어 표로 정리하고 고친 폼과 나란히 비교Use the ui-ux-pro-max skill to run a UX/accessibility review of signup_before.html in this folder. Follow the skill's accessibility query contract: search one observable outcome at a time with --domain ux (for example form labels, error placement, touch target size, contrast, zoom) and --domain icons for the icon-only controls. Do not modify signup_before.html. Write signup_after.html (fixed version) and review.html: a before/after report page that embeds both versions side by side in iframes and lists each issue with severity, the matching guideline returned by search.py, and the fix. Finish by listing the search.py commands you ran.
