이게 불편했어요

에이전트에게 페이지를 맡기면 매번 비슷한 얼굴이 나와요. Inter 글꼴, 보라에서 파랑으로 가는 그라디언트, 카드 안의 카드, 제목마다 붙은 둥근 아이콘 타일. 좀 더 눈에 띄게 해 달라고 해도 에이전트는 무엇을 바꿔야 할지 짐작할 뿐이에요.

그래서 이렇게 풀어요

Impeccable은 디자인 손질을 이름 붙은 명령으로 나눠요. 가격 카드를 더 대담하게 하라고 명령과 대상을 주면, 그 한 가지 동작을 위해 쓰인 플레이북을 읽고 그 부분만 고쳐요. critique는 사용성 휴리스틱으로 점수를 매겨 고칠 순서를 정하고, LLM도 API 키도 없이 도는 62개 규칙의 검출기가 에이전트가 고친 UI 파일을 바로 검사해요.

안에서는 이렇게 돌아가요

1. 1

   나 → Claude Code

   /impeccable init프로젝트마다 한 번. 코드를 읽고, 누구를 위한 제품인지처럼 추론할 수 없는 것만 물어요..claude/skills/impeccable/reference/init.md
2. 2

   Claude Code → PRODUCT.md

   PRODUCT.md 작성답을 PRODUCT.md에 적어요. 이후의 모든 명령이 이 파일을 읽어요..claude/skills/impeccable/reference/init.md
3. 3

   나 → SKILL.md와 플레이북

   /impeccable bolder the pricing cards명령과 대상을 주면 SKILL.md의 명령 표가 그 명령의 플레이북으로 보내요..claude/skills/impeccable/SKILL.md
4. 4

   impeccable 엔진 → Claude Code

   impeccable context: PRODUCT.md, DESIGN.md세션마다 한 번 엔진이 맥락 파일과 화면 유형별 메모를 찾아 에이전트에게 넘겨요.crates/context/src/context.rs
5. 5

   SKILL.md와 플레이북 → Claude Code

   reference/bolder.md그 한 가지 동작만을 위해 쓰인 플레이북을 읽고, 고치기 직전엔 craft-floor.md의 금지 목록을 읽어요..claude/skills/impeccable/reference/bolder.md
6. 6

   Claude Code → impeccable 엔진

   Edit·Write 뒤 impeccable hookUI 파일을 고칠 때마다 훅이 빠른 검사를 돌리고, 작업을 끝낼 때(Stop) 전체 규칙으로 다시 봐요..claude/settings.json
7. 7

   impeccable 엔진 → Claude Code

   검출 결과 JSON찾은 문제를 에이전트가 일을 끝냈다고 하기 전에 돌려줘요.crates/hook/src/hook.rs
8. 8

   Claude Code → 고친 화면

   고친 컴포넌트지적을 반영해 고친 화면이 소스에 남아요.

나한테 맞을까요

What was hard

Ask an agent for a page and the same face keeps coming back: Inter, a purple-to-blue gradient, cards inside cards, a rounded icon tile over every heading. Tell it to make the page pop and it can only guess what you mean.

What it does about it

Impeccable splits design work into named commands. Give it a command and a target, such as bolder on the pricing cards, and the agent loads a playbook written for that one move and changes only that part. critique scores the design against usability heuristics and ranks what to fix, and a 62-rule detector that needs no LLM or API key checks each UI file the agent edits.

How it runs inside

1. 1

   You → Claude Code

   /impeccable initOnce per project. It reads your code and asks only what it can't infer, like who the product is for..claude/skills/impeccable/reference/init.md
2. 2

   Claude Code → PRODUCT.md

   writes PRODUCT.mdThe answers go into PRODUCT.md, which every later command reads..claude/skills/impeccable/reference/init.md
3. 3

   You → SKILL.md and playbooks

   /impeccable bolder the pricing cardsA command and a target; the command table in SKILL.md routes it to that command's playbook..claude/skills/impeccable/SKILL.md
4. 4

   impeccable engine → Claude Code

   impeccable context: PRODUCT.md, DESIGN.mdOnce a session, the engine finds the context files and the surface brief and hands them over.crates/context/src/context.rs
5. 5

   SKILL.md and playbooks → Claude Code

   reference/bolder.mdThe playbook written for that one move; right before editing, craft-floor.md and its bans..claude/skills/impeccable/reference/bolder.md
6. 6

   Claude Code → impeccable engine

   impeccable hook after Edit or WriteEvery UI edit gets a quick pass; when the agent stops, a deep pass runs every rule..claude/settings.json
7. 7

   impeccable engine → Claude Code

   findings as JSONWhat it found goes back to the agent before it calls the work done.crates/hook/src/hook.rs
8. 8

   Claude Code → The fixed page

   the fixed componentThe page, changed to answer the findings, stays in your source.

Is it for you