AI 코딩 디자인 — 왜 모든 AI가 똑같은 UI를 만드는가.

Claude Code、Cursor、Windsurf、GitHub Copilot、Cline、Continue 중 하나에 랜딩 페이지를 시켜본 사람이라면 누구나 그 결과를 알아봅니다. 본문용 Inter를 디스플레이 크기로 끌어올린 헤드라인, 보라에서 파랑으로 흐르는 그라데이션, 가로로 나란히 놓인 똑같은 카드 3개, 그리고 히어로 아래의 그 줄 — 「Build something amazing」. 문제는 도구가 아닙니다. 모든 도구가 같은 템플릿 풀에서 학습했다는 게 문제죠. ux-skill은 정확히 그 디폴트들을 CI에서 — LLM 없이, 145개의 결정론적 정규식 규칙으로 — 막아냅니다.

By the ux-skill team · 9분 분량 · MIT 오픈 소스

모든 AI가 만들어내는 8가지 시각적 디폴트

전체 분류는 AI 디자인 지문 분류표에 정리해 두었습니다. 거의 모든 히어로 생성물에 등장하는 8가지는 다음과 같습니다.

1. 디스플레이용으로 쓰인 Inter — 작은 화면 크기에서의 가독성을 위해 설계된 글자체를 90px 헤드라인까지 끌어올립니다. 본래 용도의 정반대.
2. 보라-파랑 그라데이션 — #7C3AED → #3B82F6 계열. 첫 섹션 배경의 단골손님.
3. 가로로 늘어선 동일 카드 3개 — 아이콘 + 한 단어 제목 + 한 문장 부제, 세 번 반복.
4. 모든 요소에 적용된 fade-in-up — 모든 섹션의 모든 직속 자식이 같은 트랜지션을 받음. 역할 구분은 없음.
5. 가운데 정렬 일변도 — 히어로, 카드, 폼, 전부 화면 정중앙 축에.
6. 일반적인 카피 — 「Build something amazing」「Beautiful experiences」「Revolutionizing X」. 제품 고유 명사는 한 개도 없음.
7. 스톡 이미지 URL — 실제 제품 스크린샷이 들어가야 할 자리에 일반 플레이스홀더.
8. 플랫 디자인 위 무거운 그림자 — 「눈에 띄게 하자」와 「플랫이 유행이지」가 충돌해 어딘가 어색한 입체감.

개별로 보면 어느 것도 잘못은 아닙니다. 문제는 이 8개가 한 페이지에 동시에 등장할 때 누가 봐도 「이건 AI가 만든 것」이라는 지문이 된다는 점이죠. 하나라면 어깨를 으쓱하고 넘길 수 있습니다. 같은 above-the-fold에 네 개가 모이면 어떤 도구가 만들었는지까지 짚어낼 수 있습니다.

왜 프롬프트만으로는 부족한가

모든 팀의 첫 반응은 프롬프트에 지시를 더하는 것입니다. 「디폴트 그라데이션 쓰지 마」「제대로 된 디스플레이 글자체 골라」「똑같은 카드 3개 늘어놓지 마」. 한 메시지 동안은 통합니다. 다음 메시지에서 지시는 희석되고, 컨텍스트 윈도우는 부풀고, 지문은 돌아옵니다. 프롬프트로 만든 통제는 확률적이고, 대화 길이와 함께 닳습니다.

필요한 건 결정론적 바닥 — 모델이 코드를 쓴 다음에, 루프 안에 또 다른 LLM 없이 도는 점검입니다. ux-skill이 메우는 자리가 정확히 그 빈틈입니다. 추천기가 앞단에서 모델의 선택지를 좁히고, 린터가 뒷단에서 흘러나오는 디폴트를 쳐냅니다.

확률적인 문제에 확률적인 도구를 더 얹지 말 것

「그럼 두 번째 LLM이 첫 번째 LLM의 결과를 채점하면 되지 않나」라는 안은 꾸준히 떠오릅니다. 그러나 LLM 기반 평가는 LLM 기반 생성과 똑같은 분산을 가집니다. 채점 프롬프트, few-shot 예제, 그날 모델 버전에 따라 결과가 흔들립니다. CI에 필요한 건 매번 같은 판정을 돌려주는 층입니다. 그게 정규식의 유일한 강점이고, 그걸로 충분합니다.

145개의 정규식, LLM 호출 없음, CI에서 실행

