코딩 에이전트에게 디자인 지시를 명확히 전달하고 AI 특유의 단조로움을 걸러내는 도구
코딩 에이전트에게 '더 세게'라고 말하면, 에이전트가 어떤 방향으로 손을 댈지 정확히 알 수 있게 됩니다. 이 도구는 디자인 지시를 명확한 명령어로 바꾸고, 완성된 화면의 품질을 점검하는 역할을 합니다. 결과적으로 AI가 자주 만들어내는 단조로운 레이아웃과 반복적인 시각 요소를 줄여, 더 개성 있는 인터페이스를 만드는 데 집중할 수 있습니다.
AI가 자주 범하는 디자인 실수
코딩 에이전트에게 특별한 지시 없이 페이지를 만들라고 하면, 특정 패턴이 반복적으로 나타납니다. 크림색 배경에 얇은 세리프 폰트, 보라색에서 파란색으로 넘어가는 그라데이션, 그리고 카드 안에 또 카드를 넣는 구조가 그 예입니다. 이러한 요소들은 모델이나 프로젝트와 무관하게 자주 등장하며, 결과물이 비슷비슷해 보이는 원인이 됩니다. 이 도구는 이러한 'AI 슬롭'이라 불리는 지루한 디자인 요소를 식별하고 수정하는 데 초점을 맞춥니다.
명령어로 디자인 방향을 조율
이 도구는 디자인 의도를 구체적인 명령어로 변환해 에이전트에게 전달합니다. 예를 들어 bolder는 안전한 디자인을 더 강렬하게 바꾸고, quieter는 과한 요소를 누그러뜨립니다. polish는 출시 전 마지막 다듬기를 수행하며, harden은 오류 처리와 국제화 같은 엣지 케이스를 점검합니다. 각 명령어는 특정 디자인 문제를 해결하기 위한 플레이북을 로드하여, 에이전트가 추측하지 않고 정확한 작업을 수행하도록 이끕니다.
검토와 감사로 품질을 검증
디자인이 완성된 후에는 critique와 audit 명령어로 품질을 평가합니다. critique는 사용성 휴리스틱에 따라 디자인을 점수화하고, 우선적으로 수정해야 할 항목을 순서대로 나열합니다. audit는 접근성, 성능, 테마 설정, 반응형 동작을 기술적으로 점검하며, 발견된 문제를 P0(차단)부터 P3(마무리)까지 등급을 매겨 보고합니다. 이 과정을 통해 시각적 아름다움뿐 아니라 실제 사용 환경에서의 기능적 결함도 사전에 발견할 수 있습니다.
62개의 규칙으로 슬롭을 탐지
이 도구의 핵심 기능 중 하나는 결정론적 규칙 기반의 슬롭 탐지기입니다. 62개의 규칙이 과도한 폰트 사용, 낮은 대비, 조밀한 패딩, 건너뛴 헤딩 같은 문제를 자동으로 찾아냅니다. 이 탐지 과정에는 LLM이나 API 키가 필요하지 않아, 코딩 에이전트 내부에서 실시간으로 실행되거나 CI 파이프라인에서 독립적으로 동작할 수 있습니다. 에이전트가 파일을 수정할 때마다 훅을 통해 자동으로 검사되어, 문제가 있는 코드가 최종 결과물에 포함되는 것을 막습니다.
도입 전 확인해야 할 사항
이 도구는 이미 존재하는 인터페이스를 개선하는 데 가장 강점을 보입니다. 새로운 페이지를 처음부터 만드는 것도 가능하지만, 기존 컴포넌트를 지정해 반복적으로 개선하는 방식이 더 효과적입니다. 설치 시 사용 중인 코딩 도구(Claude Code, Cursor, Codex 등)를 감지하고, 디자인 훅을 활성화하도록 안내합니다. 라이브 모드를 사용할 경우 로컬 체크아웃에서만 동작하며, 배포된 사이트나 프로덕션 환경의 CSP를 약화시켜서는 안 됩니다. 또한 텔레메트리는 비활성화할 수 있지만, 시각적 방향성 카탈로그에서 데이터를 가져오는 요청은 계속 발생하므로 이 점을 인지해야 합니다.
