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

StyleSeed — UI 디자인 워크플로 허브

프로젝트의 디자인 규칙을 보존하면서 UI 제작·검토·토큰·접근성 작업을 하나의 입구에서 라우팅해주는 스킬입니다.

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

무엇을 해주나

StyleSeed는 UI 작업 요청을 받으면 22개 내부 워크플로(build, setup, studio, reference, audit, review, score, verify, dial, restyle, tokens, motion, page, component, pattern, a11y, lint, flow, copy, feedback, update, resolve) 중 정확히 하나를 골라 실행합니다.

  • .styleseed/project.json과 아티팩트 레지스트리를 먼저 해석해, 승인된 디자인 선택(토큰·간격·스타일)을 임의로 덮어쓰지 않습니다.
  • 감사·점수·검증·상태 확인 요청은 읽기 전용으로 처리해 코드 수정 권한을 넘지 않습니다.
  • 레지스트리가 깨졌거나 부분적이면 오류로 처리하고 과거 전역 번들로 몰래 되돌아가지 않습니다.

이런 분께 추천

  • 프런트엔드/디자인 시스템을 다루며 색상·간격·타이포 규칙을 일관되게 유지해야 하는 분
  • 화면을 새로 만들 때마다 스타일이 제각각으로 흘러가는 문제를 겪는 팀
  • UI 접근성 점검, 마이크로카피, 로딩/빈/에러 상태까지 체계적으로 관리하고 싶은 분

활용 예시

  1. "대시보드 화면 새로 만들어줘" → build 워크플로로 이동해 프로젝트 디자인 락을 지키며 화면 생성
  2. "이 스크린샷 기준으로 톤을 맞춰줘" → reference 워크플로로 스크린샷·URL·Figma 내보내기를 참조 소스로 사용
  3. "이 페이지 접근성 문제 찾아줘" → a11y 워크플로로 감사 후 요청받은 수정만 적용
  4. "지금 설치 상태랑 번들 건강 상태만 알려줘" → resolve의 읽기 전용 도구로 상태만 보고

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

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

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

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

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

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

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

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

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

직접 명령으로 설치하기

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

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

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/bitjaru/styleseed.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 스킬을 복사합니다: cp -r styleseed/skills/styleseed ~/.claude/skills/
  5. ~/.claude/skills/styleseed/SKILL.md와 workflows/ 폴더가 함께 복사되었는지 확인합니다(워크플로 파일이 없으면 동작하지 않습니다).
  6. Claude Code를 다시 시작하고, 프로젝트에서 먼저 "StyleSeed setup"을 실행해 .styleseed 레지스트리를 생성합니다.
  7. 이후에는 "StyleSeed build로 로그인 화면 만들어줘"처럼 자연어로 요청하면 됩니다.