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

프론트엔드 디자인 라우터 (frontend)

UI 구현·리디자인·성능 감사 요청을 디자인 취향/브랜드/성능/디자인 운영 4개 룰셋으로 라우팅해, 시니어 디자이너 수준의 화면을 만들게 하는 스킬.

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

무엇을 해주나

  • 프론트엔드 요청이 들어오면 필요한 참조 파일만 골라 읽는 라우터로 동작합니다. 취향 스킬(미니멀·브루탈리스트·프리미엄 등 12종), 브랜드 디자인 시스템 70종(Linear, Stripe, Vercel, Notion 등), 성능 룰셋, 디자인 운영 룰셋 중 최소 조합을 선택합니다.
  • DESIGN.md 게이트: 컴포넌트 코드를 쓰기 전에 토큰·타이포·간격·모션·접근성·수용된 기술부채를 담은 DESIGN.md를 먼저 만들도록 강제합니다.
  • 성능/품질 게이트: 실제 Playwright Chromium 기반 Lighthouse 감사로 전 카테고리 100점을 목표로 하며, 점수를 위해 애니메이션을 빼거나 콘텐츠를 숨기는 편법을 금지합니다.
  • 레퍼런스 충실도: 스크린샷·목업·URL이 주어지면 computedStyle까지 추출해 토큰·상태·전환을 그대로 재현하고, /visual-qa로 375/768/1280px 검증합니다.
  • ui-ux-db 검색 CLI로 팔레트·폰트 조합·차트 유형·랜딩 구조를 조회할 수 있습니다.

이런 분께 추천

  • "기능은 맞는데 화면이 AI가 만든 것처럼 밋밋하다"는 피드백을 자주 받는 개발자
  • 디자이너 없이 랜딩 페이지·SaaS 대시보드를 직접 만들어야 하는 1인 개발자·스타트업 팀
  • 리액트 프로젝트의 렌더 성능·Core Web Vitals·접근성까지 함께 챙기고 싶은 프론트엔드 엔지니어

활용 예시

  1. "Linear 스타일 랜딩 페이지 만들어줘" → design/README.md + linear.app.md + taste-skill.md + perfection/README.md 로드 후 DESIGN.md 작성 → 프리미티브 쇼케이스 → 페이지 구현 → 시각 QA.
  2. "이 대시보드 디자인이 안 예쁘다, 개선해줘" → redesign-skill.md의 감사 우선 워크플로로 현재 UI를 진단하고 토큰을 추출해 단계적으로 개선.
  3. "사이트 성능 감사하고 빠르게 만들어줘" → 프로덕션 빌드 후 lighthouse-audit.py를 모바일/데스크톱 각 3~5회 실행, 중간값으로 아키텍처 레벨 원인 진단.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

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

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/HEAD/packages/omo-opencode/src/features/builtin-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/omo-opencode/src/features/builtin-skills/frontend 폴더를 내 ~/.claude/skills/frontend/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills/frontend && cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/

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

  1. 터미널을 열고 원하는 작업 폴더로 이동합니다.
  2. 저장소를 복제합니다: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills/frontend
  4. 스킬 전체(references/, scripts/ 포함)를 복사합니다: cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend/* ~/.claude/skills/frontend/
  5. 부속 도구를 준비합니다: Node.js와 Playwright(Chromium), Python 3, 그리고 성능 감사 스크립트 실행용 uv를 설치합니다.
  6. Claude Code를 재시작하고 "랜딩 페이지 디자인해줘"처럼 프론트엔드 작업을 요청해 스킬이 로드되는지 확인합니다.
  7. references/ 하위 파일이 함께 복사되었는지 ls ~/.claude/skills/frontend/references로 점검하세요. 이 파일들이 없으면 라우터가 제대로 동작하지 않습니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION