프론트엔드 디자인 (개성 있는 UI 생성)

무엇을 해주나

• 컴포넌트·페이지·앱을 만들 때 먼저 미학적 방향(톤)을 정하고 그에 맞는 실제 동작 코드를 생성하도록 유도합니다.
• 타이포그래피, 컬러/테마, 모션, 공간 구성, 배경·질감 등 5개 축의 구체적 기준을 제시합니다.
• Inter·Roboto·Arial 같은 흔한 폰트, 흰 배경 + 보라 그라데이션 같은 클리셰 조합, 예측 가능한 레이아웃을 명시적으로 금지합니다.
• 미니멀이든 맥시멀이든 "의도성"에 맞춰 코드 복잡도를 조절하도록 지시합니다.

이런 분께 추천

• Claude Code로 랜딩 페이지·대시보드·포트폴리오를 자주 만드는 프론트엔드 개발자
• 디자이너 없이 개발하는 1인 개발자, 인디 해커, 스타트업 팀
• LLM이 만든 UI가 매번 비슷해서 답답했던 분

활용 예시

1. "SaaS 랜딩 페이지 만들어줘" → 에디토리얼/매거진 톤을 잡고 디스플레이 폰트 + 본문 폰트 조합, 비대칭 그리드, 스태거드 페이지 로드 애니메이션까지 적용된 HTML/CSS 생성.
2. "React로 가격표 섹션" → CSS 변수 기반 컬러 시스템과 Motion 라이브러리 기반 호버 인터랙션이 들어간 컴포넌트 생성.
3. "브루탈리즘 스타일 개인 블로그 테마" → 굵은 보더, 그레인 오버레이, 커스텀 커서 등 톤에 일관된 디테일 적용.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/HEAD/frontend-design/skills/frontend-design/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

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