ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 과제 세 가지에 모든 그룹이 같은 프롬프트를 사용했습니다. 가상 스낵 구독 브랜드(Tidepool)의 랜딩 페이지와 지자체 수질 모니터링 네트워크의 관리자 대시보드를 만들고, 평범한 클라이밍 짐 홈페이지(old.html)를 모든 콘텐츠를 유지한 채 새로 디자인합니다. 한 문장 프롬프트군에는 스킬의 우선순위(대비 4.5:1, 44 px 타깃, 모바일 우선, SVG 아이콘, 타입 스케일, 모션 최소화)를 나열한 문장 하나를 추가했습니다. 페이지는 오프라인에서 스크린샷(데스크톱·모바일)을 찍고, 조건 라벨 없이 섞은 콘택트 시트로 블라인드 채점했습니다.

3개 그룹 비교

Codex CLI에서 18회 실행해 측정했고, LLM 심사 없이 규칙 기반 검사로 채점했습니다. 총점 20.9 / 30, 판정 상황에 따라.

판정: 상황에 따라 다름 (20.9 / 30). 출처: nextlevelbuilder/ui-ux-pro-max-skill, .claude/skills/ui-ux-pro-max, 커밋 3a13158에 고정. 설치: npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. 라이선스: MIT(저장소 LICENSE).

무엇인가

ui-ux-pro-max 스킬(nextlevelbuilder/ui-ux-pro-max-skill)은 UI/UX 디자인 지식 베이스입니다. 번들 CSV 데이터(스타일, 팔레트, 서체 조합, 제품 유형 규칙, UX 지침) 위에서 동작하는 로컬 Python 검색 도구(scripts/search.py)를 갖추고 있습니다. 주요 흐름은 제품에 맞는 '디자인 시스템' 추천을 생성하고(--design-system -p <name>), 그에 맞춰 UI를 만드는 것이며, 우선순위가 정해진 규칙 집합(접근성, 터치 타깃, 반응형, 모션)을 따릅니다.

테스트 방법

전용 Windows 테스트 PC에서 Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬을 설치한 경우(스킬 사용군), 설치하지 않은 경우(대조군), 스킬 없이 스킬의 핵심 요구사항을 한 문장으로 압축해 프롬프트 끝에 붙인 경우(한 문장 프롬프트군)로 나눴고, 작업마다 각 군 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 전혀 언급하지 않았습니다(아래에 적은 표현은 예외).

작업은 세 가지이며 모든 군에 같은 프롬프트를 썼습니다. 가상의 스낵 구독 브랜드(Tidepool) 랜딩 페이지, 지방자치단체 수질 관측망용 관리자 대시보드, 콘텐츠를 모두 유지한 채 밋밋한 클라이밍 짐 홈페이지(old.html)를 재디자인하는 작업입니다. 한 문장 프롬프트 군은 스킬의 우선순위(대비 4.5:1, 44 px 타깃, 모바일 우선, SVG 아이콘, 타입 스케일, 모션 줄이기)를 나열한 문장을 하나 추가합니다. 페이지는 오프라인에서 스크린샷(데스크톱·모바일)을 찍고, 조건 라벨 없이 순서를 섞은 콘택트 시트로 블라인드 채점했습니다.

1. 브리프로 새 랜딩 페이지 만들기 — 소량 생산 김 스낵 브랜드 Tidepool의 원페이지 랜딩 사이트를 만드세요. 구독으로 판매하며(맛 3종, 상자당 $14, 매월 배송) 합니다. 인라인 CSS를 사용한 자체 완결형 index.html 하나를 작성하고, 필요한 경우에만 최소한의 JS를 쓰세요. 프레임워크와 빌드 도구는 사용하지 마세요…
2. 데이터 밀도 높은 대시보드 UI — 지방자치단체 수질 모니터링 팀을 위한 대시보드 페이지를 만드세요. 6개 관측소의 현재 수치(pH, 탁도, 염소, 수온), 각 관측소의 7일 추세, 경보 패널이 포함되어야 합니다. 인라인 CSS/JS와 하드코딩된 판독값으로 구성된 자체 완결형 dashboard.html 하나를 작성하세요.
3. 기존의 밋밋한 페이지 재구성 — old.html은 Granite Peak Climbing Gym(콜로라도주 볼더)의 현재 홈페이지입니다. 실제 콘텐츠(요금, 수업, 운영 시간, 주소)는 모두 유지하면서 이 특정 암장에 어울리는 페이지로 new.html을 새로 디자인하세요. 프레임워크 없이 자체 완결형 HTML/CSS로 작성하세요…

점수는 Grok Bot이 고정 루브릭에 따라 블라인드로 읽고 매긴 것입니다(아이디를 섞고 조건은 표시하지 않음). 실행당 0~5점이며 AI 심사자이므로 작은 차이는 노이즈로 보세요.

