# Show GN: StyleSeed – AI 코딩 도구에 디자인 감각을 심어주는 오픈소스 (2,200줄 디자인 규칙)

> Clean Markdown view of GeekNews topic #28281. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28281](https://news.hada.io/topic?id=28281)
- GeekNews Markdown: [https://news.hada.io/topic/28281.md](https://news.hada.io/topic/28281.md)
- Type: show
- Author: [bitjaru0402](https://news.hada.io/@bitjaru0402)
- Published: 2026-04-07T14:41:34+09:00
- Updated: 2026-04-07T14:41:34+09:00
- Original source: [github.com/bitjaru](https://github.com/bitjaru/styleseed)
- Points: 26
- Comments: 4

## Topic Body

바이브코딩으로 UI를 만들면 "기능은 되는데 디자인이 구린" 문제가 있습니다.                                                                                                                                                      
                                                                           
  StyleSeed는 AI 코딩 도구(Claude Code 등)에 디자인 규칙을 심어주는 오픈소스입니다.                                                                                                                                              
  파일을 프로젝트에 복사하면, AI가 토스 앱 수준의 UI를 만들어냅니다.                                                                                                                                                             
                                                                                                                                                                                                                                 
  포함 내용:                                                                                                                                                                                                                     
  - 2,200줄의 시각 디자인 규칙 60개 (컬러 철학, 타이포 계층, 카드 구조, 금지 패턴 등)                                                                                                                                          
  - 47개 React 컴포넌트 (shadcn/ui 기반 31개 + 대시보드 패턴 16개)                                                                                                                                                               
  - 10개 Claude Code 스킬 (UI 생성, UX 감사, 마이크로카피 생성 등)                                                                                                                                                               
  - Tailwind CSS v4 테마 (라이트/다크 모드)                                                                                                                                                                                      
                                                                                                                                                                                                                                 
  awesome-design-md(23K 스타)의 DESIGN.md가 브랜드 토큰을 제공한다면,                                                                                                                                                            
  StyleSeed는 레이아웃 규칙, UX 가이드, 컴포넌트까지 포함하는 "디자인 브레인"입니다.                                                                                                                                             
                                                                                                                                                                                                                                 
  첫 번째 시드는 토스 스타일. Apple, Linear, Stripe 시드 추가 예정. MIT 라이선스.

## Comments



### Comment 55212

- Author: bitjaru0402
- Created: 2026-04-13T17:29:59+09:00
- Points: 1

▎ 업데이트입니다 — 클릭 가능한 라이브 데모를 올렸어요.                                                                                                                                                                            
  ▎                                       
  ▎ 🎬 https://styleseed-demo.vercel.app                                                                                                                                                                                            
  ▎                                       
  ▎ 같은 챗 UI를 Toss → Raycast → Arc 세 브랜드로 한 번에 morph 시키는 화면이에요. 색·라운드·모션·그림자·그라데이션이 전부 data-skin 속성 하나로 바뀝니다. 코드 분기 없이 토큰만으로요.                                             
  ▎                                       
  ▎ README 상단에 GIF 미리보기 박아뒀습니다: https://github.com/bitjaru/styleseed                                                                                                                                                   
  ▎                                       
  ▎ 첫 게시 때 의견 주신 분들 감사합니다 🙏

### Comment 54941

- Author: kurthong
- Created: 2026-04-08T21:01:35+09:00
- Points: 1

오픈소스를 통한 도메인 지식의 확장이 아이러니하게도 대AI시대에 빛을 발하는거 같네요 너무 멋진 지식공유 감사합니다!

### Comment 54926

- Author: aldlfkahs
- Created: 2026-04-08T17:29:54+09:00
- Points: 1

공유 감사합니다. 개인 프로젝트 할 때 유용하게 써먹겠네요.

### Comment 54867

- Author: kaydash
- Created: 2026-04-07T21:17:11+09:00
- Points: 1

멋져!