AI 웹사이트 디자인이 다 똑같아 보이는 문제는 해결됨. Anthropic이 밝힌 원인은 '토큰 사양' 부족 때문임
The generic AI website look is a solved problem. Anthropic documented exactly what causes it and the fix is a token spec, not a better prompt.
핵심 요약
AI가 생성하는 뻔한 웹 디자인은 프롬프트가 아니라 구체적인 디자인 토큰 사양을 제공함으로써 해결할 수 있음.
- 분포 수렴 현상 — 모델이 학습 데이터의 평균적인 디자인을 선택하여 발생하는 문제임
- 디자인 토큰 사양 — 추상적인 형용사 대신 구체적인 CSS 변수와 폰트 규칙을 명시해야 함
- 프롬프트의 한계 — '현대적인', '창의적인' 같은 모호한 지시는 모델의 자유도를 제한하지 못함
- 공식 해결책 — Anthropic이 권장하는 토큰 기반 설계 방식이 이미 검증된 표준임
AI로 프론트엔드를 만들어 본 적 있다면 기본 설정값은 지겹도록 봤을 거다. Inter 폰트, 흰 배경에 보라색 그라데이션, 가로로 나란히 놓인 카드 세 장, 그 아래 버튼이 달린 중앙 정렬 히어로 섹션까지. 다들 이걸 기발한 프롬프트로 해결하려고 용쓰는데, 사실 이건 이미 원인이 밝혀진 실패 사례고 해결법도 다 나와 있다. 메커니즘만 이해하면 프롬프트 낭비할 일 없다.
원인은 Anthropic이 말하는 '분포 수렴(distributional convergence)'이다. 시각적 디자인을 대충 지정하면 모델은 학습 데이터의 중심값, 즉 웹에서 가장 흔해 빠진 '뻔한 SaaS 템플릿'을 그대로 뽑아낸다. 다들 똑같은 웹 데이터를 학습했으니 어떤 모델을 써도 결과는 똑같다. "모던하게 해줘"나 "창의적으로 해줘" 같은 형용사 프롬프트는 아무짝에도 쓸모없다. 여전히 모호하니까 모델은 그냥 그 뻔한 클러스터 안에서 비슷한 결과물만 내놓는 거다.
해결책은 모호함을 없애는 거다. 형용사가 아니라 토큰(token)을 써야 한다. 구체적인 디자인 토큰을 던져주면 모델이 기본값으로 도망갈 구석이 없어진다.
Use this design system. Follow it exactly.
AESTHETIC: [one line, the intended feeling]
COLOURS (exact hex, as CSS variables):
- Background, surface, primary text, secondary text,
one accent, border. No pure white, no pure black.
FONTS (named, from Google Fonts):
- Headings: [not Inter/Roboto]
- Body: [not Inter/Roboto]
- Mono for data/labels if the UI needs it
SPACING: 4px base, defined scale (8/16/24/40/64).
COMPONENTS: explicit rules for cards (radius, border
vs shadow), buttons (fill, radius), hero layout
(asymmetric, not centered).
AVOID: Inter, Roboto, purple, gradients, pure white,
three-column card default.
프롬프트로 해결 안 되던 게 이걸로 되는 이유는 구체성이 모델의 '기본값 회귀'를 차단하기 때문이다. 평균값으로 수렴할 여지를 아예 안 주니까 네가 시킨 대로 만들 수밖에 없다. Anthropic도 이 토큰 기반 원리를 적용한 공식 프론트엔드 디자인 스킬을 내놨고, 이미 56만 5천 번 넘게 설치됐으니 이건 임시방편이 아니라 공식 해결법이다.
나는 이 구조를 그대로 써서 기술, 다크 모드, 에디토리얼, 미니멀, 브루탈리즘 등 각 제품 유형에 딱 맞는 10가지 완성형 시스템을 만들어 뒀다. 필요하면 여기서 확인해 봐라.
