frontend-design은 Claude Code와 함께 쓰는 디자인 가이드 스킬입니다. 컴포넌트나 프레임워크를 제공하지 않는 대신, 코딩 전에 이 화면이 누구를 위한 것인지, 어떤 톤이어야 하는지, 어떤 제약이 있는지, 기억에 남을 요소가 무엇인지 모델이 답하게 하고, 서체·색상·모션·구도·배경에 구체적인 지침을 줍니다.
무엇인가
frontend-design은 Anthropic 공식 skills 저장소에 있는 프론트엔드 디자인 스킬로, Claude Code 같은 코딩 에이전트를 겨냥합니다. 위치는 UI 프레임워크가 아니라 '설계 판단 계층'입니다. 컴포넌트 라이브러리를 대체하지 않고, 코드를 쓰기 전에 설계 판단을 확정해 AI가 만든 화면에서 흔한 템플릿 느낌을 줄입니다. 소스와 설명은 github.com/anthropics/skills에 있습니다.
무엇을 제약하나
구현 전 사고 프레임. 코드를 쓰기 전에 화면의 목적, 대상, 시각적 톤, 기술 제약, 기억에 남을 요소를 먼저 선언하게 하고 그 판단을 과정에 명시적으로 적습니다. 생성 중에 즉흥적으로 정하지 않습니다.
타이포그래피. Inter, Roboto 같은 기본 서체는 분명히 배제하고 개성이 있는 조합을 고르게 합니다. 서체로 성격을 먼저 세우는 셈입니다.
색상과 테마. 흰 배경에 보라 그라데이션 같은 상투적 조합을 피하고, 주 색상에 날카로운 액센트를 더하며 CSS 변수로 일관성을 유지합니다.
모션. 흩어진 마이크로 인터랙션보다 정교하게 짜인 진입 애니메이션을 우선합니다. 순수 HTML은 CSS, React는 모션 라이브러리를 쓸 수 있습니다.
공간 구성. 비대칭, 겹침, 대각선처럼 그리드를 깨는 레이아웃을 권하고 예측 가능한 정형을 피합니다.
배경과 디테일. 그라데이션 메시와 노이즈 텍스처로 분위기를 만들 수 있지만, 디테일은 반드시 전체 미학 테마에 봉사해야 합니다.
사용 방법
자동 실행. Claude Code나 Codex에서 프론트엔드 작업을 요청하면 에이전트가 작업 유형을 인식하고 이 스킬의 제약과 절차를 읽습니다.
명시적 실행. 프롬프트에 'frontend-design skill로 이 페이지를 설계하고 구현해 달라'고 적습니다.
업무 맥락 보충. 제품 유형, 목표 사용자, 브랜드 분위기, 정보 우선순위, 기술 스택, 모바일 요구, 접근성 요구를 알려 줍니다. '예쁘게 해 줘'만으로는 설계 여지가 너무 넓어집니다.
기존 규칙 먼저 읽기. 이미 있는 프로젝트에서는 변경 전에 컴포넌트, 스타일 변수, 디자인 규칙을 에이전트가 읽게 해 새 화면이 기존 시스템과 어긋나지 않게 합니다.
기존 컴포넌트 재사용. 컴포넌트 라이브러리가 있으면 Button, Table 등을 재사용하고 개선은 스타일 계층과 조합 방식에 둡니다.
구현 후 검증. 데스크톱과 모바일 스크린숏, 텍스트 넘침, 인터랙션 상태, 테마 색 대비, 모션이 사용을 방해하지 않는지 확인합니다.
어울리는 상황
페이지 전체 구축: 제품 사이트, 캠페인 랜딩 페이지처럼 시각 방향을 처음부터 세워야 하는 화면.
컴포넌트 설계와 리팩터링: React, Vue, Svelte, HTML/CSS 작업의 완성도와 일관성을 높일 때.
기존 화면 비주얼 개선: 아키텍처를 깨지 않고 새로운 설계 판단을 넣을 때.
시안 없는 프로토타입: 고충실도로 동작하는 화면을 빠르게 낼 때.
관리자 화면과 업무 도구: 화려함보다 정보 스캔 효율, 밀도, 상태 명확성이 중요한 화면.
한계
UI 프레임워크나 컴포넌트 라이브러리를 대체하지 않는 설계 가이드입니다.
이미지 생성은 없습니다. 삽화와 사진은 다른 도구가 필요합니다.
결과는 맥락의 충실도에 좌우됩니다. 제품 정보가 적을수록 일반 템플릿으로 돌아가기 쉽습니다.
산출물에는 사람의 검수가 필요합니다. 특히 접근성, 대비, 실제 기기에서의 모습.
자주 묻는 질문
일반 프롬프트와 차이는? 일반 프롬프트는 미적 판단을 운에 맡깁니다. 이 스킬은 목적, 대상, 톤, 제약을 반드시 답할 질문으로 바꾸고 피할 항목과 대안을 구체적으로 제시합니다.
유료인가요? 자료에는 Claude Code와 쓰는 무료 스킬로 적혀 있습니다. 라이선스는 공식 저장소에서 확인하세요.
Vue, Tailwind도 되나요? 됩니다. 프레임워크 비의존 상위 가이드입니다.
디자이너를 대체하나요? 아니요. 재작업을 줄일 뿐, 브랜드 결정과 디자인 시스템은 사람 몫입니다.
자주 묻는 질문
그냥 예쁜 페이지를 만들어 달라고 하는 것과 무엇이 다른가요?
일반 프롬프트는 미적 판단을 모델의 즉흥성에 맡깁니다. 이 스킬은 목적, 대상, 톤, 제약을 반드시 답해야 하는 질문으로 바꾸고, 피해야 할 항목과 대안을 구체적으로 제시합니다.
유료인가요?
자료에는 Claude Code와 함께 쓰는 무료 스킬로 표기되어 있습니다. 라이선스와 이용 조건은 Anthropic 공식 저장소에서 확인해야 합니다.
Vue나 Tailwind에서도 되나요?
됩니다. 프레임워크에 묶이지 않고 상위 설계 가이드로 동작하므로 순수 HTML/CSS, React, Vue, Tailwind, Ant Design 모두와 함께 쓸 수 있습니다.
디자이너를 대체하나요?
아니요. 설계 판단을 구현 전으로 옮겨 재작업을 줄일 뿐, 브랜드 결정과 디자인 시스템은 사람이 정합니다.
