클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

프론트엔드 디자인 라우터

UI 구현·리디자인·성능 감사 요청을 4개 전문 룰셋으로 자동 라우팅해 시니어 디자이너 수준의 화면을 만들게 하는 프론트엔드 총괄 스킬.

디자인·UI고급★ 67,531⑂ 5,507AI 점수 9/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

  • 프론트엔드 요청(신규 구축, 리디자인, 애니메이션 추가, 성능/접근성 감사)을 분석해 필요한 최소한의 참조 파일만 골라 읽게 하는 라우터 역할을 합니다.
  • 4개 룰셋을 상황별로 연결합니다: design(취향 스킬 12종 + 브랜드 디자인 시스템 70종), perfection(Playwright 기반 Lighthouse 100점 기준), ui-ux-db(팔레트·폰트·차트·랜딩 구조 검색 CLI), designpowers(페르소나·접근성·비평·핸드오프).
  • UI 코드 작성 전에 DESIGN.md(토큰·타이포·간격·모션·접근성·기술부채)를 먼저 만들도록 강제하고, 마지막에 /visual-qa로 375/768/1280px 실제 브라우저 검증을 요구합니다.
  • "깔끔하지만 밋밋한" 결과를 실패로 규정하고, 이모지 아이콘 금지·GPU 합성 애니메이션만 허용·의미 없는 모션 금지 같은 공통 원칙을 적용합니다.

이런 분께 추천

  • React/Next.js 등으로 랜딩페이지·제품 UI를 만들며 "AI가 만든 것 같은 디자인"에서 벗어나고 싶은 개발자
  • 스크린샷·Figma 시안·특정 브랜드 스타일을 픽셀 단위로 재현해야 하는 팀
  • Lighthouse 전 항목 100점, Core Web Vitals, WCAG 접근성을 실제 브라우저 측정으로 관리하려는 분

활용 예시

  1. "Linear 스타일 랜딩페이지 만들어줘" → design/linear.app.md + 취향 스킬 + perfection 룰을 로드하고 DESIGN.md 작성 후 구현.
  2. "이 대시보드 살아있는 느낌으로 인터랙션 추가해줘" → interaction-skill.md(beui.dev 카탈로그)를 기존 스타일 스킬 위에 겹쳐 로드해 모션 토큰 기반으로 구현.
  3. "이 사이트 느리고 접근성 점수가 낮아" → perfection/README.md + React 성능 도구 레시피로 프로덕션 빌드에 모바일/데스크톱 3~5회 측정 후 중간값으로 원인 진단.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/HEAD/packages/shared-skills/skills/frontend/SKILL.md

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

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

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

직접 명령으로 설치하기

git clone https://github.com/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 작업할 디렉터리로 이동합니다.
  2. 저장소를 복제합니다: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 스킬을 복사합니다: cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend
  5. references/ 하위 폴더(design, perfection, ui-ux-db, designpowers)와 scripts/가 함께 복사됐는지 확인합니다. 없으면 라우팅이 작동하지 않습니다.
  6. 성능 감사를 쓰려면 Python 3와 uv, Playwright(Chromium)를 미리 설치하세요.
  7. Claude Code를 재시작하고 "랜딩페이지 디자인해줘" 같은 프론트엔드 요청으로 스킬이 로드되는지 확인합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION