https://www.claude.com/blog/improving-frontend-design-through-skills

LLM에게 지시 없이 랜딩 페이지를 만들도록 요청하면, 거의 항상 Inter 폰트와 흰색 배경에 보라색 그라데이션, 미니멀한 애니메이션을 사용하는 경향이 있다.

문제는 바로 분포적 수렴에 있다. 모델은 샘플링 과정에서 학습 데이터의 통계적 패턴을 바탕으로 토큰을 예측한다. 웹 학습 데이터에는 보편적으로 적용 가능하고 누구에게도 불쾌감을 주지 않는 안전한 디자인 선택지가 압도적으로 많다. 특별한 지시가 없으면 Claude는 이렇게 확률이 높은 중앙값에서 샘플링하게 된다.

고객용 제품을 개발하는 개발자에게 이렇게 일반적인 미학은 브랜드 정체성을 훼손하고, AI가 생성한 인터페이스임이 한눈에 들어와 무시당하기 쉽다.

조정 가능성의 과제

좋은 소식은 Claude가 올바른 프롬프트를 통해 높은 조정 가능성을 보인다는 점이다. “Inter와 Roboto 폰트는 피해 달라”거나 “단색 대신 분위기 있는 배경을 사용해 달라”는 지시를 내리면 결과가 즉시 개선된다. 이런 지시에 대한 민감성은 장점이다. 다양한 디자인 컨텍스트, 제약 조건, 미적 선호도에 맞게 조정할 수 있다는 의미다.

하지만 실제로는 과제가 있다. 작업이 전문화될수록 더 많은 컨텍스트를 제공해야 한다. 프론트엔드 디자인에는 타이포그래피 원칙, 색상 이론, 애니메이션 패턴, 배경 처리 등에 대한 효과적인 지침이 필요하다. 어떤 기본값을 피할지, 어떤 대안을 선호할지 여러 차원에서 명시해야 한다.

이 모든 것을 시스템 프롬프트에 담을 수 있지만, 그러면 모든 요청(파이썬 디버깅, 데이터 분석, 이메일 작성 등)에 프론트엔드 디자인 컨텍스트가 함께 전달된다. 핵심 질문은 이렇다: 관련 없는 작업에 영구적인 컨텍스트 오버헤드를 추가하지 않으면서, 정확히 필요한 순간에 도메인 특화 지침을 어떻게 제공할 것인가?

스킬: 동적 컨텍스트 로딩

스킬은 바로 이런 목적으로 설계됐다. 영구적인 오버헤드 없이 필요한 시점에 특수한 컨텍스트를 제공하는 것이다. 스킬은 지침, 제약 조건, 도메인 지식을 담은 문서(주로 마크다운)로, 클로드가 간단한 파일 읽기 도구를 통해 접근할 수 있는 특정 디렉토리에 저장된다. 클로드는 실행 시 필요한 정보를 동적으로 로드하기 위해 이 스킬을 활용할 수 있으며, 모든 것을 미리 로드하는 대신 점진적으로 컨텍스트를 강화한다.

이러한 스킬과 스킬을 읽는 데 필요한 도구를 갖추면, 클로드는 주어진 작업에 따라 관련 스킬을 자동으로 식별하고 로드할 수 있다. 예를 들어 랜딩 페이지를 만들거나 React 컴포넌트를 생성하라는 요청을 받으면, 클로드는 프론트엔드 디자인 스킬을 로드하고 즉시 해당 지침을 적용할 수 있다. 핵심적인 멘탈 모델은 이렇다. 스킬은 필요할 때 활성화되는 프롬프트와 컨텍스트 리소스로, 특정 작업 유형에 맞는 전문적인 지침을 영구적인 컨텍스트 오버헤드 없이 제공한다.

