UI UX Pro Max skill: Claude Code를 위한 디자인 데이터베이스

UI UX Pro Max는 의견이 아닌 데이터를 가져오는 디자인 스킬입니다. Anthropic의 frontend-design skill과 Taste Skill이 정해진 규칙이라면, UI UX Pro Max는 스타일, 팔레트, 폰트 페어링 및 UX 가이드라인의 검색 가능한 라이브러리를 제공하며, 디자인을 하기 전에 에이전트가 질의하는 Python 스크립트를 함께 제공합니다. nextlevelbuilder가 만든 이 repository는 2026년 10월 9일 기준 약 134,000개의 스타를 보유하여 코딩 에이전트용 디자인 스킬 중 가장 많은 스타를 받은 것 중 하나입니다.

저희는 실제 과제(brief)에 이 스킬을 적용해보고, 같은 과제를 주었지만 스킬 없이 만든 페이지와 비교했습니다. 여기에는 무엇이 포함되어 있는지, 어떻게 설치하는지, 검색 결과가 무엇이었는지, 그리고 최종 결과물이 무엇이었는지 설명합니다.

내부 구성 요소

스킬 폴더는 약 200줄 분량의 SKILL.md 파일, CSV 파일을 담은 data/ 폴더, 그리고 이를 검색하는 scripts/search.py로 구성되어 있습니다. 2026년 10월 9일 기준으로 CSV 파일에는 다음 내용이 포함되어 있었습니다:

검색 스크립트는 Python의 표준 라이브러리만을 사용하며, README에는 네트워크 호출을 하지 않는다고 명시되어 있습니다.

SKILL.md는 에이전트에게 이 모든 것을 사용하는 방법을 알려줍니다. 새로운 페이지를 위해 --design-system 옵션으로 search.py를 실행하면 페이지 패턴, 스타일, 팔레트, 유형 페어링 및 효과 등 전체적인 방향성을 한 번에 얻을 수 있습니다. 더 좁은 질문의 경우, 특정 도메인(--domain ux, typography, color, landing, icons)이나 기술 스택(--stack)으로 검색할 수 있습니다. 이 스킬은 접근성(accessibility) 및 터치 타겟(touch targets)부터 차트(charts)에 이르기까지 10가지 규칙 카테고리를 우선순위에 따라 순위를 매기며, 검색 결과는 사용자를 절대 무시하는 추천 사항일 뿐임을 명확히 밝힙니다.

설치 방법

Claude Code 플러그인으로:

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

저자가 만든 CLI를 통해 (이것은 Cursor, Codex, Copilot 등도 대상으로 합니다):

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

또는 SkillGild에서:

skillgild install ui-ux-pro-max --agent claude-code

검색 스크립트를 실행하려면 Python 3이 필요합니다.

테스트

요구사항: 프리랜서 디자이너를 위한 가상의 회계 장부 앱인 Ledgerline의 랜딩 페이지입니다. 이 페이지는 Google Fonts만을 유일한 외부 리소스로 사용하여 하나의 독립된 HTML 파일로 작성되어야 합니다. 요구사항에는 섹션 목록이 포함되었으며, 조작된 추천 후기, 고객 수, 로고 및 수상 경력은 금지되었습니다. 한 번의 실행은 UI UX Pro Max를 따랐고, 다른 한 번은 스킬을 사용하지 않았습니다. 두 경우 모두 2026년 10월 9일 Claude Opus 5와 Claude Code 2.1.278을 사용하여 진행했으며, 설치된 다른 것이 로드되지 않도록 Skill 도구는 꺼져 있었습니다. 각각 한 번의 실행이므로 이는 벤치마크라기보다는 예시입니다.

검색 결과

에이전트가 처음 취한 조치는 디자인 시스템 검색이었습니다. 저희는 나중에 정확히 같은 명령어를 다시 실행해 보았고, 이 검색은 결정론적(deterministic)이므로 다음이 그 출처에서 나온 결과입니다:

그 후 네 가지 더 구체적인 검색을 수행했습니다: 아코디언 키보드 동작, 단일 플랜 가격 페이지, 거래 및 영수증 아이콘, 그리고 가로 스크롤 방지. 이 추천은 금융 제품에 적절하며 매우 익숙합니다:

