프론트엔드 디자인 (감각적인 UI 생성)

무엇을 해주나

• 컴포넌트/페이지/앱 제작 요청이 들어오면, 코딩 전에 목적·톤·제약·차별점을 먼저 정하도록 유도합니다.
• 미니멀·맥시멀리즘·레트로 퓨처·브루탈리즘·에디토리얼 등 뚜렷한 미학 방향 중 하나를 골라 일관되게 실행합니다.
• 타이포그래피(개성 있는 디스플레이 폰트 + 정제된 본문 폰트), CSS 변수 기반 컬러 시스템, 모션(스태거 로드 애니메이션, 스크롤/호버 효과), 비대칭·그리드 파괴 레이아웃, 그레인·노이즈·그라디언트 메시 같은 배경 디테일까지 챙깁니다.
• Inter/Roboto/Arial 같은 뻔한 폰트, 흰 배경 위 보라색 그라디언트 등 'AI 티 나는' 클리셰를 명시적으로 금지합니다.
• HTML/CSS/JS, React, Vue 등 실제 동작하는 코드로 결과를 냅니다.

이런 분께 추천

• 랜딩 페이지·포트폴리오·데모를 빠르게 만들지만 결과물이 늘 비슷해 보여 답답한 개발자
• 전담 디자이너 없이 제품 UI를 만들어야 하는 1인 개발자·스타트업
• AI로 만든 화면의 '기본 템플릿 느낌'을 벗어나고 싶은 프론트엔드 엔지니어

활용 예시

1. "에스프레소 바 랜딩 페이지를 만들어줘" → 아르데코 기하학 톤 + 개성 있는 디스플레이 폰트 + 스태거 등장 애니메이션이 적용된 단일 HTML/CSS 페이지.
2. "React로 가격표 섹션을 만들어줘" → 어두운 배경에 노이즈 텍스처, 비대칭 카드 배치, Motion 라이브러리 기반 호버 인터랙션.
3. "사진작가 포트폴리오 그리드" → 에디토리얼/잡지 감성의 그리드 파괴 레이아웃과 과감한 네거티브 스페이스 적용.

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

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

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