AI 코딩 시대의 디자인 규칙 —
왜 모든 AI가 같은 UI를 만드는가
Claude Code, Cursor, Cline, Windsurf, Codex가 같은 prompt를 받으면 거의 같은 화면을 내놓습니다. 본문 서체가 90 픽셀 헤드라인으로 늘어나고, 보라에서 파랑으로 흐르는 그라데이션이 흰 배경 위에 깔리고, 영웅 영역 아래 똑같이 생긴 카드 세 개가 줄을 섭니다. ux-skill은 이 "디폴트"가 머지되기 전에 잡아내는 결정론적 규칙 레이어입니다. 100개의 정규식, 998개의 카탈로그 항목, LLM 호출 0회.
왜 모든 AI가 같은 화면을 만드는가
세 가지 힘이 겹쳐서 그렇습니다.
- 학습 데이터 편향. 2021–2024년 공개된 마케팅 사이트들이 좁은 YC·Vercel 스타일에 과도하게 치우쳐 있습니다. 모델은 그 미학을 "디폴트"로 학습합니다.
- 보상 모델 편향. 학습 후 평가자들이 안전한 선택을 선호했습니다. 밝은 그라데이션과 둥근 카드는 1:1 비교에서 점수를 잘 받습니다. 보상 모델이 그 선호를 정책에 새겨 넣습니다.
- 짧은 prompt. "X를 위한 마케팅 사이트를 만들어 줘" 같은 짧은 prompt는 모든 디자인 결정을 모델에게 맡깁니다. 모델은 매번 자기 분포의 중앙값을 고릅니다.
결과는 한 가지로 수렴합니다. 같은 본문 서체가 같은 큰 사이즈로 늘어나고, 같은 그라데이션이 흰 배경에 깔리고, 같은 세 카드가 줄지어 들어옵니다. 모델이 "나쁜" 것이 아닙니다. 모델은 매번 안전한 중앙으로 손을 뻗고 있을 뿐입니다.
Vibe coding은 속도를 줬습니다. 디폴트는 모든 사이트가 똑같이 보이게 만드는 원인입니다.
AI의 디자인 지문, 한 문단으로
본문 서체가 88–96 픽셀의 디스플레이 사이즈로 늘어나고 행간이 1.0. 보라에서 파랑으로 가는 다단계 그라데이션이 흰 배경 위에 깔림. 영웅 영역 아래 3열 그리드에 똑같이 생긴 카드 세 개 — 작은 아이콘, 한 단어 제목, 한 문장 부제. 제품 고유 명사가 들어가야 할 자리에 일반 자리표시 카피. macOS Retina에서는 예뻐 보이고 Windows ClearType에서는 깨지는 100 무게의 본문. 모든 섹션의 모든 직속 자식 요소에 동일한 fade-in-up.
하나씩 보면 어느 것도 틀린 게 아닙니다. 지문은 "조합"입니다. 하나를 보면 어깨를 으쓱하고, 같은 폴드에서 네 개를 보면 어느 도구가 생성했는지 알 수 있습니다.
prompt만으로는 왜 안 되는가
본능적인 대응은 prompt에 텍스트를 더 넣는 것입니다. "디폴트 그라데이션을 쓰지 마." "세리프 디스플레이 서체를 써." "똑같은 카드 세 개를 나란히 놓지 마." 첫 페이지에서는 효과가 있습니다. 다음 prompt에서는 잊어버립니다. prompt만으로 하는 조정은 확률적이며 컨텍스트 길이에 따라 감쇠합니다.
워크플로에 필요한 것은 결정론적 바닥 — 모델이 쓴 뒤에 매번 도는, LLM이 루프에 들어가지 않는 검사입니다. 이것이 ux-skill이 메우는 공백입니다. 추천기가 모델의 선택지를 앞쪽에서 좁히고, 린터는 디폴트가 슬쩍 빠져나갈 때 모델을 벌합니다.
ux-skill이 vibe coding 워크플로에 끼는 위치
ux-skill은 독립된 Python 패키지입니다. 설치 경로는 세 가지 — Claude Code 플러그인, pip install uxskill, 또는 npx uxskill. 설치 후 엔진은 17개 IDE에서 동작하는 22개 명령을 노출합니다. 가장 많이 쓰는 네 개로 vibe 루프 전체를 처음부터 끝까지 덮을 수 있습니다.
| 단계 | 명령 | 역할 | 산출물 |
|---|---|---|---|
| 1. 브리프 | ux discover | 10개 필드 강제 인터뷰 — 프로젝트 종류, 대상, 톤, 필수, 금기, 참조. | .ux/last-discovery.json |
| 2. 시스템 | ux recommend | 998 카탈로그 위에서 병렬 5경로 조회 — 산업, 스타일, 팔레트, 서체, 모션 — 을 하나의 구조화된 시스템으로 병합. | tokens.css · manifest.json |
| 3. 생성 | 임의의 vibe coding 도구 | Cursor, Claude Code, Cline, Codex, Windsurf, Aider — prompt를 쏜 도구가 토큰에 맞춰 코드를 씁니다. | 저장소 안의 컴포넌트 코드 |
| 4. 게이트 | ux lint | 생성된 코드에 대해 100개의 결정론적 정규식 규칙. LLM 비용 0. high 또는 critical 발견 시 즉시 비정상 종료. | JSON 결과 · CI 실패 |
브리프는 2분, 추천기는 2023년 MacBook Air에서 3초 이내, 린터 자체는 200 파일 Next.js 저장소에서 워밍업 후 90 밀리초. 어느 단계도 외부 API에 토큰을 태우지 않습니다. 설치 후에는 루프 전체가 오프라인으로 돕니다.
브리프는 강제 함수
vibe coding에서 가장 큰 지렛대는, 첫 prompt를 쓰기 전에 브리프를 쓰는 것입니다. 모델은 제약을 필요로 하고, 사람은 위임하기 전에 선택지를 직접 마주해야 합니다.
ux discover는 대화형 prompt로 10개 필드를 순서대로 묻습니다 — 프로젝트 종류, 대상, 주 목표, 3–5단어 톤, 필수, 금기, 브랜드 참조, 밀도, 모션 예산, 접근성 바닥. 실제로 일을 하는 건 "금기" 필드입니다. 여기서 원하지 않는 디폴트를 명시적으로 지목합니다.
$ ux discover [project_type] landing [audience] 한국 B2B SaaS 스타트업, 10-50명 규모 [primary_goal] 데모 예약 [tone] precise, calm, confident, technical [must_have] WCAG AA, 44px 터치 영역 [forbidden] 본문 서체를 디스플레이로 늘리기, 같은 카드 3개 줄세우기, 흰 배경 위 넓은 그라데이션, 100 무게 헤어라인, 모든 자식에 fade-in-up [references] Stripe (clarity), Linear (density), Arc [density] comfortable [motion] subtle, scroll-triggered, no autoplay # .ux/last-discovery.json 에 기록
이후의 모든 명령이 이 파일을 읽습니다. 추천기는 금기 목록을 사용해 후보 팔레트와 모션 프리셋을 걸러내고, 린터는 필수 목록을 사용해 기본 임계값을 끌어올립니다.
100개 규칙, 한 문단으로
린트 카탈로그는 현재 100개로, v2.0.0 출시 시점의 35개에서 늘었습니다. 각 규칙은 정규식, 심각도(low, medium, high, critical), 카테고리(Typography, Color, Layout, Content, Motion, A11y, Quality, Visual, Performance), 한 줄 이유, 한 줄 수정안을 함께 가집니다.
가장 심각도가 높은 항목들은 AI 지문에 곧장 매핑됩니다 — 본문 서체의 디스플레이 전용, 흰 배경 위 광역 그라데이션, 카드 3개 동일 패턴, 자리표시 이름 누출, 아이콘 자리에 박힌 이모지, 헤드라인의 마케팅 동사, 인라인 style 속성, 영웅 이미지의 alt 누락, 핀치 줌을 막는 viewport 태그. 어느 것도 LLM 호출을 요구하지 않습니다. 모두 밀리초 단위로 돕니다.
전체 분류는 AI 디자인 지문 목록에, 엔지니어링 설명은 정규식 린터 글에 있습니다. 같은 엔진, 두 각도.
에디터 안에서 무엇이 바뀌나
Claude Code, Cursor, Windsurf, Cline, Continue, Codex, Aider, Roo Code 중 어디든 ux-skill을 설치하면 워크플로는 다음 흐름이 됩니다.
- prompt를 칩니다. 모델의 컨텍스트에는 이미 디자인 시스템이 들어 있습니다(각 IDE는
tokens.css,manifest.json, 엔진이 써 놓은 IDE 전용 규칙 파일 —.cursorrules,CLAUDE.md,.windsurfrules— 를 읽습니다). - 모델은 자기 디폴트가 아니라 당신의 토큰에 맞춰 코드를 씁니다.
- 파일을 저장합니다. pre-commit 훅이 린트를 돌립니다. diff 안에 high 심각도가 있으면, 커밋은 규칙 id, 줄, 한 줄 수정안과 함께 중단됩니다.
- 모델에게 고치라고 합니다. 컨텍스트 창에 이미 규칙 id가 있습니다. 수정은 몇 초 안에 들어옵니다.
- 다음 커밋이 통과합니다.
머릿속에서 출력과 자기 취향을 맞춰 보는 수동 리뷰 단계가 사라집니다. 취향은 브리프, 시스템, 린트 안에 살아 있습니다. 당신은 vibe 모드를 유지하고, 가드레일이 vibe를 도랑으로 굴리지 않게 받쳐 줍니다.
순수 prompt 조정과의 솔직한 비교
| 방식 | 규칙의 거주지 | 검사 단가 | 1000줄 이후의 표류 |
|---|---|---|---|
| prompt 전용 | .md의 지시 블록 | 0 | 높음 · 컨텍스트 감쇠 |
| CI에서 LLM 평가자 | Claude 또는 GPT의 prompt | ~$0.04/push | 중간 · 비결정적 |
| 자체 ESLint 플러그인 | JS AST 규칙 | ~200ms | 낮음 · 단 직접 작성 |
| ux-skill lint | 100 정규식 · 998 카탈로그 | ~90ms | 낮음 · 결정론적 |
정규식이 잡는 것은 구조적 지문이지 취향이 아닙니다.
린트가 "이 섹션의 리듬이 틀렸어"나 "카피가 차갑게 읽혀"를 판정하는 일은 없습니다. 그것은 리뷰의 몫입니다. 정규식이 확실히 잡아내는 것은 문자열 토큰, 클래스 이름, 16진값, DOM 형태를 가진 모든 지문 — 즉 AI 디폴트의 대부분 — 입니다. 모델이 매번 같은 결과물에 손을 뻗기 때문입니다.
린트 위에 취향 검토를 얹고 싶다면 같은 패키지에 /ux-critique가 함께 들어 있고, 에디터 안에서 필요할 때 돕니다. 이것을 의도적으로 CI에 넣지 않습니다 — CI는 결정론적 바닥의 자리이기 때문입니다.
Cursor와 Claude Code에 붙는 구체적인 방식
Cursor는 저장소 루트의 .cursorrules와 그 아래 .cursor/rules/*.mdc를 읽습니다. Claude Code는 루트의 CLAUDE.md와 프로젝트 스코프의 ~/.claude/projects/<hash>/CLAUDE.md를 읽습니다. ux-skill은 같은 추천에서 두 포맷을 모두 써냅니다. 진실의 원천은 하나(.ux/design-system/MASTER.md), 파생물은 셋(Cursor, Claude Code, 순수 tokens.css)입니다.
설치 가이드: Cursor 설치, Windsurf 설치, GitHub Copilot 설치, Zed 설치.
vibe는 속도, 규칙은 바닥
2026년의 흥미로운 논쟁은 "vibe coding이 이길 것인가"가 아닙니다 — 천 줄 이하 작업에서는 이미 이겼습니다. 진짜 흥미로운 논쟁은, 출력이 인터넷의 다른 모든 vibe coding 페이지와 똑같이 계속 보일 것인가, 아니면 팀이 그 아래 바닥을 깔 것인가입니다.
ux-skill이 그 바닥입니다. 100개 규칙, 998개 카탈로그 항목, 110개 브랜드 사양, 22개 명령, 17개 IDE, 엔진 아래 75개 테스트. MIT 라이선스. 텔레메트리 없음. 추천기가 모델의 중앙값을 끌어올리고, 린터가 바닥을 못 박습니다. vibe는 당신 것입니다.
관련 글
- AI 디자인 지문 목록 — 분류 자체.
- AI 코딩용 정규식 린터 — 엔지니어링 안쪽.
- Vibe coding은 진짜다 — 그러나 AI는 같은 디폴트를 낸다 — 영문판.
- Claude Code를 위한 안티 슬롭 도구 — 순위.