이 글은 “왜 LLM이 만든 프론트엔드 UI가 다 거기서 거기 같아 보이는지”와 “그걸 Skills라는 기능으로 어떻게 개선할 수 있는지”를 설명하는 내용이다.
출처: https://www.anthropic.com/engineering/why-do-llm-generated-ui-look-the-same
핵심 요약
- LLM에게 아무 말 없이 랜딩 페이지를 만들라고 하면, 대부분 비슷한 폰트(Inter 등), 보라 그라디언트, 단순 레이아웃 같은 “AI 티 나는” 디자인이 나온다.
- 이유는 모델이 학습 데이터에서 가장 흔하고 안전한 패턴(분포의 중심)으로 수렴하기 때문이고, 이를 글에서는 “distributional convergence”라고 부른다.
- 하지만 LLM은 프롬프트를 잘 주면 훨씬 개성 있는 디자인을 만들 수 있고, 이때 반복적으로 쓰는 디자인 가이드를 Skill로 정의해 필요할 때만 불러 쓰자는 것이 글의 핵심 제안이다.
왜 UI가 전부 비슷해지는가
- 모델은 토큰을 생성할 때, 학습 데이터에서 “가장 무난하게 잘 먹히는 조합”을 선택하는 경향이 있다.
- 웹 쪽 학습 데이터에는 Inter 같은 시스템/웹폰트, 보라색 그라디언트, 무난한 카드 레이아웃 같은 “safe한 선택지”가 너무 많기 때문에, 별 제약이 없으면 거기로 계속 수렴한다.
프롬프트로 디자인 방향을 조정하는 방법
- 모델은 “Robotto/Inter 쓰지 마라”, “단색 배경 말고 분위기 있는 배경을 써라” 같이 구체적으로 싫어하는 것·원하는 것을 말해주면 바로 스타일이 바뀐다.
- 글에서는 예시로
<use_interesting_fonts>블록 안에 “절대 쓰지 말 폰트 + 추천 폰트 + 폰트 조합/사이즈/굵기 원칙”을 적어두고, 이걸 포함해서 요청하면 폰트뿐 아니라 전체 UI 퀄리티도 같이 올라간다고 설명한다.
“테마”와 여러 디자인 축을 한 번에 다루기
- 단순히 폰트 말고도, “RPG 테마로 만들어라”처럼 특정 미학(색감, 질감, 테두리, 분위기, 타이포그래피)을 통째로 지정하면 테마에 맞는 UI를 뽑아낼 수 있다.
- 글에서는 타이포그래피, 색/테마, 모션(애니메이션), 배경 네 가지 축을 함께 다루는 ~400토큰짜리
<frontend_aesthetics>프롬프트를 만들어두고, 이걸 적용하면 전반적인 UI 결과물이 확 좋아진다고 소개한다.
왜 Skills가 필요한가
- 이런 가이드를 매번 시스템 프롬프트나 유저 프롬프트에 다 넣으면, (1) 토큰 낭비, (2) 프론트엔드와 상관없는 작업에도 쓸데없이 딸려와서 모델 성능이 떨어진다.
- 그래서 “Skill”이라는 별도 문서로 만들어두고, 필요할 때만 파일 읽기 도구로 불러오는 방식을 쓰자고 한다.
- Skill은 “특정 도메인 작업을 위한, 재사용 가능한 프롬프트/지식 묶음”이고, 모델이 상황에 따라 알아서 적절한 Skill을 로딩해 쓸 수 있다는 점이 핵심이다.
프론트엔드용 Skills의 두 가지 축
-
디자인 스킬(frontend design skill)
- 앞에서 말한 폰트·색·모션·배경 가이드를 한데 묶어, “AI slop” 같은 뻔한 UI 대신 더 독창적인 레이아웃을 출력하도록 유도한다.
-
아키텍처/툴링 스킬(web-artifacts-builder skill)
- 기본적으로는 단일 HTML+CSS+JS 파일만 만들다 보니 구조가 단순해질 수밖에 없기 때문에, React/Tailwind/shadcn/ui를 쓰는 프로젝트 구조를 세팅하고 Parcel로 다시 하나의 HTML로 번들하는 스크립트를 Skill로 제공한다.
- 이 Skill을 쓰면 화이트보드 앱, 할 일 관리 앱 같은 것도 폼 컴포넌트, 카테고리/마감일 필드, 반응형 그리드 등 훨씬 풍부한 기능과 구조로 만들어낼 수 있다고 설명한다.
이 글이 말하는 “일반 원리”
- LLM은 실제로는 더 많은 능력을 갖고 있는데, 기본 프롬프트로는 “가장 안전한 평균값”만 보여주기 때문에 실력이 드러나지 않는 경우가 많다.
- 그래서 해야 할 일은
- 모델이 수렴하는 지루한 기본값을 찾고,
- 그 대신 쓸 구체적인 대안(폰트, 색감, 레이아웃, 툴체인 등)을 정의하고,
- 이걸 적절한 추상화 수준으로 프롬프트/Skill에 넣어 재사용 가능한 자산으로 만드는 것이라고 정리한다.