클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

UI 디자이너 (레퍼런스 → 디자인 시스템)

참고 UI 스크린샷에서 색상·타이포·컴포넌트 규칙을 추출해 디자인 시스템, PRD, 바로 쓸 수 있는 구현 프롬프트까지 만들어 줍니다.

디자인·UI중급★ 1,323⑂ 212AI 점수 8/10마지막 업데이트: 2026. 8. 8.

무엇을 해주나

마음에 드는 UI 스크린샷이나 목업을 넣으면, Claude가 4단계로 정리해 줍니다.

  1. 디자인 시스템 추출: 이미지에서 컬러 팔레트(primary/secondary/accent/기능색), 폰트 패밀리·크기·굵기, 버튼·카드·인풋·아이콘 스타일, 4~48dp 간격 체계, 애니메이션 지속시간, 다크모드 변형까지 hex/px 단위로 문서화합니다.
  2. MVP PRD 생성: 프로젝트 아이디어 문서를 바탕으로 엘리베이터 피치, 문제 정의, 타깃 사용자, USP, 기능 목록(유저 스토리), 화면별 UX 고려사항을 사용자와 대화하며 채웁니다.
  3. 최종 구현 프롬프트 합성: 디자인 시스템 + PRD를 템플릿에 결합해 그대로 붙여 쓸 수 있는 UI 구현 프롬프트를 documents/ux-design/에 타임스탬프와 함께 저장합니다.
  4. React 환경 점검 & 구현: package.json에서 React 여부를 확인하고, 없으면 create-react-app + Tailwind + lucide-react 설치를 안내한 뒤 모바일 3종·웹 2종 등 여러 디자인 변형을 컴포넌트로 만들어 쇼케이스 페이지에 모아 줍니다.

이런 분께 추천

  • 참고할 서비스의 무드는 있는데, 그걸 규칙(토큰)으로 정리하지 못해 화면마다 톤이 흔들리는 분
  • 디자이너 없이 MVP UI를 빠르게 만들어야 하는 1인 개발자·창업자
  • 여러 디자인 시안을 한 번에 뽑아 비교하고 싶은 기획자/PM
  • React + Tailwind 스택으로 프로토타입을 자주 찍는 팀

활용 예시

  • SaaS 대시보드 클론 무드: reference-images/saas-dashboard/에 스크린샷 5장을 넣고 "이 무드로 프로젝트 관리 앱 UI 만들어줘" → saas-dashboard_design_system.md 생성 후 PRD 대화, 최종 프롬프트로 모바일 3안·웹 2안 구현.
  • 기존 앱 리디자인: 우리 앱 캡처와 경쟁사 캡처를 함께 넣어 두 디자인 시스템을 비교 문서화하고, 어떤 토큰을 바꿀지 결정.
  • 디자인 토큰 문서화: 이미 만든 화면 캡처만 넣어 컬러/타이포/스페이싱 스펙 문서를 만들고 팀 온보딩 자료로 사용.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 daymade/claude-code-skills 의 ui-designer 폴더를 내 ~/.claude/skills/ui-designer/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/ui-designer ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널(맥은 Terminal, 윈도우는 Git Bash 또는 WSL)을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/daymade/claude-code-skills.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬만 복사합니다: cp -r claude-code-skills/ui-designer ~/.claude/skills/
  5. assets/ 폴더 안 템플릿 3개(design-system.md, app-overview-generator.md, vibe-design-template.md)가 함께 복사되었는지 확인합니다. 없으면 저장소의 ui-designer 폴더 전체를 다시 복사하세요.
  6. 참고 이미지를 한 폴더에 모아두고(예: reference-images/my-ref/), 프로젝트 아이디어를 ideas/my-app.md 같은 파일로 적어 둡니다.
  7. 프로젝트 폴더에서 Claude Code를 실행하고 "reference-images/my-ref 이미지로 디자인 시스템 뽑고 ideas/my-app.md 기준으로 UI 만들어줘"처럼 요청합니다.
  8. React 프로젝트가 없다면 안내대로 npx create-react-app my-app + Tailwind + lucide-react를 설치합니다.
  9. 템플릿 안에 남아 있는 중국어 플레이스홀더({项目背景} 등)는 Claude가 치환하지만, 결과가 어색하면 해당 부분을 직접 한국어로 바꿔도 됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT