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

무엇을 해주나

웹 컴포넌트·랜딩페이지·대시보드·포스터 등 UI를 만들 때, Claude가 코드를 짜기 전에 미학적 방향(톤)을 먼저 정하고 일관되게 밀어붙이도록 유도합니다.

• 타이포그래피: Inter/Roboto/Arial 같은 흔한 폰트 금지, 디스플레이 폰트 + 본문 폰트 조합 제안
• 컬러/테마: CSS 변수 기반의 일관된 팔레트, '보라색 그라데이션 + 흰 배경' 같은 클리셰 배제
• 모션: CSS 위주, React에서는 Motion 라이브러리, 페이지 로드 시 staggered 등장 등 임팩트 있는 순간에 집중
• 레이아웃: 비대칭, 겹침, 그리드 이탈 등 예상 밖 구성
• 배경/디테일: 그라데이션 메시, 노이즈 텍스처, 그레인 오버레이, 커스텀 커서 등

이런 분께 추천

• Claude로 만든 UI가 매번 비슷비슷해서 지루하다고 느끼는 개발자
• 디자이너 없이 랜딩페이지·포트폴리오를 직접 만들어야 하는 1인 개발자/창업자
• 데모, 해커톤, 제안용 프로토타입에서 '보이는 완성도'가 중요한 분

활용 예시

1. "카페 브랜드 랜딩페이지 만들어줘" → 에디토리얼/매거진 톤을 골라 독특한 서체 조합과 비대칭 그리드로 구현
2. "React 대시보드 컴포넌트 스타일링 해줘" → 다크 테마 + 강한 액센트 컬러, Motion으로 카드 등장 애니메이션 적용
3. "이 HTML 페이지 예쁘게 다듬어줘" → 노이즈 텍스처 배경, 그림자, 호버 인터랙션을 추가해 밋밋함 제거

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

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

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