생성형 코드 에이전트(Generative code agents)는 강력하지만, 자유롭게 내버려 두면 기본적으로 시각적 무질서를 만들어냅니다. 예측 가능한 그라데이션, 보정되지 않은 간격, 그리고 무겁고 구식인 컴포넌트 구조가 그것입니다. Impeccable은 Paul Bakaus가 제작한 디자인 스킬 패키지로, Claude Code, Gemini CLI, Codex CLI(Cursor 및 GitHub Copilot 외에도) 내에서 직접 작동하며, 각 하네스(harness)에 맞춰 재컴파일된 동일한 규칙 세트를 사용하여 엄격한 미적 제한을 부과합니다.

의도적인 스킬 디자인(skill design)을 적용하면 에이전트를 일반적인 패턴에서 벗어나게 하고, 정밀하고 시각적 수준이 높은 웹 경험을 생성하도록 강제할 수 있습니다.

스킬 디자인이란 무엇이며 왜 AI 에이전트에게 중요한가?

스킬 디자인(skill design)은 비결정론적(non-deterministic) AI 모델을 위해 결정론적(deterministic) 레일을 구축하는 관행입니다. 에이전트에게

이 워크플로우를 통합할 때 가장 중요한 것은 정확성입니다. Impeccable은 기존의 디자인 시스템 (design system)을 덮어쓰는 대신 존중합니다. 실행 시 코드베이스(토큰, 컴포넌트, Tailwind 설정)를 스캔하고, 일반적인 미학을 강요하는 대신 사용자의 DESIGN.md에서 브랜드 규칙을 불러옵니다. 따라서 만약 당신의 아이덴티티가 미니멀리즘 미학에 기반하고 있다면, 이를 강제하는 올바른 방법은 해당 파일에 직접 선언하는 것입니다. — 제한된 그린 및 핑크 팔레트, #0c1624 기반의 다크 배경, 타이포그래피 및 톤 오브 보이스(tone of voice) 등을 선언하면, 이후의 모든 명령어가 무언가를 생성하기 전에 이를 읽게 됩니다. Impeccable은 그 미학을 대신 결정해주지 않습니다. 대신 당신의 미학이 매 반복(iteration)마다 일관되게 존중될 수 있도록 어휘와 메커니즘을 제공합니다.

실질적인 작업을 수행하는 명령어들

Impeccable은 에이전트와 공유되는 어휘로서 작동하는 23개의 명령어를 노출하며, 각 명령어는 특정 유형의 디자인 개입을 명명합니다. 프로덕션 워크플로우에서 가장 유용한 세 가지는 다음과 같습니다:

• /audit — 프로덕션 품질 검사 단계입니다. 현재 코드에 대해 결정론적 안티패턴 탐지기(58개의 큐레이션된 규칙: 일반적인 그라데이션, 기본 Inter 폰트, 중첩된 카드, 예측 가능한 그림자 등)를 실행하고, 아직 아무것도 수정하지 않은 상태에서 발견 사항을 보고합니다. 코드를 수정하기 전의 진단 단계입니다.
• /normalize — 시스템 내부의 불일치를 수정합니다: DESIGN.md에 정의된 토큰에서 벗어난 간격(spacing), 테두리 반경(border radius), 타이포그래피 크기 또는 색상 사용 등을 바로잡습니다. 에이전트의 여러 세션이 시간이 지남에 따라 미세한 차이를 유발했을 때 유용합니다.
• /polish — 최종 품질 검사 단계입니다. 기존 시스템 내에서 수정을 적용하며(새로운 시스템을 만들어내지 않음), 감지된 "AI 신호(AI signals)"를 제거하고, 결과물을 전달하기 전에 발견 사항이 0개가 될 때까지 탐지기를 다시 실행합니다.

Claude Code나 Cursor에서의 전형적인 워크플로우는 다음과 같습니다: 진단을 위한 /impeccable audit, 기존 요소를 당신의 토큰(tokens)에 맞추기 위한 /impeccable normalize, 그리고 커밋(commit) 전 마지막 단계인 /impeccable polish — 각 명령어는 브랜드 가이드를 벗어나지 않도록 동일한 DESIGN.md/PRODUCT.md 파일을 읽습니다.

이 세 가지는 시작점에 불과합니다: 타이포그래피(typography), 색상(color), 레이아웃(layout), 그리고 움직임(movement)을 다루는 다른 20개의 명령어들(/typeset, /distill, /colorize, /layout, /bolder, /quieter, /overdrive 등)이 더 있습니다. 전체 목록, 설치 문서 및 소스 코드는 리포지토리 공식 README에서 확인할 수 있습니다.

구현 예시: 당신만의 브랜드 규칙

Impeccable은 프론트엔드 아키텍처(frontend architecture)를 강제하지 않습니다(Angular zoneless를 사용할지, 시그널(signals)을 사용할지, 혹은 어떤 애니메이션 엔진을 사용할지 결정하지 않음) — 그 부분은 당신의 몫입니다. Impeccable이 하는 일은 당신이 정의한 시각적 규칙을 일관되게 읽는 것입니다. 엄격한 브랜드 제한 사항이 포함된 DESIGN.md의 예시는 다음과 같습니다:

# 예시용 설명 — Impeccable의 실제 스키마가 아닙니다.
# Impeccable은 Markdown 형식(Google Stitch 사양)의 DESIGN.md/PRODUCT.md를 사용합니다.
brand:
...

어떤 움직임 엔진이나 아키텍처 결정(GSAP, Lenis, Signals를 사용하는 Angular 등)도 여전히 당신의 기술 스택(stack) 결정 사항입니다. Impeccable은 단지 당신이 이를 구현하는 동안 에이전트(agent)가 일반적인(generic) 시각적 패턴을 다시 도입하는 것을 방지할 뿐입니다.