Claude Code에 “랜딩 페이지 만들어줘”라고 해본 적 있으신가요? 결과물이 하얀 배경에 파란 버튼, Inter 폰트, 보라색 그라데이션으로 돌아올 때가 많습니다. 다른 AI 에이전트도 크게 다르지 않습니다. 모델이 나빠서가 아닙니다. 에이전트가 “디자인을 어떻게 바라봐야 하는지”에 대한 관점을 가지고 있지 않아서입니다.

Anthropic이 만든 frontend-design 스킬은 이 문제를 정면으로 해결합니다. 스킬을 설치하면 에이전트는 코딩을 시작하기 전에 먼저 타이포그래피·컬러·레이아웃·모션의 방향을 잡고, 프로젝트만을 위한 고유한 미적 관점으로 실제 작동하는 코드를 작성합니다. 이 글에서는 설치 방법부터 실전 활용 시나리오까지 순서대로 안내합니다.

frontend-design 스킬이란?

frontend-design은 Anthropic이 GitHub에 공개한 공식 스킬입니다. skills.sh 마켓플레이스 기준 주간 274,800회 설치로 트렌딩 상위권에 자리 잡고 있으며, Anthropic의 공개 skills 레포지토리(anthropics/skills)에서 관리됩니다.

스킬이 지향하는 핵심 철학은 하나입니다. 코드보다 먼저 디자인 방향을 잡아라. AI가 자동으로 선택하는 기본값 — 흔한 폰트 조합, 예측 가능한 레이아웃, 보편적인 컬러 팔레트 — 을 피하고, 해당 프로젝트에만 어울리는 개성 있는 선택을 하도록 에이전트를 안내합니다.

이 스킬이 해결하는 문제

스킬을 설치하기 전과 후의 차이를 구체적으로 보면 이렇습니다.

바이브코더 관점에서 가장 중요한 변화는 하나입니다. “그럴듯해 보이는 결과물”이 나오는 확률이 크게 올라갑니다. 포트폴리오 사이트, 랜딩 페이지, 대시보드 — 클라이언트나 채용 담당자에게 보여줄 때 “AI가 만들었구나” 느낌이 덜 납니다.

설치 방법

npx skills add https://github.com/anthropics/skills --skill frontend-design

전역 설치 + Claude Code 전용으로 쓰려면 아래처럼 입력합니다.

npx skills add https://github.com/anthropics/skills --skill frontend-design -g -a claude-code

npx는 Node.js가 설치되어 있으면 별도 과정 없이 바로 실행할 수 있는 명령어입니다. 터미널이 익숙하지 않다면 위 한 줄만 그대로 복사해서 실행하면 됩니다.

실전 데모: 포트폴리오 히어로 섹션 만들기

스킬을 설치한 상태에서 Claude Code에 이렇게 요청해 봅니다.

# Claude Code에서 입력
포트폴리오 사이트의 히어로 섹션을 만들어줘.
이름, 직함, 짧은 소개 텍스트, CTA 버튼이 들어가면 돼.
React + Tailwind로 구현해줘.

스킬 없을 때 응답

에이전트가 바로 코드를 작성합니다. 결과물은 대부분 이렇게 생겼습니다.

// 예시 — 스킬 없을 때 나오는 전형적인 패턴
export function Hero() {
  return (
    <section className="bg-gradient-to-r from-purple-600 to-blue-600 text-white py-20">
      <h1 className="text-5xl font-bold font-inter">안녕하세요, 홍길동입니다</h1>
      <p className="text-xl mt-4">풀스택 개발자</p>
      <button className="mt-8 bg-white text-purple-600 px-6 py-3 rounded-lg">
        연락하기
      </button>
    </section>
  );
}

보라~파랑 그라데이션, Inter 폰트, 둥근 버튼. 어디서 본 듯한 UI입니다.

스킬 있을 때 응답

에이전트가 코드를 작성하기 전에 먼저 이런 방향을 제시합니다.

방향을 먼저 잡은 뒤 이 관점을 일관되게 유지하면서 코드를 작성합니다. 결과물은 위 기본값 패턴과 전혀 다른 모습이 됩니다.

내부 동작 원리

frontend-design 스킬이 에이전트에 주입하는 내용은 크게 두 파트입니다.

1. 코딩 전 Design Thinking 단계 강제

스킬은 코드를 작성하기 전에 반드시 네 가지를 확인하도록 안내합니다.

