디자인·UI

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

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

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

Claude, GPT, Gemini 등 AI 모델·제공사 브랜드 아이콘의 CDN URL을 즉시 찾아주고 다운로드까지 도와주는 스킬.

짧은 인터뷰와 레퍼런스 이미지 몇 장으로 brand.md·MOTION.md를 만들고, Claude가 작업 전 반드시 읽도록 CLAUDE.md 규칙까지 심어주는 세팅 스킬입니다.

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

사람이 승인한 UI 디자인 수정 사례를 민감정보 없이 로컬 후보 규칙으로 기록하고, 검토·선택적 공유 패키지까지 만드는 StyleSeed 스킬입니다.

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

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

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

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

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

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

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

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

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

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

매출 상위 모바일 앱의 실제 화면·플로우를 Appllama MCP로 조사해 그 결과로 앱 화면을 설계·개선하도록 돕는 스킬.

디자인 철학(선언문)을 먼저 만들고 그 철학대로 포스터·아트워크를 PDF/PNG로 완성해주는 스킬.

알고리즘 '철학 선언문'을 먼저 쓰고, 그것을 시드 기반 p5.js 인터랙티브 작품으로 구현해주는 제너레이티브 아트 스킬.