이를 통해 개발자는 시스템 프롬프트에 다양한 작업에 대한 지침을 무리하게 집어넣어 컨텍스트 윈도우를 과부하시키지 않으면서도 클로드의 조정 가능성이라는 장점을 누릴 수 있다. 이전에 설명했듯이, 컨텍스트 윈도우에 너무 많은 토큰이 있으면 성능 저하로 이어질 수 있으므로, 컨텍스트 윈도우의 내용을 간결하고 집중적으로 유지하는 것이 모델의 최상의 성능을 끌어내는 데 매우 중요하다. 스킬은 효과적인 프롬프트를 재사용 가능하고 상황에 맞게 만들며 이 문제를 해결한다.

더 나은 프론트엔드 출력을 위한 프롬프팅 기법

영구적인 컨텍스트 오버헤드 없이도 클로드(Claude)로부터 훨씬 향상된 UI 생성 결과를 얻을 수 있는 방법은 프론트엔드 디자인 스킬을 구축하는 것이다. 핵심 아이디어는 프론트엔드 엔지니어의 사고방식으로 디자인을 접근하는 것이다. 미적 개선 사항을 구현 가능한 프론트엔드 코드로 매핑할수록 클로드의 실행 결과가 더 좋아진다.

이러한 통찰을 바탕으로 특정 프롬프팅이 효과를 발휘하는 몇 가지 영역을 확인했다: 타이포그래피, 애니메이션, 배경 효과, 테마 등이다. 이 모든 요소는 클로드가 작성할 수 있는 코드로 명확하게 변환된다. 프롬프트에 이를 구현할 때는 상세한 기술 지침이 필요하지 않으며, 이러한 디자인 요소에 대해 더 비판적으로 사고하도록 유도하는 타겟팅된 언어만으로도 더 강력한 결과를 이끌어낼 수 있다. 이 접근 방식은 컨텍스트 엔지니어링 블로그 글에서 제시한 지침과도 일맥상통한다. 정확한 헥스 코드를 지정하는 저고도(low-altitude)의 하드코딩 로직과 공유 컨텍스트를 가정하는 모호한 고고도(high-altitude) 지침이라는 두 극단을 피하면서 적절한 고도에서 모델을 프롬프팅해야 한다는 것이다.

타이포그래피

타이포그래피를 프롬프팅을 통해 조절할 수 있는 한 가지 차원으로 살펴보자. 아래 프롬프트는 Claude가 더 흥미로운 서체를 사용하도록 유도한다:

<use_interesting_fonts>
타이포그래피는 즉각적으로 품질을 전달한다. 지루하고 평범한 서체는 피한다.

절대 사용하지 말 것: Inter, Roboto, Open Sans, Lato, 기본 시스템 서체

효과적이고 인상적인 서체 예시:
- 코드 스타일: JetBrains Mono, Fira Code, Space Grotesk
- 에디토리얼: Playfair Display, Crimson Pro
- 테크니컬: IBM Plex 패밀리, Source Sans 3
- 독특한 스타일: Bricolage Grotesque, Newsreader

페어링 원칙: 높은 대비 = 흥미로움. 디스플레이 + 모노스페이스, 세리프 + 지오메트릭 산스, 가변 서체로 다양한 두께 활용.

극단적인 조합 사용: 100/200 두께 vs 800/900, 400 vs 600은 피한다. 크기는 3배 이상 차이, 1.5배는 피한다.

하나의 독특한 서체를 선택해 과감하게 사용한다. Google Fonts에서 로드한다.
</use_interesting_fonts>

기본 프롬프트로 생성된 결과:

타이포그래피 섹션이 추가된 기본 프롬프트로 생성된 결과

‍

흥미롭게도, 더 흥미로운 서체 사용을 요구하면 모델이 디자인의 다른 측면도 개선하는 경향이 있다.

타이포그래피만으로도 상당한 개선이 가능하지만, 서체는 단지 한 가지 차원에 불과하다. 전체 인터페이스에 걸친 통일된 미학은 어떨까?

테마 기반 디자인

디자인 측면에서 또 다른 접근 방법은 잘 알려진 테마와 미학에서 영감을 받은 스타일을 적용하는 것이다. 클로드는 다양한 인기 테마에 대한 풍부한 이해를 바탕으로 프론트엔드 디자인에 특정 미학을 구현할 수 있다. 다음은 그 예시다:

