클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

프론트엔드 디자인 디렉션

공식

템플릿 같지 않은, 주제에 밀착한 UI 비주얼 방향을 잡아주는 공식 디자인 리드 스킬.

디자인·UI중급★ 167,132⑂ 19,920AI 점수 9/10마지막 업데이트: 2026. 8. 7.

무엇을 해주나

Claude를 '작은 스튜디오의 디자인 리드'처럼 행동하게 만드는 공식 Anthropic 스킬입니다. 새 UI를 만들거나 기존 화면을 개편할 때, 다음을 체계적으로 수행합니다.

  • 토큰 플랜 먼저: 색상 4~6개(네이밍된 hex), 디스플레이/본문/유틸리티 2개 이상 서체 역할, 레이아웃 컨셉(ASCII 와이어프레임 포함), 그리고 이 페이지를 기억하게 만들 '시그니처 요소' 하나를 먼저 설계합니다.
  • AI 티 나는 기본값 차단: 크림색 배경 + 세리프 + 테라코타, 블랙 배경 + 산성 그린 액센트, 신문형 브로드시트 레이아웃 — 이 세 가지 클리셰를 명시적으로 경계하게 합니다.
  • 자기 비평 루프: 코딩 전에 계획을 브리프와 대조해 '아무 프로젝트에나 쓸 법한' 부분을 찾아 수정하고, 무엇을 왜 바꿨는지 밝힙니다.
  • 품질 하한선: 모바일 반응형, 키보드 포커스 가시성, prefers-reduced-motion 존중.
  • UX 라이팅 가이드: 능동태, 시스템 용어 대신 사용자 용어, 버튼과 토스트 문구 일치, 에러·빈 화면 작성 원칙까지 포함.

이런 분께 추천

  • 랜딩 페이지나 포트폴리오를 만들 때마다 결과물이 비슷비슷하게 나와 답답한 분
  • 디자이너 없이 프로덕트 화면을 혼자 만드는 개발자·1인 창업자
  • 브랜드 아이덴티티가 필요한 클라이언트 작업을 빠르게 시안화해야 하는 프리랜서
  • 마이크로카피(버튼·에러·빈 상태 문구)까지 일관되게 정리하고 싶은 팀

활용 예시

  1. 수제 커피 로스터리 랜딩 페이지: "원두 로스팅 프로파일을 보여주는 원페이지"라고만 던지면, 로스팅 곡선 자체를 히어로 인터랙션으로 삼는 시그니처 아이디어와 함께 팔레트·서체 토큰을 먼저 제안한 뒤 코드를 작성합니다.
  2. SaaS 대시보드 리디자인: 기존 화면 스크린샷과 함께 요청하면, 숫자+그라디언트 같은 템플릿 답안을 배제하고 데이터 자체의 위계를 살린 타입 스케일과 구조를 다시 잡아줍니다.
  3. 온보딩 문구 정리: "Submit" → "변경 사항 저장"처럼 동작 중심으로 라벨을 바꾸고, 버튼·토스트·에러 메시지의 어휘를 하나의 체계로 통일합니다.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 anthropics/skills 의 skills/frontend-design 폴더를 내 ~/.claude/skills/frontend-design/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/anthropics/skills.git && mkdir -p ~/.claude/skills && cp -r skills/skills/frontend-design ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널(맥은 Terminal, 윈도우는 Git Bash 또는 WSL)을 엽니다.
  2. 작업할 임시 폴더로 이동합니다: cd ~/Downloads
  3. 공식 저장소를 내려받습니다: git clone https://github.com/anthropics/skills.git
  4. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  5. 이 스킬만 복사합니다: cp -r skills/skills/frontend-design ~/.claude/skills/
  6. 제대로 들어갔는지 확인합니다: ls ~/.claude/skills/frontend-design (SKILL.md가 보이면 성공)
  7. Claude Code를 재시작한 뒤 /skills로 목록에 나타나는지 확인합니다.
  8. "프론트엔드 디자인 스킬로 우리 팀 소개 랜딩 페이지 만들어줘"처럼 요청하면 자동으로 적용됩니다.
GitHub에서 원본 보기 ↗