Frontend Design 리뷰: 생성한 티가 나지 않는 화면을 만드는 Anthropic 공식 스킬

AI가 만든 웹 페이지는 대부분 똑같이 생겼습니다. 따뜻한 크림색 배경, 세리프 헤드라인, 테라코타 액센트. 아니면 거의 검은 페이지에 산성 그린 하이라이트 하나. 아니면 제품이 무엇이든 똑같은 둥근 SaaS 카드와 똑같은 부드러운 그림자. 기본값이 이제 너무 알아보기 쉬워서 사용자는 AI가 만든 페이지를 1초 만에 알아봅니다.

Frontend Design은 그 문제에 대한 Anthropic의 공식 해답입니다. Claude를 만드는 팀의 디자인 스킬로, 공식 anthropics/skills 저장소에 들어 있습니다. 이 저장소의 GitHub 스타는 19만에 가깝고, skills.sh 설치 수는 약 100만 회로 생태계 전체에서 가장 많이 쓰이는 스킬 중 하나입니다. 그 조언은 체크리스트가 아니라 현장에서 일하는 디자인 리드의 말처럼 읽힙니다.

Frontend Design란?

Frontend Design은 SKILL.md 파일 하나로, 에이전트에게 모든 화면을 고객마다 뚜렷한 비주얼 정체성을 부여하기로 유명한 스튜디오의 디자인 리드처럼 다루라고 지시합니다. 브리프가 주인입니다. 주제와 대상 사용자, 페이지가 해야 할 일이 색상과 서체, 레이아웃을 결정합니다. 브리프가 비워둔 축이 있으면 에이전트는 그 자유를 범용 기본값에 쓰지 말고 미적인 모험을 하라는 지시를 받습니다.

이 스킬은 지금의 AI 생성 디자인이 어떻게 보이는지에 대해 유난히 솔직합니다. 크림색과 테라코타 히어로에서 모든 헤드라인 위에 붙는 전 대문자 라벨까지, 진부한 표현을 하나씩 지목하고 브리프가 정말 그 모습을 원하지 않는 한 손대지 말라고 금합니다.

핵심 기능

1. 피해야 할 모습을 지목한 목록

스킬은 가장 흔한 AI 디자인 특징을 목록으로 만듭니다. 테라코타 액센트가 있는 크림색 배경, 산성 그린의 거의 검은 페이지, 가는 선의 신문식 레이아웃, 똑같은 SaaS 카드 키트, 장식용 그라데이션. 이름을 붙이면 피할 수 있게 됩니다.

2. 주제에서 출발하는 디자인 방향

코드를 쓰기 전에 에이전트는 주제에 뿌리를 두고 디자인해야 합니다. 제품이 무엇인지, 누구를 위한 것인지, 페이지가 무엇을 해야 하는지. 어린이용 장난감과 금융 애널리스트용 대시보드가 같은 대접을 받아서는 안 되며, 스킬은 이를 분명히 말합니다.

3. 두 단계 프로세스: 계획하고 만들기

먼저 색상과 서체, 레이아웃, 원칙의 토큰 시스템을 담은 간결한 디자인 계획을 세우고 짧은 문장과 ASCII 와이어프레임으로 그립니다. 계획을 브리프에 비춰 범용 기본값처럼 읽히는 부분이 없는지 확인하고 수정한 뒤에야 코드로 옮깁니다.

4. 개성으로서의 타이포그래피

서체가 페이지의 개성을 담당합니다. 스킬은 구체적인 규칙을 줍니다. 한두 가지 서체, 두 가지라면 명확히 구분할 것. 행 길이는 80자 미만. 헤드라인에서 단어 하나에만 색상 액센트를 주지 말 것. 내용 위에 불필요한 라벨을 두지 말 것. 문구는 장식이 아니라 디자인 내용으로 다룹니다.

5. 절제와 자기 비판

대담함은 한 곳에만 쓰고 나머지는 조용하고 절제되게. 품질의 바닥을 지키되 떠벌리지 말 것. 모바일까지 반응형, 보이는 키보드 포커스, 모션 감소 설정 존중, 접근 가능한 색상. 에이전트는 만들면서 스스로를 비판하고 환경이 허용하면 스크린샷을 찍어 검토하라는 지시를 받습니다.

사용 방법

skills CLI로 설치합니다. 아래 명령은 Anthropic 공식 저장소에서 이 스킬만 가져옵니다.

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

그 뒤 원하는 페이지를 평소 말로 설명합니다. 무엇을 위한 것이고 누가 쓰는지 포함해서 말입니다. 에이전트는 먼저 디자인을 계획하고 브리프에 비춰 계획을 확인한 뒤 만듭니다. 결과에 피드백을 주면 코드뿐 아니라 계획도 수정해 줍니다. 같은 저장소에서 Claude Code 플러그인으로도 설치할 수 있습니다.

누구에게 좋을까?

에이전트에게 랜딩 페이지나 대시보드, 프로토타입, 마케팅 사이트를 만들게 하는 사람이라면 누구나 설치해야 합니다. 디자이너 없이 페이지를 출시하는 창업자와 솔로 개발자, AI가 만든 페이지가 모두 같은 템플릿처럼 보이는 데 지친 팀에 특히 가치가 있습니다. 순수 백엔드 작업에서는 발동하지 않으므로 설치해 둬도 비용이 들지 않습니다.

가격

Frontend Design 설치와 사용은 무료이고 스킬 자체에 비용이 들지 않습니다. 단 한 가지 조건이 있습니다. anthropics/skills 저장소는 소스 공개이지 오픈소스가 아닙니다. 라이선스 파일은 독점 라이선스이며 사용은 당신과 Anthropic 사이의 계약을 따릅니다. 자료를 복사하거나 Anthropic 서비스 밖에 복사본을 두거나, 파생물을 만들거나 배포해서는 안 됩니다. 문구를 다른 곳에 재사용하기 전에 라이선스 파일을 읽어보세요.

장점과 단점

장점: Claude 뒤에 있는 팀이 써서 조언이 모델의 실제 동작과 맞습니다. 진부한 표현을 피하는 목록만으로도 설치할 가치가 있습니다. 코드로 바로 가는 것이 아니라 진짜 두 단계 프로세스입니다. 약 100만 회 설치로 조언이 실전에서 단련되었습니다.

단점: 라이선스가 MIT나 Apache가 아닌 독점 소스 공개라 재배포가 제한됩니다. 정신적으로는 Claude 우선이라 다른 에이전트에서의 결과는 달라집니다. 모호한 브리프는 고칠 수 없고 추측 대신 질문합니다. 결과는 결국 모델이 계획을 따르는지에 달려 있습니다.

최종 평가

Frontend Design은 에이전트로 웹 페이지를 출시하는 사람에게 레버리지가 가장 큰 스킬입니다. 도구를 더하는 것이 아니라 에이전트가 만드는 모든 것의 취향을 바꿉니다. 다음 랜딩 페이지 전에 설치하고 지난번에 출시한 페이지와 비교해 보세요. GitHub에서 시도해 보세요: anthropics/skills.