이것이 문제입니다. 모든 AI 코딩 에이전트(Cursor, Codex, Claude Code 등)는 수백만 개의 웹사이트로 훈련됩니다. 그 웹사이트들 대부분은 평균적입니다. 따라서 '랜딩 페이지를 만들어줘'라고 프롬프트를 입력하면, 모델은 자신이 본 모든 것의 평균을 제공합니다: 중앙 정렬된 히어로 섹션, 보라색 그라디언트, 세 개의 동일한 기능 카드, Inter 폰트, ease-in-out, 끝. 작동하지 않는 것은 아닙니다. 단지 기본적으로 평범할 뿐입니다.

저는 17살이고 이 문제에 매번 싸우는 것에 지쳤습니다. 그래서 VibeCurb을 만들었습니다: AI 에이전트가 코드를 건드리기 전에 실제로 디자인에 대해 생각하도록 강제하는, 엄격한 제약 조건의 스킬 파일 모음입니다.

작동 방식

모든 스킬은 동일한 4단계 파이프라인을 따릅니다:

1. 디자인 읽기 (Design Read) - 에이전트는 사용자의 참조 이미지, 기존 코드베이스 또는 개요를 읽고 디자인 신호(타이포그래피, 팔레트, 레이아웃, 초점 요소, 간격)를 추출합니다. 여기서는 코드가 작성되지 않습니다.

2. 품질 게이트 (Quality Gate) - 에이스트랙션(추출)이 통과해야만 에이전트가 무언가를 생성할 수 있습니다. 단순히 기본값을 뱉어내는 것이 아니라, 디자인 방향을 이해하고 있음을 증명해야 합니다.

3. 정밀 빌드 (Precise Build) - 코드 생성은 모델의 내장된 '웹사이트' 모양에 대한 아이디어가 아닌, 추출된 내용을 기반으로 이루어집니다. 각 스킬은 자체적인 빌드 시퀀스를 가지고 있습니다.

4. 시각적 차이 분석 (Visual Diff) - 출력물은 구성, 타이포그래피, 색상, 모션, 반응성 전반에 걸쳐 PASS/FAIL 테이블을 사용하여 참조와 비교됩니다. 만약 벗어난 부분이 있다면 포착됩니다.

여기에 또한 인라인 드리프트 거부(drift rejection) 계층도 있습니다. 이 계층은 알려진 AI 기본값(CSS 키워드 ease-in-out 같은 값, AI 특유의 보라색 #7c3aed 그라디언트, 일반적인 글래스모픽 카드, 플레이스홀더 Lorem ipsum 콘텐츠)을 포착하여 출력물에 포함되기 전에 플래그를 지정합니다.

스킬들

각 스킬은 특정 문제 영역을 제약합니다:

• awwwards-hero - 히어로 섹션(Hero sections) 전용. 구현 청사진(implementation blueprints)이 포함된 6가지 문서화된 아키텍처(Cinematic Center, Editorial Split 등)를 제공합니다. 에이전트는 그중 하나를 선택하여 실행합니다.
• awwwards-sections - 가격표(Pricing tables), 벤토 그리드(bento grids), 기능 강조(feature highlights), 푸터(footers). 동일한 파이프라인을 사용하지만 요소 제약 조건이 다릅니다.
• awwwards-motion - 전체 모션 시스템. 스프링 물리(Spring physics), 스크롤 연동 안무(scroll-linked choreography), 모든 가시적 요소에 대한 필수 애니메이션 맵(animation maps). 60fps 강제 적용. 예외 없는 prefers-reduced-motion 게이팅(gating) 적용.
• pixel-perfect - 스크린샷을 입력하면 정확한 코드 복제본을 출력합니다. 모든 폰트, 색상, 간격(spacing) 값이 일치합니다.
• visual-redesign - 못생겼지만 기능적인 코드를 입력하면, 로직을 깨뜨리지 않으면서 디자인된 것처럼 보이는 결과물을 반환합니다.
• imagegen-frontend 및 brandkit-gen - 다른 스킬들의 입력값으로 사용될 프리미엄 참조 이미지와 아이덴티티 보드(identity boards)를 생성합니다.

기술적인 부분

각 SKILL.md는 YAML 프론트매터(frontmatter)가 포함된 독립적인 마크다운(markdown) 파일입니다. 런타임 의존성(runtime dependency)도 없고, 설치할 npm 패키지도 없습니다. 파일을 .cursor/rules/, .agents/skills/에 넣거나 대화창에 직접 붙여넣기만 하면 됩니다. 마크다운 컨텍스트(markdown context)를 읽을 수 있는 에이전트라면 무엇이든 이를 사용할 수 있습니다.

# CLI 설치
npx vibecurb-cli add awwwards-hero

...

각 단계는 다음 단계를 제어(gate)합니다. 이전 단계가 통과될 때까지 코드 생성을 명시적으로 차단하도록 지침이 설계되어 있기 때문에 에이전트는 단계를 건너뛸 수 없습니다. 이는 단순한 제안이 아니라 엄격한 프로토콜(protocol)입니다.

Cursor, Claude Code, Codex, ChatGPT, Gemini CLI, v0, Lovable, AI Studio와 호환됩니다. 마크다운 컨텍스트를 읽을 수 있는 것이라면 무엇이든 가능합니다.

프롬프트가 아닌 제약 조건(constraints)을 사용하는 이유

프롬프트는 "보기 좋게 만들어줘"라고 말합니다. 하지만 제약 조건은 "먼저 팔레트(palette)를 추출하고, 타이포그래피 계층 구조(typography hierarchy)를 이해했음을 증명한 다음, 추출된 내용을 바탕으로 구축하고, 마지막으로 참조 모델과 차이점(diff)을 비교하라"고 말합니다. 차이점은 제약 조건은 검증 가능하다는 것입니다. 에이전트가 품질 게이트(quality gate)를 통과했는지 여부는 명확하며, 모호함이 존재하지 않습니다.

AI는 평균값으로 수렴하는 경향이 있습니다. VibeCurb는 AI를 그 평균값으로부터 끌어올리는 제약 조건(constraint)입니다.

라이브 쇼케이스: vibecurb.pages.dev
GitHub: github.com/Yu-369/VibeCurb