린터는 *.tsx、*.jsx、*.vue、*.svelte、*.astro、*.css、*.scss、*.html 모든 파일을 스캔합니다. i와 m 플래그를 단 145개의 정규식을 돌리고, 규칙 ID, 심각도, 파일, 행, 열, 발췌, 제안된 수정안을 담은 JSON을 반환합니다.

# 로컬 lint, 기본값은 high+critical 게이트
$ uxskill lint
[OK] Scanned 142 files in 412ms · 0 findings at threshold high

# 하위 디렉터리 + JSON 출력
$ uxskill lint apps/web/src --json | jq '.summary'
{
  "critical": 0,
  "high": 4,
  "medium": 11,
  "low": 3,
  "total": 18
}

LLM 호출 0회. 파일 200개짜리 Next.js 저장소의 평균 스캔 시간은 콜드 380ms、웜 90ms입니다. 전체 규칙 명세는 정규식 린터 가이드에 공개되어 있습니다.

실제 히어로에서의 Before / After

아래는 Next.js 스타터에서 잘라낸 단순화된 히어로 블록입니다. 세 규칙에 걸리고, exit 0으로 통과하는 재작성본이 그 아래 있습니다. 전환 의도는 같지만, 지문은 다릅니다.

// Before — high 3건
<section className="bg-gradient-to-br
  from-purple-500 via-violet-500
  to-blue-500 py-32">
  <h1 className="font-['Inter']
    text-7xl leading-none">
    Build something amazing.
  </h1>
  <div className="grid grid-cols-3 gap-6">
    <Card icon="Zap" title="Fast" />
    <Card icon="Shield" title="Safe" />
    <Card icon="Heart" title="Loved" />
  </div>
</section>

// After — 0건
<section className="bg-stone-50 py-28">
  <h1 className="font-['Fraunces']
    text-6xl leading-[1.04]
    tracking-tight">
    당신의 TMS가 끝내 배포하지 못한
    화물 라우팅 계층.
  </h1>
  <div className="grid grid-cols-12 gap-6 mt-16">
    <Card className="col-span-7"
      title="화물 통합" />
    <Card className="col-span-5"
      title="운송사 랭킹" />
  </div>
</section>

Before에서는 세 규칙이 발동합니다. text-7xl로 쓰인 Inter, AI 표준 그라데이션, 동일 카드 3개 그리드. After는 Fraunces(디스플레이)와 Inter(본문)을 짝짓고, 플랫 표면을 채택하며, 7-5 비대칭 그리드로 갈아탔습니다. 의도는 같고 지문은 사라졌습니다.

추천기는 바닥을 올린다. 린터는 천장을 친다. 둘 다 필요하다.

Claude Code 디자인 시스템 셋업

Claude Code는 ux-skill의 홈그라운드입니다. 플러그인 마켓플레이스에서의 설치는 두 줄로 끝납니다.

# Claude Code 플러그인 마켓플레이스
$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill

설치하고 나면 Claude Code 세션에 22개의 슬래시 명령이 등록됩니다. /ux-discover는 10개 항목짜리 브리프를 질문 형태로 모으고, /ux-recommend는 5개의 병렬 검색(산업, 스타일, 팔레트, 타이포그래피, 모션)을 돌리며, /ux-persist save는 저장소 루트에 MASTER.md、tokens.css、manifest.json을 씁니다. 이 파일들이 쓰여 있으면 Claude Code는 그 뒤의 모든 세션에서 이를 참고해 코드를 짭니다.

Cursor는 .cursorrules 파일 + MCP 서버 조합, 명령은 uxskill init --target cursor. Windsurf는 .windsurfrules + MCP, uxskill init --target windsurf. GitHub Copilot은 .github/copilot-instructions.md + 디스크 기반 린터, uxskill init --target copilot.

세 가지 설치 경로, 하나의 엔진

같은 Python 패키지가 호환성 매트릭스의 17개 IDE 전부에 닿습니다. 편집기에 가장 가까운 경로를 고르세요:

모든 경로 밑에 깔리는 건 같습니다: 1,182개 카탈로그, 145개 규칙, 160개 브랜드 사양, 22개 명령, 릴리스마다 통과하는 75개 테스트.

관련 글

• 모든 AI 도구가 기본으로 만들어내는 35가지 디자인 지문
• AI 코딩용 정규식 린터 — CI에서 145개 규칙
• Claude Code 안티-슬롭 도구 정직한 랭킹
• Cursor 디자인 플러그인 — 설치 가이드
• README (한국어판)
• 설치 페이지 / MCP 설정