스킬 · 디자인
프론트엔드 디자인
Anthropic 공식
frontend-design
디자인
화면을 만들 때의 시각 방향과 타이포그래피를 잡아 줍니다. 흔한 템플릿처럼 보이지 않게 하는 데 초점이 있습니다.
이럴 때 씁니다
만든 화면이 어딘가 밋밋하고 AI 티가 날 때
한 줄로 넣기
터미널에 아래 한 줄을 붙여 넣으십시오.
npx skills add anthropics/skills
전체 설치 절차
Claude Code 가 아니거나 개별 스킬만 넣고 싶으실 때 보십시오. 눌러서 펼치면 전체가 나옵니다.
설치 절차 전문
# frontend-design 설치
## 1. 넣기
npx skills add anthropics/skills
--list 를 붙이면 저장소 안의 스킬 목록이 먼저 뜹니다.
여러 개가 들어 있는 저장소라면 골라서 넣을 수 있습니다.
npx skills add anthropics/skills --list
## 2. Claude 를 다시 시작합니다
창만 닫으면 반영되지 않습니다.
Windows 는 작업 표시줄 아이콘에서 종료, macOS 는 Cmd+Q 로 완전히 끄십시오.
## 3. 확인
npx skills list
넣은 스킬 목록이 나옵니다.
보이지 않으면 앱을 완전히 껐다 켰는지 먼저 확인하십시오.
## 4. 쓰기
"프론트엔드 디자인" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.이렇게 시켜 보세요
넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.
알아 둘 것
코드를 대신 짜 주는 스킬이 아니라 시각 방향을 잡는 스킬입니다. 색, 서체, 여백, 구도의 근거를 함께 제시하므로 디자이너와 협업할 때 언어를 맞추는 용도로도 쓸 수 있습니다. design-taste 계열 스킬과 함께 쓰면 효과가 큽니다.
원본 보기
스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.
GitHub 에서 anthropics/skills 열기