codeswithroh/tastemaker

해결하는 문제

AI로 생성된 사용자 인터페이스는 일반적으로 인디고에서 보라색으로 이어지는 그라데이션과 부드러운 그림자 카드로 구성된 '단일 문화'의 디자인에 빠지기 쉽습니다. 이는 모델이 실제 디자인 감각과 사용자 선호도의 기억을 갖지 못하기 때문입니다. Tastemaker는 코딩 에이전트에게 구조화된 디자인 시스템과 계산적 제약 조건을 제공하여 UI가 전문적이고 독창적이며 접근성도 충족하도록 보장합니다.

작동 방식

Tastemaker는 Claude Code, Windsurf, Gemini CLI와 같은 코딩 에이전트의 기능으로 작동하며, 일반적인 기본값을 엄격한 디자인 워크플로우로 대체합니다:

• 계산 기반 팔레트 생성: 리스트에서 선택하는 대신, Python 스크립트를 사용해 프로젝트의 '분위기'(예: 프리미엄, 기술적, 유쾌함)에 따라 OKLCH 색 공간을 기반으로 새롭고 대비 검증된 팔레트를 생성합니다.
• 픽셀 기반 추출: 모델의 텍스트 기반 '분위기' 설명에 의존하지 않고, 스크립트를 통해 참조 이미지의 실제 픽셀 값을 읽어냅니다.
• 강제 제약 조건: 대비 행렬 스크립트(check_contrast.py)가 수학적으로 색상 쌍이 WCAG 접근성 기준을 충족하는지 검증하며, 가독성을 단순한 제안이 아닌 강제 조건으로 다룹니다.
• 스럽(스lop) 방지 스캔: 전용 스크립트(anti_slop_scan.py)가 일반적인 AI 디자인 트렌드(예: 일반적인 그라데이션, h-screen 사용, 플레이스홀더 텍스트)를 탐지하고 경고합니다.
• 지속적 메모리: 디자인 결정은 로컬 파일(.tastemaker/style-lock.md)에 고정되고, 개인적 선호는 글로벌 프로파일(~/.tastemaker/profile.md)에 저장되어 세션과 프로젝트 간 일관성을 유지합니다.

대상 사용자

디자인 시스템을 수동으로 관리하거나 모델의 기본 미학적 경향과 싸우지 않고도 고품질이고 시각적으로 구분되는 랜딩 페이지와 앱 화면을 구축하고자 하는 AI 코딩 에이전트 사용자.

주요 특징

• 동적 팔레트 생성기: 분위기와 조화 규칙에 따라 프로젝트별로 고유하고 가독성 있는 색상 조합을 생성.
• 실제 자산 확보: Openverse, Iconify, unDraw와 통합하여 저작권 없이 사용 가능한 사진, 아이콘, 일러스트를 가져옵니다.
• Firestore 없이 로컬 실행: 호스팅된 백엔드나 API 키가 필요 없이 사용자 기기에서 완전히 실행됩니다.
• 모션 통합: GSAP와 ScrollTrigger를 기본으로 구현하여 전문적인 애니메이션을 제공하며, 일반적인 애니메이션 오류를 방지하는 감사 스크립트도 포함합니다.
• 디자인 잠금: 프로젝트별 로그와 내구성 있는 사용자 프로파일에 결정을 기록하여 '스타일의 이탈'을 방지합니다.