<always_use_rpg_theme>
RPG 테마로 항상 디자인한다:
- 환상적인 색상 팔레트와 극적이고 풍부한 톤 사용
- 장식적인 테두리와 프레임 요소
- 양피지 질감, 가죽 장정 스타일, 오래된 느낌의 소재
- 웅장하고 모험적인 분위기와 극적인 조명 효과
- 중세풍 세리프 타이포그래피와 장식적인 헤더
</always_use_rpg_theme>

이렇게 하면 다음과 같은 RPG 테마의 UI가 만들어진다:

타이포그래피와 테마를 적용하면 목적에 맞는 디자인을 만들 수 있다. 하지만 각 요소를 수동으로 지정하는 것은 번거롭다. 이러한 모든 개선 사항을 하나의 재사용 가능한 자산으로 결합할 수는 없을까?

범용 프롬프트

동일한 원칙이 다른 디자인 요소에도 적용된다. 모션(애니메이션과 마이크로 인터랙션)을 유도하는 프롬프트는 정적 디자인이 부족한 세련미를 더하고, 흥미로운 배경 선택으로 모델을 이끌면 깊이와 시각적 매력을 창출한다. 이 부분이 포괄적인 스킬의 진가가 드러나는 지점이다.

이 모든 요소를 종합해 ~400토큰 분량의 프롬프트를 개발했다. 이는 컨텍스트를 부풀리지 않을 정도로 간결하면서도(스킬로 불러올 때도 마찬가지) 타이포그래피, 색상, 모션, 배경 등 프론트엔드 출력을 극적으로 개선한다:

<frontend_aesthetics>
여러분은 흔히 볼 수 있는 일반적인 결과물로 수렴하는 경향이 있다. 프론트엔드 디자인에서 이는 사용자들이 "AI 잡동사니" 미학이라 부르는 현상을 초래한다. 이를 피하고 창의적이며 독특한 프론트엔드를 만들어 사용자를 놀라게 하고 즐겁게 하라.

중점을 둘 요소:
- 타이포그래피: 아름답고 독특하며 흥미로운 폰트를 선택하라. Arial이나 Inter 같은 평범한 폰트는 피하고, 프론트엔드 미학을 높여주는 특색 있는 선택을 하라.
- 색상 & 테마: 일관된 미학을 유지하라. CSS 변수를 활용해 일관성을 확보하라. 강렬한 액센트와 함께 주조 색상을 사용하면 소극적이고 고르게 분포된 팔레트보다 효과적이다. IDE 테마나 문화적 미학에서 영감을 얻어라.
- 모션: 애니메이션을 활용해 효과와 마이크로 인터랙션을 구현하라. HTML에서는 CSS 전용 솔루션을 우선시하라. React를 사용할 때는 Motion 라이브러리를 활용하라. 영향력이 큰 순간에 집중하라: 잘 구성된 페이지 로드와 단계적 요소 공개(animation-delay)가 산발적인 마이크로 인터랙션보다 더 큰 즐거움을 준다.
- 배경: 단색을 기본값으로 사용하지 말고 분위기와 깊이를 창출하라. CSS 그라디언트를 겹치거나 기하학적 패턴을 사용하거나 전체 미학과 어울리는 상황별 효과를 추가하라.

피해야 할 일반적인 AI 생성 미학:
- 과도하게 사용되는 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트)
- 진부한 색상 구성(특히 흰색 배경에 보라색 그라디언트)
- 예측 가능한 레이아웃과 컴포넌트 패턴
- 특정 상황에 맞는 개성이 부족한 틀에 박힌 디자인

창의적으로 해석하고 문맥에 맞게 진정으로 설계된 듯한 예상치 못한 선택을 하라. 밝은 테마와 어두운 테마, 다양한 폰트, 다양한 미학을 번갈아 사용하라. 여러분은 여전히 Space Grotesk 같은 흔한 선택으로 수렴하는 경향이 있다. 이를 피하라: 틀에서 벗어나 사고하는 것이 중요하다!
</frontend_aesthetics>

