URL, 이름 또는 스크린샷으로부터 어떤 브랜드든 학습하여 완전한 디자인 시스템 (Design System)으로 변환하는 오픈 소스 스킬입니다. Claude Code 및 Codex에서 작동합니다. 한 번만 설치하면, 그 이후에 AI 어시스턴트가 구축하는 모든 컴포넌트 (Component)가 귀하의 브랜드와 일치하게 됩니다.
실행 화면 확인: hueapp.io
AI 코딩 스킬로서의 완전한 디자인 언어 (Design Language) — 컬러 토큰 (Color tokens), 타이포그래피 (Typography), 간격 (Spacing), 컴포넌트 (Components), 라이트 + 다크 모드 (Light + Dark mode), 히어로 스테이지 레시피 (Hero stage recipes), 아이콘 키트 (Icon kit) 선택.
생성된 스킬을 사용하는 두 개의 서로 다른 세션이 시각적으로 일관된 결과물을 생성할 수 있을 만큼 충분히 주관적 (Opinionated)입니다.
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
git clone https://github.com/dominikmartn/hue ~/.agents/skills/hue
대안적인 Codex 경로 (CLI 설치 프로그램 호환):
git clone https://github.com/dominikmartn/hue "${CODEX_HOME:-$HOME/.codex}/skills/hue"
그 다음 어떤 세션에서든 다음과 같이 말해보세요:
- "cursor.com으로부터 디자인 스킬을 만들어줘"
- "raycast에서 영감을 받은 디자인 언어를 생성해줘"
- "이 스크린샷으로부터 hue 스킬을 생성해줘"
어시스턴트가 트리거 (Trigger)를 포착하여 분석 과정을 진행합니다.
examples/ 디렉토리에는 17개의 브랜드가 살아있습니다.
hue가 생성하는 결과물의 범위를 보여줍니다. 16개는 가상의 원샷 (One-shots)이며, 1개는 실제 브랜드입니다 (meadow ↦ themymind-design 스킬).
| 브랜드 | 특징 |
|---|
| atlas | ivory engineering, 고전적인 해도 (Maritime charts) |
| ... | |
각 브랜드는 design-model.yaml을 가지고 있습니다.
. ridge와 stint는 app-screen.html도 함께 제공합니다.
. halcyon은 전체 component-library.html을 제공합니다.
. 브라우저에서 열어 시스템이 렌더링 (Rendered)된 모습을 확인하세요.
MIT 라이선스. 포크 (Fork)하고, 리믹스 (Remix)하고, 자신만의 것을 만드세요.