Show HN: StyleSeed – a design-rules engine so AI agents stop building generic UI

개요

StyleSeed는 AI가 생성하는 UI가 범용적인 외관을 띄는 문제를 해결하기 위해 디자인 판단력과 규칙을 제공하는 엔진입니다.

주요 내용

* AI UI의 범용성 문제 해결: StyleSeed는 AI가 생성한 UI가 종종 독창성 없이 유사하게 보이는 문제를 해결하며, 디자인 규칙을 통해 이를 방지합니다.
* 디자인 규칙 기반 엔진: 74개의 시각적 디자인 규칙, 48개의 컴포넌트, 명명된 모션 시스템, 19개의 AI 에이전트 스킬을 통해 디자이너의 판단 방식을 AI에게 학습시킵니다.
* 브랜드 DNA 적용: 단일 컴포넌트 또는 전체 UI에 대해 Toss, Raycast, Arc 등 다양한 브랜드 DNA를 기반으로 색상, 반지름, 모션, 그림자, 그라데이션 등을 적용할 수 있습니다. 이는 'data-skin' 속성을 통해 제어됩니다.
* 품질 게이트 (Quality Gate): UI가 사용자에게 표시되기 전에 점수화된 검토 및 수정 과정을 거쳐 80/100점 이상을 만족하도록 합니다.
* 디자인 일관성 유지 (Anti-Drift): STYLESEED.md 파일에 주요 색상, 폰트, 모션 등을 고정하여 디자인이 세션마다 변경되는 것을 방지합니다.
* 다양한 AI 에이전트 지원: Claude Code, Codex, Cursor 등 다양한 AI 코딩 도구와 연동됩니다.
* 실행 방식: npx skills add bitjaru/styleseed 명령어로 설치하거나, 프롬프트에 스타일 시드 규칙 URL을 직접 붙여 넣어 사용할 수 있습니다.
* 엔진과 스킨의 분리: StyleSeed 엔진은 브랜드에 독립적이며, '스킨(Skin)'은 특정 브랜드의 시각적 정체성을 정의하는 theme.css 파일로 구성됩니다. Toss, Stripe, Linear 등 7개의 내장 스킨과 58개 이상의 외부 스킨을 지원합니다.
* 명명된 모션 시스템: 'Seed' (Spring, Silk, Snap, Float, Pulse)와 키워드 기반의 모션을 통해 일관되고 의도된 애니메이션을 구현합니다.
* 기존 UI 개선: 이미 생성된 범용적인 UI에 대해 /ss-score로 품질을 평가하고, /ss-review로 수정하여 디자인 시스템을 적용할 수 있습니다.
* 데이터 vs. 판단력: StyleSeed는 단순히 디자인 데이터를 제공하는 것을 넘어, 디자이너가 경험을 통해 체득하는 '판단력'을 AI에게 학습시키는 데 중점을 둡니다.

시사점

StyleSeed는 AI가 생성하는 UI의 디자인 품질과 일관성을 크게 향상시켜, 개발자가 디자이너 없이도 전문적인 수준의 UI를 빠르고 효율적으로 구축할 수 있도록 지원합니다.