생성형 코딩 에이전트(Generative coding agents)는 강력하지만, 방치할 경우 예측 가능한 그라데이션, 보정되지 않은 간격, 비대하고 구식인 컴포넌트 구조와 같은 시각적 무질서(visual clutter)를 기본값으로 출력합니다. Impeccable은 Paul Bakaus가 제작한 디자인 스킬 패키지로, Claude Code, Gemini CLI, Codex CLI(그리고 Cursor 및 GitHub Copilot 포함) 내에서 직접 실행되어 엄격한 미적 가드레일(aesthetic guardrails)을 강제하며, 각 하네스(harness)에 맞춰 재컴파일된 동일한 규칙 세트를 사용합니다.

의도적인 스킬 디자인(skill design)을 적용함으로써, 에이전트가 일반적인 패턴에서 벗어나 정밀하고 높은 완성도를 가진 웹 경험을 구현하도록 유도할 수 있습니다.

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

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

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

핵심적인 역할을 수행하는 명령어들

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

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

Claude Code나 Cursor에서의 전형적인 흐름은 다음과 같습니다: 진단을 위한 /impeccable audit, 기존 요소를 사용자의 토큰(tokens)에 맞추기 위한 /impeccable normalize, 그리고 커밋(commit) 전 마지막 단계인 /impeccable polish — 각 명령은 동일한 DESIGN.md/PRODUCT.md를 읽어 브랜드에서 벗어나지 않도록 합니다.

이 세 가지는 시작점에 불과합니다. 타이포그래피(typography), 색상(color), 레이아웃(layout), 모션(motion)을 다루는 20개 이상의 추가 명령(/typeset, /distill, /colorize, /layout, /bolder, /quieter, /overdrive 등)이 있습니다. 전체 명령 목록, 설치 문서 및 소스 코드는 공식 저장소 README에서 확인할 수 있습니다.

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

Impeccable은 프론트엔드 아키텍처(frontend architecture)를 강요하지 않습니다. zoneless Angular를 사용할지, Signals를 사용할지, 혹은 어떤 애니메이션 엔진(animation engine)을 선택할지는 여러분의 결정에 달려 있습니다. Impeccable이 하는 일은 여러분이 정의한 시각적 규칙을 일관되게 읽는 것입니다. 엄격한 브랜드 제약 조건이 포함된 DESIGN.md의 예시는 다음과 같습니다:

# 예시용일 뿐입니다 — Markdown(Google Stitch 사양)을 사용하는
# Impeccable의 실제 스키마(schema)가 아닙니다.
brand:
...

모든 모션 엔진이나 아키텍처 결정(GSAP, Lenis, Signals를 사용하는 Angular 등)은 여전히 여러분의 기술 스택(technical stack) 선택 사항입니다. Impeccable은 단지 여러분이 구현하는 동안 에이전트(agent)가 일반적인 시각적 패턴(generic visual patterns)을 다시 도입하지 않도록 유지해 줄 뿐입니다.