클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
← 목록으로

테이스트메이커 (Tastemaker)

레퍼런스 이미지에서 실제 색·타입을 추출하고 프로젝트별 스타일을 고정해, 어디서나 본 듯한 'AI 스타일' UI를 벗어나게 해주는 UI 디자인 스킬.

디자인·UI중급★ 444⑂ 44AI 점수 9/10마지막 업데이트: 2026. 9. 29.

무엇을 해주나

  • 레퍼런스 기반 스타일 추출: 스크린샷·Pinterest·URL 등을 주면 extract_palette.py로 실제 픽셀에서 지배색·명도·대비값을 뽑아 토큰을 만듭니다. 말로 요약해 재생성하는 방식이 아니라 수치 기반입니다.
  • 레퍼런스가 없을 때: 아이디어의 무드를 분류해 generate_palette.py로 매번 새로운(가독성 보장) 팔레트를 생성하고 무드별 폰트 페어링을 붙입니다.
  • 스타일 고정과 기억: .tastemaker/style-lock.md에 팔레트·타입·대비 매트릭스를 계약으로 남겨 이후 모든 화면이 같은 토큰을 재사용합니다. ~/.tastemaker/profile.md로 개인 취향도 누적됩니다.
  • 구조 다변화: 히어로 → 3카드 → 후기 → CTA 같은 뻔한 페이지 골격을 피하려고 이전 빌드 기록(log.json, structure-history.json)을 읽고 매크로구조·컴포넌트 아키타입을 회전시킵니다.
  • 에셋 한 번에 완성: Openverse(키 불필요)에서 사진, Iconify로 아이콘·브랜드 로고, 번들된 ideagram으로 일러스트, 파비콘 내보내기까지 한 패스에 채웁니다. 저작자 표시가 필요 없는 소스만 사용합니다.
  • 4가지 모드: build(기본), study(레퍼런스 DNA 분석), audit(기존 UI 비평, 수정 안 함), comps(이미지 생성기용 시안 브리프).

이런 분께 추천

  • Claude Code로 랜딩페이지·대시보드를 만들지만 결과물이 항상 비슷해 답답한 개발자
  • 디자이너 없이 제품 UI를 스스로 만들어야 하는 1인 창업자·사이드 프로젝트 개발자
  • React + Tailwind + shadcn 스택에서 레지스트리 컴포넌트를 골라 쓰고 일관되게 리스타일링하고 싶은 프론트엔드 개발자
  • PRD/스펙이 있는 팀에서 필요한 화면만 골라 디자인 패스를 돌리고 싶은 경우

활용 예시

  1. "이 Dribbble 스크린샷 분위기로 우리 랜딩페이지 만들어줘" → 스크립트로 팔레트 추출 → 대비 검증 → 스타일 락 기록 → 사진·일러스트·아이콘까지 채운 페이지 완성.
  2. "이 페이지 왜 AI가 만든 것처럼 보여?" → audit 모드로 안티-슬롭 체크리스트 기준 점수화 + 심각도순 개선 목록 제시(코드는 건드리지 않음).
  3. "두 번째 제품 랜딩도 만들어줘" → 이전 프로젝트 구조 기록을 읽고 다른 매크로구조/네비·푸터 아키타입을 골라 템플릿 반복을 방지.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/codeswithroh/tastemaker/HEAD/skills/tastemaker/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

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

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

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

직접 명령으로 설치하기

git clone https://github.com/codeswithroh/tastemaker.git /tmp/tastemaker && mkdir -p ~/.claude/skills && cp -r /tmp/tastemaker/skills/tastemaker ~/.claude/skills/

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

  1. 터미널을 엽니다.
  2. 스킬 폴더를 준비합니다: mkdir -p ~/.claude/skills
  3. 저장소를 내려받습니다: git clone https://github.com/codeswithroh/tastemaker.git /tmp/tastemaker
  4. 스킬만 복사합니다: cp -r /tmp/tastemaker/skills/tastemaker ~/.claude/skills/
  5. ls ~/.claude/skills/tastemaker 로 SKILL.md, references/, scripts/, ideagram/ 가 있는지 확인합니다.
  6. 파이썬 스크립트를 쓰므로 python3 --version 으로 Python 3 설치를 확인합니다(필요 시 pip install pillow 등 스크립트 상단의 의존성 설치).
  7. (선택) 일러스트 품질을 높이려면 undraw.co에서 SVG 20~30개를 받아 ~/.ideagram/undraw/ 에 넣어 둡니다. 한 번만 하면 이후 프로젝트에서 재사용됩니다.
  8. Claude Code를 재시작하고 "이 스크린샷 느낌으로 랜딩페이지 만들어줘" 처럼 요청하면 스킬이 자동 발동합니다.