어떤 AI에게도 '대시보드를 디자인해 줘'라고 요청하면 항상 똑같은 결과가 나옵니다. KPI 행, 라인 차트, 테이블 같은 형태죠. 물류(Logistics), 인사(HR), 헬스케어, 핀테크 등 분야를 막론하고 모두 비슷하게 보입니다. 그리고 자세히 살펴보면 로딩 상태(loading state)도 없고, 빈 상태(empty state)도 없고, 에러 상태(error state)도 없습니다. 그냥 '렌더링'만 됩니다. 작동하는 것처럼 보일 뿐이죠.
저는 항공, 물류, HR 제품을 위해 14년간 엔터프라이즈 SaaS를 디자인해 왔습니다. 그래서 제가 실제로 어떻게 디자인하는지 정리했고, 이를 Claude 스킬로 만들었습니다.
이것은 무료이며 오픈 소스이고 MIT 라이선스를 따릅니다: your-ui-ux-designer on GitHub
Logistics shipment dashboard generated by the UI/UX Designer Claude skill
스킬을 이용해 생성한 물류 배송 대시보드 (HTML)
핵심 원칙: 설명하지 말고, 렌더링하라(render, don't describe)
대부분의 AI 출력물은 좋은 디자인에 대해 '설명'만 합니다.
11가지의 다양한 스타일. 미니멀(Minimal), Material 3, Bento Grid, Glassmorphism, Liquid Glass, Spatial, Aurora, Neo-Brutalism 외에도 Neumorphism, Claymorphism, 그리고 적합한 좁은 케이스에 사용되는 Skeuomorphic을 지원합니다. 또한, 클레이모피즘(Claymorphism)처럼 특정 상황(예: 엔터프라이즈 B2B)에 부적절한 스타일인 경우 경고 메시지를 표시해줍니다.
엔터프라이즈 네비게이션. Gmail 스타일의 듀얼 내비게이션, 고정된 아이콘 레일과 접을 수 있는 보조 패널이 모바일 상단 바와 하단 바로 올바르게 재배치(reflow)됩니다.
사용자 정의 디자인 시스템 적용. 토큰(tokens), 링크 또는 이미지를 공유하면 이를 채택하고 누락된 부분을 자동으로 채워줍니다.
다중 출력 대상 지원. HTML, Figma, Claude Design, 또는 작성된 명세서(written spec)로 결과물을 얻을 수 있습니다.
내장 유효성 검사. 결과물을 전달하기 전에 차트가 실제로 렌더링되는지, 컨트롤이 실제로 작동하는지, 대비(contrast)가 기준을 통과했는지 확인합니다.
Fintech invoice reconciliation landing page with live dashboard
동일한 스킬, 다른 산업: HTML로 구현된 라이브 대시보드가 포함된 핀테크 랜딩 페이지.
작동 원리 (How it's built)
필수 핵심 파일(core file)과 필요할 때만 로드되는 참고 파일들로 구성되어 있습니다. 이를 통해 속도를 유지하고 큰 작업에서 규칙이 누락되는 것을 방지합니다.
ui-ux-designer/
├── SKILL.md 핵심 구조 (core spine)
└── references/
...
작동 여부 (Does it work?)
항공, 운송, HRM(인적자원관리) 분야의 30가지 사례에 테스트를 진행했으며, 화면 로직, 스타일 충실도, 대비, 그리드, 상태(states), 상호작용(interaction), 반응성(responsiveness)을 포함하는 10점 만점 루브릭으로 평가했습니다.
- 종합: Sonnet 4.6에서 86.7 / 100 점수
- Opus 4.8의 HTML 결과물: 93.0 / 100
- Opus 4.8의 Figma 결과물: 88.0 / 100
테스트를 통해 얻은 교훈: 모델 선택이 중요합니다. HTML과 Figma 출력을 Opus로 지정함으로써 반응성 격차(responsiveness gap)가 해결되었습니다. 또한, 추론 노력이 낮으면 상태(states)가 누락될 수 있으니 낮은 난이도로 실행하지 않도록 주의해야 합니다.
3단계 설치 방법
- repo 또는 릴리스 페이지에서
ui-ux-designer.skill을 다운로드합니다.
- Claude: 설정(Settings) → 기능(Capabilities) → 스킬(Skills) → 스킬 업로드(Upload skill)
- 파일을 선택합니다. 자동으로 설치됩니다.
이것은 모든 UI/UX 요청에 트리거되거나, /ui-ux-designer로 직접 호출할 수 있습니다. Claude Chat, Claude Code, 그리고 Claude Cowork에서 작동합니다.
사용해보기
설치 후 다음 내용을 붙여넣어 보세요:
현장 서비스 기술자를 위한 모바일 앱 화면을 디자인하세요: 상태별 작업 목록과 작업 상세 보기. HTML 형식으로 출력해주세요.
이것을 만들면서 배운 점
AI는 빠르지만, 자신감 있게 불완전합니다. 가치는 AI가 단순히 화면을 생성하게 만드는 데 있는 것이 아닙니다. 생각하지 않고 시니어 디자이너가 수행하는 검토 사항들(checks)을 인코딩하는 데 있습니다: 이 테이블이 비어있으면 어떻게 될까? 네트워크에 실패하면 기술자는 무엇을 보게 될까? 이 내비게이션은 휴대폰에서 어디로 가야 할까?
이 스킬이 포착하려고 하는 것이 바로 그것입니다.
만약 사용해보고 잘못된 결과가 나온다면, 프롬프트와 스크린샷과 함께 issue를 열어주세요. 그리고 유용하다면, GitHub에서 ⭐을 눌러 다른 사람들이 이 기능을 찾도록 도와주세요.
AI가 구축하고, 내가 결정한다.