항목	설명
Purpose	이 인터페이스가 해결하는 문제와 사용자
Tone	브루탈 미니멀, 맥시멀리스트, 레트로-퓨처리스틱, 럭셔리, 편집장적, 아르데코 등 극단적 방향 하나 선택
Constraints	프레임워크·성능·접근성 요구사항
Differentiation	사람들이 기억할 단 하나의 포인트

2. 피해야 할 “AI 기본값” 목록

스킬은 에이전트가 자주 선택하는 패턴을 명시적으로 피하도록 지시합니다.

대신 스킬은 이런 요소를 적극적으로 활용하도록 안내합니다.

• 타이포그래피: 디스플레이 폰트 + 바디 폰트를 대조적으로 페어링
• 공간 구성: 비대칭, 겹침(overlap), 대각선 흐름, 그리드를 의도적으로 벗어나기
• 배경과 질감: 단색 대신 그라디언트 메쉬, 노이즈 텍스처, 기하학 패턴, 커스텀 커서
• 모션: 페이지 로드 시 staggered reveal, 스크롤 트리거, 놀랍게 만드는 hover 상태

이럴 때 쓰세요 / 이럴 때는 덜 맞아요

잘 맞는 상황	덜 맞는 상황
포트폴리오·개인 사이트 만들기	기업 내부 관리자 도구
랜딩 페이지·마케팅 페이지 제작	데이터 중심 대시보드 (디자인보다 정보 구조가 우선)
컴포넌트를 시각적으로 돋보이게 하고 싶을 때	이미 디자인 시스템이 강하게 잡혀 있는 팀 프로젝트
클라이언트 프로젝트 초안 시안 제작	접근성 규정이 엄격한 공공기관 사이트
AI 냄새 없는 결과물이 필요할 때	단순한 버그 수정이나 리팩토링 작업

같은 퍼블리셔의 관련 스킬

Anthropic의 anthropics/skills 레포지토리에는 frontend-design 외에도 유용한 스킬들이 함께 있습니다.

스킬 이름	역할
mcp-builder	MCP 서버를 설계·구현할 때 절차와 체크리스트 제공
systematic-debugging	버그·테스트 실패·예상 밖 동작을 분석할 때
brainstorming	기능 추가·컴포넌트 제작 전 창의적 탐색

설치 명령어의 --skill 값만 바꾸면 같은 레포에서 다른 스킬도 바로 추가할 수 있습니다.

npx skills add https://github.com/anthropics/skills --skill mcp-builder
npx skills add https://github.com/anthropics/skills --skill systematic-debugging

자주 묻는 질문 (FAQ)

Q1: frontend-design 스킬은 유료인가요?

npx skills add로 설치되는 스킬 자체는 무료 오픈소스입니다. MIT 라이선스로 공개된 anthropics/skills 레포지토리에서 직접 SKILL.md를 확인할 수 있습니다. 스킬이 내부적으로 추가 외부 API를 호출하지는 않으므로 별도 과금은 없습니다.

Q2: Claude Code 외에도 쓸 수 있나요?

네. skills.sh 기준으로 opencode, Codex, Gemini CLI, GitHub Copilot, amp, kimi-cli 등에서 주간 수십만 건이 설치되고 있습니다. 에이전트가 SKILL.md를 컨텍스트로 읽을 수 있는 환경이라면 어디서든 동작합니다. 다만 에이전트마다 스킬을 적용하는 방식이 조금씩 다를 수 있으므로, 처음에는 Claude Code에서 시작해 보는 것을 권장합니다.

Q3: 디자인 결과물이 매번 다르게 나오는 게 정상인가요?

의도된 동작입니다. 스킬 자체가 “매번 같은 선택을 하지 말 것”을 명시적으로 안내합니다. 프로젝트 맥락·요청 내용에 따라 다른 미적 방향이 채택되므로, 결과물이 달라 보이는 것은 스킬이 올바르게 작동하고 있다는 신호입니다. 일관성이 필요하다면 요청 시 원하는 폰트, 컬러, 레이아웃 방향을 직접 명시하면 됩니다.

Q4: React가 아닌 다른 스택에서도 동작하나요?

스킬은 HTML/CSS/JS, React, Vue 모두를 지원합니다. 요청할 때 사용 스택을 명시해 주면 에이전트가 해당 스택에 맞는 코드를 작성합니다.

---