위 예시에서는 먼저 클로드에게 문제와 해결하려는 목표에 대한 일반적인 컨텍스트를 제공한다. 모델에 이러한 종류의 상위 수준 컨텍스트를 주는 것이 출력을 조정하는 데 유용한 프롬프트 전략임을 발견했다. 그런 앞서 논의한 개선된 디자인 요소들을 확인하고 모델이 모든 차원에서 더 창의적으로 사고하도록 유도하는 구체적인 조언을 제공한다.

마지막에는 클로드가 다른 지역 최적점으로 수렴하는 것을 방지하기 위한 추가 지침도 포함했다. 특정 패턴을 피하라는 명시적 지침이 있더라도 모델은 여전히 Space Grotesk 같은 일반적인 선택으로 되돌아갈 수 있다. “틀에서 벗어나 생각하라”는 최종 리마인더는 창의적 변화를 강조한다.

프론트엔드 디자인에 미치는 영향

이 스킬을 활성화하면 클로드의 출력 결과가 다양한 프론트엔드 디자인 유형에서 개선된다:

예제 1: SaaS 랜딩 페이지

AI가 생성한 일반적인 SaaS 랜딩 페이지. Inter 폰트, 보라색 그라데이션, 표준 레이아웃 사용. 스킬 미적용 상태.

동일한 프롬프트에 프론트엔드 스킬을 적용해 생성한 결과. 독특한 타이포그래피, 통일된 색상 구성, 레이어링된 배경이 특징이다.

예제 2: 블로그 레이아웃

AI가 생성한 기본 시스템 폰트와 평면적 흰색 배경의 블로그 레이아웃. 스킬 미적용.

동일한 프롬프트와 프론트엔드 스킬을 사용해 생성한 블로그 레이아웃. 에디토리얼 타이포그래피와 공간 감각이 살아있다.

예제 3: 관리자 대시보드

AI가 생성한 표준 UI 컴포넌트와 최소한의 시각적 계층 구조를 가진 관리자 대시보드. 스킬 미적용.

동일한 프롬프트와 프론트엔드 스킬을 사용해 생성한 관리자 대시보드. 강렬한 타이포그래피와 통일된 다크 테마, 의도적인 모션 효과가 적용되었다.

claude.ai에서 아티팩트 품질 향상하기

디자인 감각만이 유일한 제약 조건은 아니다. 클로드는 아티팩트를 생성할 때 구조적 제약도 마주한다. 아티팩트는 채팅과 함께 표시되는 코드나 문서 같은 편집 가능한 대화형 콘텐츠다.

앞서 살펴본 디자인 감각 문제 외에도, claude.ai에서 고급 프론트엔드 아티팩트를 생성하는 데 방해가 되는 기본 동작이 있다. 현재 클로드는 프론트엔드 생성 요청을 받으면 단일 HTML 파일에 CSS와 JS를 포함시켜 만든다. 이는 아티팩트로 적절히 렌더링되려면 단일 HTML 파일이어야 한다는 클로드의 이해 때문이다.

개발자가 단일 파일로만 HTML/CSS/JS를 작성할 수 있다면 매우 기본적인 프론트엔드만 만들 수 있을 것이라 예상하는 것처럼, 우리는 더 풍부한 도구를 사용하도록 지시하면 클로드가 더 인상적인 프론트엔드 아티팩트를 생성할 수 있을 것이라 가정했다.

이에 따라 우리는 웹-아티팩트-빌더 스킬을 개발했다. 이 스킬은 클로드의 컴퓨터 사용 능력을 활용해 React, Tailwind CSS, shadcn/ui 같은 모던 웹 기술을 사용해 여러 파일로 아티팩트를 구축하도록 안내한다. 내부적으로 이 스킬은 (1) 기본 React 저장소를 효율적으로 설정하고 (2) 편집 완료 후 Parcel로 모든 것을 단일 파일로 번들링하는 스크립트를 제공한다. 이는 스킬의 핵심 장점 중 하나다. 보일러플레이트 작업을 실행할 스크립트에 접근할 수 있게 해주면 클로드는 토큰 사용량을 최소화하면서도 신뢰성과 성능을 높일 수 있다.

