AI를 위한 디자인 엔진 — Claude Code, Cursor에게 74가지 디자인 규칙으로 전문가 수준의 UI를 만들게 가르치는 도구
중간맛 분석
스택: React 18, TypeScript, Tailwind CSS v4, Radix UI, Vite 6
설정 난이도: 낮음. 한 줄 프롬프트 붙여넣기부터 시작 가능하거나 npx skills add bitjaru/styleseed로 15개 슬래시 명령(/ss-setup, /ss-review, /ss-score 등) 설치.
즉시 사용 가능: 네. 예제 대시보드(styleseed-demo.vercel.app)에서 실제 렌더링된 UI를 보고, 같은 레이아웃이 3개 브랜드 스킨으로 변신하는 모습 확인. Claude Design과 함께 써도 됨.
데모: 라이브 데모, 모션 갤러리, 가격 페이지 모두 배포된 상태. 74개 규칙의 '규칙 이유' 애노테이션도 시각화.
이런 레포예요
이럴 때 쓰면 좋아요
- Claude Code나 Cursor로 SaaS 대시보드를 만드는데 AI가 생성한 UI가 투박해 보일 때
- shadcn/ui를 쓰지만 여전히 구성이 산만하거나 색감이 이상할 때
- 디자이너 없이 '감성 있는' 웹앱을 빠르게 구축해야 할 때
핵심 기능
대안 대비 차별점
디자인 데이터(색상·폰트·컴포넌트)가 아닌 디자인 판단력(언제 뭘 쓸지, 왜 하나의 강조색만 쓸지)을 LLM이 읽을 수 있는 구조화된 규칙으로 전달하는 유일한 오픈소스 프로젝트.
준비물
- Claude Code 또는 Cursor, Codex 같은 AI 코딩 에이전트
- React 18 이상
- TypeScript
- Node.js (슬래시 스킬 설치 시 npx 사용)
바로 시작하기
- 스타일시드 저장소 클론
git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
- 프로젝트 루트의
.claude/skills폴더에 스킬 복사
mkdir -p .claude/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/
- Claude Code 재시작 후 인터랙티브 셋업 실행
/ss-setup
-
스킨 선택, 브랜드 색상, 폰트 지정하면 첫 페이지 자동 생성됨.
-
또는 간단히 한 줄 프롬프트 사용 (설치 불필요):
Read https://styleseed-demo.vercel.app/llms-full.txt and apply StyleSeed's design rules to every UI in this project.
별 추이 · 7일
활용성 · 따라 만들기 좋은가
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2026년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/bitjaru/styleseed)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기