에이전트는 제한적으로 유리(glass style) 스타일을 적용했습니다 (안개 효과가 있는 헤더, 히어로 카드 및 가격 책정 카드, 그 외는 평면적 디자인). 또한 검색에서 이 제품에 대해 권장한 대로 다크 모드를 사용하지 않았습니다. 추천된 주황색 강조 색상이 페이지 배경에서 겨우 약 3.3:1의 대비(contrast)만 달성하는 것을 발견하고, 주황색이 텍스트를 포함하는 모든 곳을 #9A3412로 어둡게 조정했습니다. 스킵 링크(skip link), 44px 터치 타겟(touch targets), 실제 버튼으로 구성된 FAQ, 그리고 히어로 폼에서 스크롤하여 벗어나면 나타나는 모바일용 고정형 체험 배너(sticky trial bar)를 추가했습니다.

이 페이지는 테스트에서 가장 긴 페이지였으며, 약 850개의 보이는 단어를 포함했고 다른 스킬들이 피했던 대부분의 템플릿 크롬(template chrome)을 유지했습니다:

무엇이 잘못되었나

겹치는 카드(Overlapping card) 문제. 히어로 섹션에서 떠 있는 "41개 트랜잭션 태그됨" 확인 메시지가 네 번째 트랜잭션 행 위에 겹쳐 있어 1440px 지점의 클라이언트 이름을 가리고 있습니다. 저희가 전달한 브리프에는 모든 실행(run)이 브라우저를 열지 않도록 지시했기 때문에, 에이전트들이 스스로 자신의 페이지를 확인할 수 없었습니다. 히어로 섹션의 스크린샷 하나만 찍었어도 이 문제를 포착할 수 있었을 것입니다. 만약 설정상 가능하다면, 에이전트에게 페이지를 시각적으로 확인하도록 요청해 보세요.

지어낸 제품 사실(Invented product facts). Impeccable을 제외한 모든 테스트 실행에서 이 사례는 브리프에 전혀 없었던 주장들을 추가했습니다: "시작하는 데 카드가 필요하지 않음", "미국, 영국 및 EU의 대부분 소매 및 기업 은행을 다루는 읽기 전용 뱅킹 제공업체", CSV 및 PDF 내보내기(exports), 회계사를 위한 읽기 전용 링크, 그리고 체험 기간 종료 후에도 30일 동안 보관되는 데이터 등입니다. UI UX Pro Max는 이 요소들을 최대한 활용했는데, 부분적으로는 가장 많은 문구를 작성했기 때문이기도 합니다.

해당 실행은 총 17턴(turns)과 8.3분이 소요되었으며, Claude Code가 보고한 API 등가 비용은 $2.42였습니다. 이는 기준선(baseline)의 2턴, 3.3분 및 $0.98에 비해 높은 수치입니다.

언제 사용해야 하는가

빠르게 방어 가능한 시작 시스템을 원하거나, 특정 UX 질문에 대한 두 번째 의견이 필요할 때 UI UX Pro Max를 선택하세요. 도메인 검색은 빠르고 구체적입니다("초점이 가려지지 않도록", "배지 칩 레이블이 감싸지도록"). 특별히 요구하지 않는 한 일반적인 결과를 기대하십시오. 다음 두 가지 습관이 도움이 됩니다:

UI UX Pro Max를 사용하세요. 디자인 시스템 검색을 실행한 후, 구축하기 전에 추천 사항을 보여주세요. 제품 사실 정보만 제공하고 다른 것은 아무것도 추가하지 마세요: <facts>.
글래스모피즘(glassmorphism)과 슬레이트 바탕의 파란색 조합은 피해주세요. 우리는 <direction>을 원합니다.
...

독보적으로 돋보여야 하는 페이지의 경우, frontend-design 또는 Taste Skill으로 시작하고 UI UX Pro Max의 UX 검색을 체크리스트로 사용하세요. 최고의 Claude 프론트엔드 및 디자인 스킬에서 이 모든 것을 비교합니다.

원래 skillgild.dev에 게시됨.