frontend-design
Design & UI
설치
$ npx skills add https://github.com/anthropics/skills --skill frontend-design요약
새 페이지나 앱 화면을 만들 때 평범한 AI식 UI를 피하고 제품 맥락에 맞는 디자인 방향을 잡는 데 유용합니다.
- 목적과 톤이 분명한 프론트엔드 화면을 만들도록 디자인 방향, 타이포그래피, 색, 모션, 공간 구성을 함께 잡아주는 UI 제작 스킬입니다.
- 한국어 큐레이션 기준으로 이 스킬의 핵심을 먼저 정리했습니다.
- 설치는 개별 스킬 페이지의 명령을 그대로 사용합니다.
- 아래 해설 섹션에서 사용 맥락과 주의점을 한국어로 길게 풀어 읽을 수 있습니다.
해설
어떤 스킬인가
frontend-design는 단순히 컴포넌트를 배치하는 스킬이 아니라, 화면의 목적과 인상을 먼저 정한 뒤 코드로 구현하도록 유도하는 디자인 스킬입니다. 랜딩 페이지, 대시보드, 제품 화면, 웹앱처럼 사용자가 실제로 마주하는 인터페이스를 만들 때 디자인 판단을 더 적극적으로 끌어냅니다.
이 스킬은 "예쁜 카드 몇 개"를 만드는 것보다 더 앞단의 질문을 다룹니다. 이 화면을 누가 쓰는지, 얼마나 조밀해야 하는지, 어떤 정보가 먼저 보여야 하는지, 어떤 톤이 제품에 맞는지를 정리한 뒤 타이포그래피, 색상, 모션, 배경 질감, 반응형 제약을 결정하게 합니다.
언제 쓰면 좋은가
처음부터 프론트엔드 화면을 만들어야 할 때 가장 잘 맞습니다. 특히 사용자가 디자인 시안을 주지 않았지만 "괜찮은 화면"을 기대하는 경우, 에이전트가 너무 무난한 템플릿으로 도망가지 않게 잡아주는 효과가 있습니다.
반대로 기존 제품의 디자인 시스템이 강한 프로젝트에서는 이 스킬을 그대로 밀어붙이면 과할 수 있습니다. 그때는 "기존 컴포넌트와 색상 토큰을 반드시 따르라"는 제약과 함께 쓰는 편이 좋습니다.
설치
npx skills add https://github.com/anthropics/skills --skill frontend-design
설치 후에는 "이 화면을 제품 맥락에 맞게 설계하고 구현해줘"처럼 요청하면 됩니다. 구현 후에는 실제 브라우저 스크린샷으로 텍스트 겹침, 모바일 폭, 버튼 크기까지 검증하는 단계가 중요합니다.