frontend-design

스킬 · 디자인

프론트엔드 디자인

Anthropic 공식 제휴 링크

화면을 만들 때의 시각 방향과 타이포그래피를 잡아 줍니다. 흔한 템플릿처럼 보이지 않게 하는 데 초점이 있습니다.

한눈에 보기

설치: npx skills add anthropics/skills -g -a claude-code
처음 시킬 말: “이 랜딩페이지가 템플릿 티가 나. 디자인 방향을 다시 잡아줘”
난이도: 개발자용입니다
만든 곳: Anthropic 공식

도도리 AI연구소 · 최종 수정 2026년 10월 4일 · CC BY-NC 4.0

디자인 분야 · 디자인·이미지 용도 · 개발자용입니다.

이럴 때 씁니다
만든 화면이 어딘가 밋밋하고 AI 티가 날 때

frontend-design 스킬 설치 한 줄

Claude Code 용 명령입니다. Claude Code 는 터미널뿐 아니라 데스크톱 앱(Mac·Windows), 웹(claude.ai/code), VS Code·JetBrains 확장으로도 씁니다. 어디서 쓰시든 명령을 넣는 자리에 붙여 넣으시면 됩니다. 터미널로 쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다. 헷갈리기 쉬운 곳은 하나입니다. 대화만 하는 Claude 앱의 채팅창은 Claude Code 가 아니라서 여기에 붙여 넣으면 동작하지 않습니다. 터미널로 쓰실 때만 Node.js 가 따로 필요하며, node -v 를 쳐서 버전이 나오면 준비된 것입니다.

npx skills add anthropics/skills -g -a claude-code

뒤의 두 가지는 붙여 두시는 편이 좋습니다. -g 는 계정 전체에 넣는다는 뜻으로, 없으면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 스킬이 보이지 않습니다. -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다. 이걸 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 Failed to install 이 뜨는데, 실제로는 설치가 된 상태라 헷갈립니다.

frontend-design 스킬 설치 절차 전체

위 한 줄에서 막히셨다면 여기를 보십시오. 터미널로 쓰시는 분을 위해 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다. 데스크톱 앱·웹·편집기 확장으로 쓰시면 터미널 여는 단계는 건너뛰고 명령 입력 칸에 같은 줄을 넣으시면 됩니다.

설치 절차 전문

# frontend-design 설치

## 0. 어디에 붙여 넣나

Claude Code 를 쓰는 방법이 네 가지입니다. 어느 쪽이든 됩니다.

  터미널           macOS 는 터미널, Windows 는 PowerShell
  데스크톱 앱       Mac · Windows 용 Claude Code 앱
  웹              claude.ai/code
  편집기 확장       VS Code · JetBrains

명령을 넣는 자리에 아래 한 줄을 붙여 넣으시면 됩니다. 터미널로
쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다.

헷갈리기 쉬운 곳이 하나 있습니다. 대화만 하는 Claude 앱의 채팅창은
Claude Code 가 아닙니다. 거기에 붙여 넣으면 Claude 가 명령을 글로
읽고 설명만 해 줍니다.

터미널로 쓰실 때만 Node.js 가 따로 필요합니다. node -v 를 쳐서
v20.1.2 처럼 버전이 나오면 준비된 것입니다. "찾을 수 없습니다" 가
나오면 nodejs.org 에서 LTS 버전을 먼저 설치하십시오.
(앱·웹·확장에는 이미 들어 있습니다.)

  macOS    Spotlight(Command + 스페이스)에서 "터미널" 을 여십시오
  Windows  시작 메뉴에서 "PowerShell" 을 여십시오

## 1. 넣기

npx skills add anthropics/skills -g -a claude-code

  성공하면 이 한 줄이 나옵니다.
  Installed 1 skill → ~/.claude/skills/...

  -g 는 계정 전체에 넣는다는 뜻입니다(~/.claude/skills).
  어느 폴더에서 Claude Code 를 열든 쓸 수 있습니다.
  빼면 지금 열려 있는 폴더에만 깔려서(./.claude/skills), 다른 데서
  열면 스킬이 안 보입니다. "깔았는데 안 보인다" 는 대개 이것입니다.

  -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다.
  빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간
  "Failed to install" 이 뜹니다. 실제로는 설치가 끝난 상태인데
  실패한 것처럼 보여 여기서 멈추기 쉽습니다.

  저장소에 스킬이 여러 개면 어느 것을 넣을지 물어봅니다.
  미리 보시려면 --list 를 붙이십시오.

  npx skills add anthropics/skills --list

## 2. Claude Code 를 다시 시작합니다

이미 열어 두셨다면 끝내고 다시 여십시오.
실행 중인 세션은 시작할 때 읽은 목록을 그대로 씁니다.

  터미널이면 claude 를 끝내고 다시 실행합니다.
  데스크톱 앱·웹·편집기 확장이면 그 세션을 새로 엽니다.
  대화만 하는 Claude 앱은 해당되지 않습니다 — 스킬이 들어가지 않습니다.

