제작: dominikmartn · dominikmartn/hue
색상에 브랜드(URL, 이름 또는 스크린샷) 피드 → 전체 디자인 언어(토큰, 타이포그래피, 간격, 밝음/어두움, 영웅 레시피, 아이콘 키트 및 생성된 디자인 시스템 기술)를 얻습니다.
dominikmartn/hue는 모든 브랜드 참조를 완전한 디자인 시스템으로 바꾸는 오픈 소스 Claude 기술입니다. Cursor.com 또는 Raycast를 가리키거나, 스크린샷을 붙여넣거나, 분위기 이름을 지정하세요. 색상 + 타이포그래피 + 간격 토큰, 작은 구성 요소 라이브러리, 밝은/어두운 변형, 영웅 레시피 및 일치하는 아이콘 키트를 분석하고 출력합니다. 디자인 언어 패키지에는 YAML 모델 파일과 샘플 HTML 랜딩 페이지가 포함되어 있습니다. 또한 세션 전반에 걸쳐 재사용할 수 있는 브랜드별 Claude 기술을 생성하므로 상담원이 자동으로 브랜드를 유지하게 됩니다.
언제 쓸까: 당신은 사이트의 미학을 좋아하고 같은 방향의 시작 시스템을 원합니다.
결과: 에이전트가 모든 후속 UI 작업에 적용하는 재사용 가능한 브랜드 음성입니다.
언제 쓸까: 마음에 드는 드리블 샷이 있고 이를 앱에 표시하고 싶습니다.
결과: 단일 참조를 통해 깨끗하고 소유 가능한 시스템입니다.
언제 쓸까: 5명의 고객이 있고 복제 작업 없이 5개의 브랜드 테마가 필요합니다.
결과: 스킬 활성화를 통해 교체할 수 있는 화이트 라벨 테마.
Figma 프레임을 코드로 변환할 때 Hue의 토큰을 사용하세요.
Magic UI 구성요소 선택, 색조 토큰을 통해 조정
생성된 브랜드 패스 대비 + a11y 규칙 확인
| 도구 | 입력 | 언제 호출 | 비용 |
|---|---|---|---|
| hue:generate (SKILL) | URL | brand name | screenshot + optional notes | 신제품 출시 또는 고객 브랜드 온보딩 시 | 0 |
생성된 팔레트가 탁해 보입니다.SVG/PNG 참조에 대한 편견; JPEG는 채도를 잃습니다. 또는 기술이 존중해야 할 육각 앵커를 제공하십시오.
Inspect generated tokens.json for the flagged colors어두운 모드에서는 대비가 실패합니다.a11y-first 다크 모드로 Hue를 재생성하도록 요청하세요. 중립을 무시하십시오.
Run claude-design-auditor on the dark variants| 대안 | 언제 쓰나 | 단점/장점 |
|---|---|---|
| claude-code-design-skills | 변환할 프레임이 있습니다. 당신은 이미 브랜드를 가지고 있습니다 | 브랜드를 생성하지 않고 하나를 소비합니다. |
| magic-ui-mcp | 브랜드 시스템이 아닌 기성품 구성 요소를 원합니다. | 언어가 아닌 도서관 |
| claude-design-auditor-skill | 디자인을 생산하는 것이 아니라 기존 디자인을 평가하고 싶습니다. | 평가하고 생성하지 않음 |