Yu-369/VibeCurb

What it solves

AI 에이전트들은 흔히 일반적인 웹 패턴을 학습하기 때문에 평범하고 "평균적인" 웹사이트 디자인을 생성하는 경우가 많습니다. VibeCurb는 엄격한 디자인 제약 조건과 품질 게이트를 부과함으로써 이러한 "평균으로의 회귀"를 방지하며, 에이전트가 안전하고 일반적인 레이아웃 대신 전문적인 타이포그래피, 복잡한 그리드, 깊은 대비를 갖춘 하이엔드급의 프로덕션 레디(production-ready) UI를 생성하도록 강제합니다.

How it works

VibeCurb는 에이전트가 따라야 하는 일련의 "skills" (구조화된 markdown 프로토콜)를 제공합니다. 모든 skill은 5단계 파이프라인을 구현합니다:

1. The Design Read: 에이전트는 코딩을 시작하기 전에 참조 모델이나 브리프에서 디자인 시그널(타이포그래피, 색상, 간격)을 추출합니다.
2. Quality Gate 1: 에이전트는 코드가 생성되기 전에 디자인 방향성을 이해했음을 증명해야 합니다.
3. Precise Build: 에이전트는 추출된 시그널에 엄격히 기반하여 UI를 구축합니다.
4. Visual Diff: 출력물은 구성 및 모션에 대한 PASS/FAIL 테이블을 사용하여 참조 모델과 비교 검증됩니다.
5. Drift Rejection: 시스템은 일반적인 보라색 그라데이션이나 플레이스홀더 패턴과 같은 흔한 AI 기본값들을 식별하고 거부합니다.

Who it’s for

AI 코딩 에이전트(Cursor, Claude Code, v0, 또는 ChatGPT 등)를 사용하는 개발자와 디자이너 중, AI가 일반적인 템플릿으로 회귀하는 것을 방지하고 수상 경력이 있는 수준의 고정밀도(high-fidelity) 프론트엔드 인터페이스를 만들고자 하는 분들을 위한 도구입니다.

Highlights

• Specialized Skill Pipelines: hero section(awwwards-hero), 시각적 재설계(visual-redesign), 픽셀 퍼펙트 복제(pixel-perfect), 그리고 키네틱 애니메이션(awwwards-motion)을 위한 전용 프로토콜이 포함되어 있습니다.
• Agent Integration: CLI 도구를 통해 주입하거나 에이전트 규칙 폴더(예: .cursor/rules/)에 수동으로 배치할 수 있습니다.
• Design-First Workflow: 에이전트가 코드를 작성하기 전에 미학적 요소를 이해하도록 보장하기 위해 "Design Read" 단계를 의무화합니다.
• Brand Generation: UI 구축의 참조 모델로 사용할 수 있는 응집력 있는 브랜드 키트와 에디토리얼급 이미지를 생성하는 skill이 포함되어 있습니다.