## 3. 확인

npx skills list -g

  전역으로 넣은 스킬이 이름과 경로와 함께 나옵니다.
  -g 를 빼면 지금 폴더의 스킬만 보이므로 "없다" 고 나올 수 있습니다.

## 4. 쓰기

"프론트엔드 디자인" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

frontend-design 스킬 사용법

처음 세 번은 이 순서로 시키십시오. 지시문을 누르면 복사됩니다.

나오는 것코드가 아니라 방향이 나옵니다. 색, 서체, 여백, 구도와 그 근거입니다.

다음그 방향대로 "구현해줘" 를 따로 시켜야 합니다. 이 스킬은 코드를 짜 주지 않습니다.
나오는 것서체 크기, 굵기, 행간 제안과 이유가 나옵니다.

다음피하고 싶은 느낌을 함께 적으십시오. "예쁘게" 만 쓰면 흔한 결과가 나옵니다.
나오는 것색 조합 후보와 각각의 근거가 나옵니다.

다음디자인 시스템이 이미 있는 팀이면 그 기준을 먼저 따르십시오.

알아 둘 것

코드를 대신 짜 주는 스킬이 아니라 시각 방향을 잡는 스킬입니다. 색, 서체, 여백, 구도의 근거를 함께 답니다. 디자이너와 일할 때 말을 맞추는 용도로도 쓸 수 있습니다. design-taste 계열 스킬과 함께 쓰면 효과가 큽니다.

frontend-design 스킬 안 될 때 확인할 것

코드를 대신 짜 주는 스킬이 아닙니다

시각 방향을 잡아 주는 것이지 구현까지 책임지지 않습니다. 구현은 별도로 시켜야 합니다.

취향을 구체적으로 주지 않으면 일반적인 결과가 나옵니다

'예쁘게' 대신 피하고 싶은 느낌이나 참고할 방향을 말해 주십시오.

언제 쓰고, 언제 안 쓰나

만든 화면이 밋밋하고 AI 티가 날 때 씁니다. 이미 디자인 시스템이 확고한 팀에서는 그 기준을 먼저 따르는 편이 맞습니다.

비슷한 것 중에 왜 이걸

apple-design 은 애플이라는 특정 원칙을 따르게 하고, taste-skill 은 마음에 드는 사이트를 주면 그 수치를 뽑아 옵니다. 둘 다 따라갈 기준이 밖에 있습니다. 이건 기준을 밖에서 가져오지 않고, 흔한 템플릿처럼 보이는 것을 피하는 쪽으로 방향과 타이포를 잡습니다. 닮고 싶은 대상이 이미 있으면 taste-skill 이 빠르고, 무엇을 피하고 싶은지만 분명할 때 이게 맞습니다. 이름이 같은 공식 플러그인 frontend-design 도 있습니다. 겨냥하는 문제는 같고 넣는 방식이 다르니 둘 중 하나만 고르십시오 - 같이 넣으면 지시가 겹칩니다.

UI·화면 감각 스킬 10종을 한자리에서 비교하기
성격이 다른 갈래로 먼저 나누고, 상황별 갈림길로 무엇을 고를지 정리해 두었습니다.

디자인 도구를 고를 때

Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 anthropics/skills 열기

이 작업에 쓰는 장비 제휴 링크

만든 화면을 실제 기기에서 확인하는 작업입니다.

갤럭시 Z 폴드8접이식 화면. 접었을 때와 폈을 때 폭이 두 배 가까이 다릅니다.(삼성전자) 삼성 공식 갤럭시 Z 폴드8 울트라 (1TB) (SM-F976N) (자급제폰) (크림) 3,301,100원

아이패드A16 모델. 만든 화면을 손으로 확인하는 용도입니다.Apple 2025 아이패드 (A16 모델) 636,650원

노트북 거치대화면을 눈높이로 올립니다. 알루미늄, 접이식.애니클리어 프리미엄 알루미늄 노트북 거치대 받침대 AP-1 15,760원

이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이용자가 내는 금액은 달라지지 않습니다.

별점과 댓글

이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

아직 별점이 없습니다. 첫 번째로 남겨 주세요.

별점과 댓글은 로그인한 회원만 남길 수 있습니다. 읽는 데는 제한이 없습니다. 가입은 30초, 무료이고 비밀번호는 없습니다. 가입하고 돌아오면 이 자리에서 바로 씁니다. 회원가입 로그인

불러오는 중…

자주 묻는 것

frontend-design 스킬 추가 방법을 알려 주십시오.

npx skills add anthropics/skills 로 앤트로픽 공식 스킬 저장소를 받으면 그 안에 들어 있습니다. 저장소 전체를 받는 명령이라 다른 공식 스킬도 함께 깔립니다.