Claude Skills로 AI 생성 UI 품질 10배 높이기

Claude한테 랜딩페이지 만들어달라고 했는데, 또 Inter 폰트에 보라색 그라데이션이라고요? 왜 AI가 만든 UI는 다 똑같이 생겼을까요?

문제는 Distributional Convergence입니다. LLM은 학습 데이터에서 가장 빈번한 패턴을 선택하는데, 웹 학습 데이터는 "안전한 디자인"으로 가득하죠. 그 결과 모든 AI 생성 UI가 비슷해 보이고, 브랜드 정체성은 사라집니다.

제가 만든 초기 MVP 제품도 모두 보라색에 같은 그라데이션으로 도배가 되어 저만 겪었던 문제가 아니였네요. 

문제의 본질: 통계가 만든 획일성

LLM은 토큰을 예측할 때 학습 데이터의 통계적 패턴에 의존합니다. 문제는 "안전한 디자인"이 웹 학습 데이터를 지배한다는 거죠.

왜 Inter 폰트와 보라색만 나올까?

→ 누구에게나 통하고, 누구도 싫어하지 않는 선택이 학습 데이터에서 압도적 다수

→ 방향 없이 생성하면 LLM은 이 "고확률 중심"에서 샘플링

→ 결과: 모든 AI 생성 UI가 똑같아 보이고, 브랜드 차별화 불가

그래서 Cluaude가 이를 해결하기 위한 SKILL를 새로 제안하였습니다.

<use_interesting_fonts> Typography instantly signals quality. Avoid using boring, generic fonts. Never use: Inter, Roboto, Open Sans, Lato, default system fonts Here are some examples of good, impactful choices: - Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk - Editorial: Playfair Display, Crimson Pro - Technical: IBM Plex family, Source Sans 3 - Distinctive: Bricolage Grotesque, Newsreader Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights. Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x. Pick one distinctive font, use it decisively. Load from Google Fonts. </use_interesting_fonts>

실제 결과를 적용시  Before/After 비교를 보면 폰트 변경 후 레이아웃과 색상까지 자연스럽게 개선된것을 확인할수 있습니다. 

여러분들도 위 프롬프트를 SKill로 만들어보거나 프롬프트에 직접 넣어서 테스트해보세요