educlopez/ui-craft

해결하는 문제

UI Craft는 프론트엔드 개발에서 AI 코딩 에이전트가 종종 일반적이고 다듬어지지 않았거나 시각적으로 매력적이지 않은 사용자 인터페이스를 생성하는 "AI 슬롭" 문제를 해결합니다. AI 에이전트에게 전문적인 디자인 지식, 주관적인 규칙, 검증 도구를 제공하여 결과 UI가 프로덕션 품질을 갖추고 확립된 디자인 법칙과 사용성 휴리스틱을 따르도록 보장합니다.

작동 방식

UI Craft는 스킬 또는 CLI를 통해 설치할 수 있는 디자인 엔지니어링 시스템으로 작동합니다. AI 코딩 하네스(Cursor 또는 Claude Code 등)에 통합되어 에이전트를 구조화된 디자인 성숙도 "사다리"로 안내합니다:

• 단계 0 (질문): 기본 설치로 에이전트가 기존 프롬프트를 사용하여 더 나은 UI를 생성할 수 있습니다.
• 단계 1 (직접): 특정 표면에 집중된 패스를 위해 특정 슬래시 명령(예: /craft, /polish, /animate)을 제공합니다.
• 단계 2 (지속): 프로젝트에 저장된 브리프와 토큰을 통해 지속적인 디자인 컨텍스트를 확립합니다.
• 단계 3 (강제): 품질 게이트, 리뷰 에이전트, CI 검사를 구현하여 디자인 회귀를 방지합니다.

이 시스템은 기존 프로젝트 스타일을 분석하기 위한 발견 단계를 사용하고 "노브"(크래프트 레벨, 모션 강도, 시각 밀도)를 사용하여 출력을 조정합니다. 또한 Nielsen의 휴리스틱과 고전적인 디자인 법칙에 기반한 결정론적 점수 시스템을 포함하여 UI를 객관적으로 비평합니다.

대상 사용자

AI 코딩 에이전트를 사용하는 개발자를 위해 설계되었으며, 매 반복마다 전문 디자이너 없이도 고품질의 디자이너급 사용자 인터페이스를 출시하려는 사람들을 대상으로 합니다.

주요 기능

• 결정론적 비평: 10가지 사용성 휴리스틱과 6가지 디자인 법칙을 기반으로 점수화 가능한 스코어카드를 생성합니다.
• 크로스 하네스 지원: Claude Code, Cursor, Codex, Gemini, OpenCode와 호환됩니다.
• 디자인 메모리: .ui-craft/를 사용하여 세션 간에 디자인 브리프와 토큰을 지속합니다.
• 품질 게이트: MCP 게이트와 ui-craft-detect를 포함하여 CI/CD 통합으로 UI가 회귀하지 않도록 합니다.
• 스타일 변형: 미니멀, 에디토리얼, 고밀도 대시보드 미학을 위한 특수 프리셋을 제공합니다.