웹-아티팩트-빌더 스킬을 사용하면 클로드는 shadcn/ui의 폼 컴포넌트와 Tailwind의 반응형 그리드 시스템을 활용해 더 포괄적인 아티팩트를 생성할 수 있다.

예제 1: 화이트보드 앱

웹-아티팩트-빌더 스킬 없이 화이트보드 앱 생성 요청 시 클로드는 매우 기본적인 인터페이스를 출력했다:

반면 새 웹-아티팩트-빌더 스킬을 사용하면 클로드는 다양한 도형과 텍스트 그리기 기능이 포함된 더 깔끔하고 기능적인 애플리케이션을 바로 생성했다:

예제 2: 작업 관리 앱

마찬가지로 작업 관리 앱 생성 요청 시, 스킬 없이는 기능적이지만 매우 최소한의 애플리케이션이 생성되었다:

스킬을 사용하면 클로드는 더 다양한 기능을 갖춘 앱을 바로 생성한다. 예를 들어 사용자가 작업에 카테고리와 마감일을 설정할 수 있는 “새 작업 생성” 폼 컴포넌트가 포함된다:

Claude.ai에서 이 새 스킬을 사용해보려면 스킬을 활성화한 후 아티팩트 생성 시 “웹-아티팩트-빌더 스킬 사용”이라고 요청하면 된다.

프론트엔드 디자인 역량을 향상시키는 스킬 활용법

이 프론트엔드 디자인 스킬은 언어 모델의 핵심 원리를 잘 보여준다. 모델은 기본적으로 표현하는 것보다 더 많은 능력을 갖추고 있지만, 분포적 수렴 현상 때문에 적절한 안내가 없으면 제대로 발휘하지 못한다. 시스템 프롬프트에 관련 지시사항을 추가할 수도 있지만, 이 경우 프론트엔드 디자인과 무관한 작업에서도 불필요한 컨텍스트를 항상 포함해야 한다. 대신 스킬을 활용하면 지속적인 안내가 필요한 도구에서 영역별 전문성을 갖춘 도구로 Claude를 발전시킬 수 있다.

스킬은 높은 수준의 커스터마이징이 가능하다. 회사의 디자인 시스템, 특정 컴포넌트 패턴, 산업별 UI 관례 등 필요한 기본 요소를 정확히 정의해 스킬로 구현할 수 있다. 이러한 결정을 스킬로 인코딩하면 에이전트의 사고 과정을 재사용 가능한 자산으로 변환할 수 있다. 개발팀 전체가 활용할 수 있는 조직적 지식이 되며, 프로젝트 전반에 걸쳐 일관된 품질을 보장한다.

이 패턴은 프론트엔드 작업을 넘어 더 넓은 영역에 적용 가능하다. Claude가 광범위한 이해도를 갖추고 있음에도 일반적인 출력만 생성하는 모든 분야가 스킬 개발 후보가 된다. 방법은 일관적이다. 수렴하는 기본값을 식별하고 구체적인 대안을 제공하며 적절한 수준의 안내를 구성한 후, 스킬을 통해 재사용 가능하게 만든다.

프론트엔드 개발에서는 요청마다 프롬프트 엔지니어링 없도 독특한 인터페이스를 생성할 수 있다. 시작하려면 프론트엔드 디자인 쿡북을 참고하거나 Claude Code의 새로운 프론트엔드 디자인 플러그인을 사용해 보자.

영감을 얻었는가? 직접 프론트엔드 스킬을 만들고 싶다면 스킬 생성기를 확인해 보자.

‍

감사의 말
Anthropic 응용 AI 팀(Prithvi Rajasekaran, Justin Wei, Alexander Bricken)과 마케팅 파트너 Molly Vorwerck, Ryan Whitehead가 공동 작성했다.

‍