carve-harness · 적용 전/후 비교
동일한 화면 개발 프롬프트를 하네스 없이 한 번, 하네스를 적용해 한 번 실행한 결과입니다.
차이는 취향이 아니라 규칙이 강제한 것 — 왼쪽은 가드 없는 기본 생성물(AI slop), 오른쪽은 anti-ai-slop 게이트·시각 규칙·안전 규칙을 통과한 산출물입니다.
iframe이 안 보이면 파일을 직접 열어 비교하세요: without-harness.html · with-harness.html
| 요소 | 하네스 미적용 | 하네스 적용 | 강제한 규칙 / 도구 |
|---|---|---|---|
| 배경 | 보라→핑크 그라데이션 + 광선 blur | 흰 배경 + 1px 보더·여백 | anti-ai-slop — 그라데이션·글로우 금지 |
| 제목 | 그라데이션 텍스트(background-clip:text) | 진한 무채색 텍스트 | anti-ai-slop — 텍스트 그라데이션 금지 |
| 카드 | 글래스모피즘(backdrop-blur) · 컬러 그림자 · 상단 컬러바 | 1px 보더 + 여백 | anti-ai-slop — blur·색그림자·카드 상단 컬러바 금지 |
| 아이콘·불릿 | 이모지 불릿(로켓·차트·체크·불꽃·보석) | 무채색 번호·텍스트 | anti-ai-slop — 이모지 불릿 금지 |
| 추천 플랜 | 발광 pill + pulse 애니메이션 + scale 확대 | teal 보더 + "추천" 텍스트 라벨 | anti-ai-slop — 장식 모션·뱃지 남발 금지 |
| hover | scale·translate 변형 장식 | 기능적 상태만(무장식) | anti-ai-slop — hover 변형 금지 |
| 카피 | "Supercharge · Seamlessly · Empower" 등 마케팅 상투어 | 사실 기반 설명 | anti-ai-slop — 마케팅 상투어 금지 |
| 색 | 보라·핑크·주황 다색 남발 | 무채색 + teal 1색(의미에만) | anti-ai-slop — 액센트 1색 |
| 폰트 | system-ui 기본 수렴 | Pretendard + JetBrains Mono(의도 선택) | anti-ai-slop — 기본 폰트 수렴 금지 |
| 스크립트 | 하드코딩 키 + 미검증 innerHTML(XSS) | 키 제거 · textContent | safety.md · common/security.md · 스택 규칙(XSS) |
| 접근성 | label·role 없음 | 시맨틱 태그 · label · aria-live | 스택 규칙(react/nextjs) — a11y MUST |
오른쪽 결과는 운 좋게 잘 나온 게 아닙니다. 시각 작업 전에 anti-ai-slop 스킬이 발동되고, 생성 후 금지 항목(그라데이션·글로우·이모지·장식 모션)을 자가 점검해 재작성하도록 강제됩니다. 안전 문제(하드코딩 시크릿·미검증 HTML)는 safety·보안 규칙과 커밋 시점 pre-commit 게이트가 막습니다.
즉 하네스는 좋은 결과를 "권고"하지 않고 나쁜 결과를 "차단"합니다 — 같은 프롬프트라도 오른쪽이 기본값이 됩니다.
이 화면 데모에서 실제로 작동한 하네스 구성:
anti-ai-slop(시각 게이트), theme-factory(팔레트·폰트, 게이트 하위)safety.md · common/security.md · 스택 컨벤션(XSS·a11y)pretool-guard(시크릿 쓰기 차단) · pre-commit(에이전트 무관 커밋 게이트)