I built skill.md file to stop AI from Generic UI SLOP

개요

AI 코딩 에이전트가 평균적인 웹사이트를 생성하는 경향을 방지하기 위해 VibeCurb라는 도구가 개발되었습니다. VibeCurb는 엄격한 제약 조건을 가진 skill 파일 모음을 통해 AI가 디자인을 먼저 고려하도록 강제합니다.

주요 내용

* 문제점: 현재 AI 코딩 에이전트는 방대한 양의 평균적인 웹사이트 데이터로 학습되어, 사용자의 요구에 따라 기본적으로 평균 이하의 디자인 결과물을 생성하는 경향이 있습니다.
* VibeCurb의 작동 방식: 모든 skill 파일은 4단계 파이프라인을 따릅니다.
* Design Read: AI는 참조 이미지, 코드베이스 또는 브리핑을 읽고 타이포그래피, 색상 팔레트, 레이아웃, 초점 요소, 간격 등 디자인 신호를 추출합니다. 이 단계에서는 코드가 작성되지 않습니다.
* Quality Gate: 디자인 신호 추출 결과가 다음 단계로 진행하기 전에 품질 검증을 통과해야 합니다. AI는 단순히 기본값을 출력하는 것이 아니라 디자인 방향을 이해했음을 입증해야 합니다.
* Precise Build: 코드 생성은 AI 자체의 기본 웹사이트 개념이 아닌, 앞서 추출된 디자인 신호를 기반으로 이루어집니다. 각 skill은 고유한 빌드 시퀀스를 가집니다.
* Visual Diff: 생성된 결과물은 구성, 타이포그래피, 색상, 모션, 반응형 등 여러 측면에서 참조와 비교하여 PASS/FAIL 테이블로 검증됩니다. 변경 사항이 감지되면 수정됩니다. 인라인 드리프트(drift) 거부 레이어도 존재하여 ease-in-out, AI-purple 그라디언트, 일반적인 글래스모픽 카드, Lorem ipsum 콘텐츠와 같은 AI 기본값들을 미리 감지하고 플래그를 지정합니다.
* Skill 종류: 각 skill은 특정 문제 공간을 제약합니다.
* awwwards-hero: 다양한 Hero 섹션 아키텍처(Cinematic Center, Editorial Split 등)를 포함합니다.
* awwwards-sections: 가격표, 벤토 그리드, 기능 강조, 푸터 등 다양한 섹션 디자인을 제약합니다.
* awwwards-motion: 스프링 물리학, 스크롤 연동 안무, 모든 요소에 대한 필수 애니메이션 맵, 60fps 강제 적용, prefers-reduced-motion 게이팅을 포함하는 전체 모션 시스템을 제약합니다.
* pixel-perfect: 입력된 스크린샷과 정확히 일치하는 코드 복제본을 생성합니다.
* visual-redesign: 기능은 유지하되 시각적으로 개선된 코드를 생성합니다.
* imagegen-frontend 및 brandkit-gen: 다른 skill의 입력으로 사용될 프리미엄 참조 이미지 및 브랜드 키트를 생성합니다.
* 기술적 측면: 각 SKILL.md 파일은 YAML 프론트매터가 있는 독립적인 마크다운 파일입니다. 런타임 의존성이나 npm 패키지 설치 없이 .cursor/rules/, .agents/skills/에 드롭하거나 대화에 직접 붙여넣어 사용할 수 있습니다.
* 프로프트(Prompt)가 아닌 제약(Constraint) 사용: VibeCurb는 "보기 좋게 만들어줘"와 같은 추상적인 프롬프트 대신, 디자인 신호 추출, 이해 증명, 참조 기반 빌드, 최종 검증과 같이 구체적이고 검증 가능한 제약을 사용합니다.

시사점

VibeCurb는 AI 코딩 에이전트가 생성하는 UI의 평균적인 품질을 극복하고, 개발자가 원하는 디자인 방향을 더 정확하게 구현하도록 돕는 제약 기반 접근 방식을 제공합니다.