frontend-designcommit 41bbe19SKILL.md · UI·인터랙션

프론트엔드 디자인

디자인 스튜디오 리드의 시각으로 주제에 맞는 색상, 서체, 레이아웃을 골라 틀에 박히지 않은 UI 를 만듭니다.

npx skills add anthropics/skills --skill frontend-design

권한: read-repo
write-files
shell
network
호환 도구: Claude Code
GitHub: 186.0k
출처: 공식 · Anthropic
상태: 스캔 통과
라이선스: Apache-2.0
카테고리: UI·인터랙션
저장소: github.com/anthropics/skills/skills/frontend-design

핵심 규칙

브리프의 표현이 항상 우선하며, 정해지지 않은 부분을 흔한 기본값으로 채우지 않습니다.

실행 단계

01단계주제에 기반하기
주제가 불분명하면 구체적인 주제, 대상, 주요 목적을 제안해 확인하고, 그 분야의 소재와 어휘에서 시각적 선택을 끌어냅니다.
02단계디자인 계획 수립
이름 붙인 4~6개 hex 색상, 서체와 역할, ASCII 와이어프레임으로 비교한 레이아웃 개념, 원칙으로 된 간결한 토큰 체계를 만듭니다.
03단계브리프와 대조
비슷한 요청이면 누구나 도달할 기본값 같은 부분이 있는지 확인하고, 있으면 고친 뒤 무엇을 왜 바꿨는지 설명합니다.
04단계구현과 자기 검토
수정한 계획대로 구현하며 CSS 선택자 우선순위에 주의하고 반응형, 포커스 표시, 모션 감소를 지키며, 가능하면 스크린샷으로 점검합니다.

권한 설명 (SKILL.md 기준)

기능	필요 여부	설명
파일 쓰기	필요	디자인 계획에 따라 프론트엔드 코드와 화면 문구를 작성합니다.
명령 실행	필요 없음	명령 실행을 요구하지 않습니다.
네트워크 송신	필요 없음	네트워크 접근이 필요하지 않습니다.

SKILL.md 프런트매터(YAML)commit 41bbe19

---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---

핵심 규칙

실행 단계

01단계주제에 기반하기

02단계디자인 계획 수립

03단계브리프와 대조

04단계구현과 자기 검토

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