결과

세 번째 군에 전달한 한 문장 프롬프트: "UI/UX 모범 사례를 우선순위대로 따르세요: 접근성 우선(4.5:1 대비, 대체 텍스트, 보이는 포커스 링, 라벨), 최소 44 px 터치 타깃과 8 px 간격, viewport 메타를 포함하고 가로 스크롤이 없는 모바일 우선 반응형 레이아웃, SVG 아이콘(이모지 금지)을 쓰는 제품에 맞는 스타일, 일관된 타입 스케일(16 px 기준, 1.5 줄 높이)과 시맨틱 색상 토큰, prefers-reduced-motion을 존중하는 모션."

평균 점수: 스킬 없음 4.0, 스킬 사용 3.96(차이 -0.04). 실행당 토큰: 116k 대 160k(1.37배), 시간: 186초 대 184초. 한 문장 프롬프트 군: 3.92(한 문장 프롬프트 대비 스킬의 이득 +0.04, 스킬 없음 대비 한 문장 프롬프트의 이득 -0.08). 한 문장 프롬프트의 실행당 토큰은 123k이므로 스킬은 한 문장 프롬프트의 1.30배 비용을 씁니다.

무슨 일이 있었나

• 눈에 보이는 품질 차이는 없습니다. 블라인드 평균은 대조군 4.00, 한 문장 3.92, 스킬 3.96(각 n=6). 작업별로 군 간 차이는 최대 0.25점으로, 셀당 2회 실행으로 구분할 수 있는 범위 아래입니다. 18장 모두 다듬어져 있고 반응형이며 비슷한 모습(크림색 또는 연한 초록색 바탕, 짙은 초록 포인트, 세리프 디스플레이 서체)을 공유합니다.
• 스킬은 실제로 사용되었습니다. 스킬 사용 실행 6회 모두 SKILL.md를 읽고 search.py --design-system을 실행했습니다(예: 'snack subscription playful coastal'). 스크립트는 Windows의 시스템 Python에서 작동합니다.
• 접근성 기본은 순수 Codex 산출물에서도 이미 표준입니다. viewport 메타, @media 쿼리, 포커스 스타일은 18/18 페이지에 있었고 prefers-reduced-motion은 17/18에 있었습니다(빠진 하나는 대조군 대시보드). 따라서 스킬의 접근성 우선 규칙이 더할 것이 거의 없었습니다.
• 비용: 실행당 스킬 160k 토큰으로 대조군 116k, 한 문장 123k(1.4배, 1.3배)입니다. 실제 소요 시간은 같았습니다(약 185초). 스킬 사용 실행은 스킬 폴더를 프로젝트(.agents)로 복사했고, 추가 토큰이 여기서 나옵니다.
• 검사 하나가 오작동했습니다. '가격 유지($22/$79/$720)' 검사가 대조군과 스킬 군의 재디자인 실행 6회 중 4회에서 실패했는데, 해당 페이지들이 달러 기호를 별도 <sup> 요소에 썼기 때문입니다(<sup>$</sup>79). 스크린샷에서는 가격이 온전합니다. 이 검사는 점수에 반영되지 않습니다.

항목별 점수

이 테스트의 한계

• 리뷰어가 전체 페이지 콘택트 시트(페이지당 데스크톱 600 px 너비, 모바일 300 px)를 보고 블라인드로 시각 평가했습니다. 0.25 차이는 심사자 노이즈 범위입니다. 페이지를 전체 해상도로 또는 상호작용하며 비교하지는 않았습니다.
• 셀당 n=2, 작업 3개뿐. 긴 다중 페이지 제품에서의 스킬 가치는 다루지 않았습니다.
• 스킬의 데이터 기반 추천(팔레트와 폰트 조합)은 오프라인에서 웹 폰트를 불러올 수 없어, 페이지가 시스템 폰트로 대체되어 타이포그래피 선택이 드러나지 않습니다.
• 작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
• 블라인드 AI 평가: 심사자가 하나이고 평가자 간 검증이 없습니다. 최초의 대조군·스킬 사용군 실행과 나중의 한 문장 프롬프트 실행을 별도 세션에서 평가했으므로(한 문장은 2026-11-02), 세션 간 편차가 생길 수 있습니다.

보안

security.md를 참조하세요. 스캔: CRITICAL 0 / HIGH 3 / MEDIUM 3. 판정: 실행해도 안전(네트워크 차단 샌드박스). 깨끗한 스캔 결과가 스킬의 안전성을 증명하지는 않습니다.

결론

유능한 기본 모델이면 페이지는 이미 좋습니다. 이 스킬은 디자인 시스템 추천 단계를 더하지만 여기서 측정 가능한 품질 향상은 없으며 토큰은 1.4배 듭니다. 기대되는 품질 업그레이드가 아니라 아이디어 생성기나 체크리스트로 쓰세요.