디자인·UI

템플릿 같지 않은 고유한 시각적 정체성을 잡아 UI를 설계·구현하도록 Claude를 디자인 디렉터처럼 움직이게 하는 스킬.

원하는 분위기나 브랜드 감성을 아키타입 또는 명명된 디자인 시스템으로 골라, 접근성을 깨지 않으면서 디자인 토큰에 반영해 주는 스킬.

간단한 브리프만으로 접근성 검증을 통과하는 라이트/다크 디자인 토큰 시스템과 theme.css를 통째로 만들어 줍니다.

UI를 WCAG 2.2 AA/AAA와 ARIA 패턴 기준으로 점검해 기준번호·심각도·수정안이 담긴 감사표를 만들어 주는 스킬.

하나의 개념을 '진짜 문제 → 실패 → 전환 → 깨달음 → 명명' 서사로 엮어, 잡지 특집 같은 세로 롱폼 HTML 이미지로 만들어 주는 템플릿 스킬.

React·Tailwind·shadcn/ui로 복잡한 claude.ai 아티팩트를 만들고 단일 HTML 파일로 번들링해주는 스킬입니다.

라이브러리 없이 최신 CSS만으로 스크롤 애니메이션, 페이지 전환, 팝오버 등장 효과를 구현하도록 돕는 스킬.

하나의 브리프에서 로고·서체·컬러 팔레트를 묶음으로 만들고, 측정 결과와 함께 비교 카드로 제시한 뒤 선택한 세트의 브랜드 가이드 키트까지 만들어 줍니다.

참조 UI 스크린샷에서 색상·타이포·컴포넌트 규칙을 추출해 디자인 시스템·PRD·구현 프롬프트까지 만들어 주는 스킬입니다.

WCAG 2.2 기준으로 웹 접근성을 점검하고 코드까지 고쳐주는 감사 스킬.

게임 기획서를 받아 시각 아이덴티티·HUD·사운드 방향까지 담은 아트 디렉션 문서(ART_DIRECTION.md)를 만들어 주는 스킬.

레퍼런스 이미지에서 실제 색·타입을 추출하고 프로젝트별 스타일을 고정해, 어디서나 본 듯한 'AI 스타일' UI를 벗어나게 해주는 UI 디자인 스킬.

아이디어나 글을 로컬 unDraw 일러스트와 매칭해 브랜드 색으로 리컬러한 고품질 SVG 한 장으로 만들어 줍니다.

"더 촘촘하게", "더 굵게", "모서리 더 날카롭게" 같은 한 개의 디자인 축만 정해진 단계로 안전하게 조절해주는 스킬입니다.

기존 화면 코드를 닐슨 10대 휴리스틱과 모바일 UX 기준으로 점검해 심각도별 개선 리포트를 만들어 주는 스킬.

컴포넌트나 페이지 코드를 WCAG 2.2 AA 기준으로 정적 점검하고 가능한 부분은 바로 수정해주는 스킬입니다.

shadcn/ui 프로젝트에서 컴포넌트 추가·수정·스타일링을 CLI 기반 정석 워크플로로 처리하게 해주는 스킬.

React+Tailwind부터 SwiftUI·Flutter까지, 디자인 토큰과 접근성이 검증된 완성형 UI 컴포넌트 코드를 생성하는 스킬.

레퍼런스 디자인을 디자인 시스템·스타일·비주얼 이펙트 3차원 JSON으로 추출하고, 그 DNA로 새 페이지를 생성·검증해 주는 스킬.

Canvas 2D로 파티클·플로우 필드·노이즈·프랙탈 아트를 성능 좋게 구현하는 실전 규칙집.