디자인·UI

HTML 기반 슬라이드 덱에서 쓰는 CSS 클래스와 슬라이드 HTML 패턴을 정리한 참조 스킬입니다.

동심원 라운딩, 광학 정렬, 그림자 계층, 아이콘 전환 등 UI 디테일을 정해진 수치대로 점검하고 수정안을 표로 리포트해주는 스킬.

디자인 철학을 먼저 정의하고 그 철학을 한 장의 PDF/PNG 아트워크로 구현해주는 비주얼 디자인 스킬입니다.

흔한 'AI풍' 디자인을 피하고 개성 있는 프로덕션급 프론트엔드 코드를 만들도록 Claude를 안내하는 스킬.

UX 카피 작성부터 디자인 시스템 문서화, 접근성 감사, 개발자 핸드오프, 사용자 리서치 합성까지 6개 모드로 처리하는 디자인 종합 스킬.

막연한 취향을 여러 개의 비교 가능한 시각 시안으로 뽑아내 사용자가 직접 고르게 하는 디자인 방향 탐색 스킬.

Figma 보드에서 디자인한 변경 사항을 Remotion 모션 그래픽 컴포넌트와 브랜드 토큰에 반영하고, 코드 변경도 다시 보드로 되돌려 동기화를 유지합니다.

StyleSeed 디자인 규약에 맞춰 React/Tailwind v4 UI 컴포넌트를 일관된 형태로 생성해 주는 스킬입니다.

소설 원작 자료를 바탕으로 서로 진짜 다른 게임 콘셉트 3안을 만들고, 하드 비토와 트레이드오프로 가장 만들 만한 프로토타입 방향을 고릅니다.

StyleSeed 규칙 세트를 먼저 확정한 뒤 화면을 만들고, 코드 점수와 픽셀 검증 게이트를 통과시킨 결과만 보고하게 하는 빌드 워크플로 스킬입니다.

게임 기획서(GAME_DESIGN.md)를 읽어 비주얼 원칙·카메라·색/광/재질·HUD·사운드까지 정의한 제작용 아트 디렉션 문서를 만들어 줍니다.

앱·관리자·게임 UI와 랜딩페이지 시안을 만들고, 시안이나 스크린샷을 HTML/CSS·기존 프론트엔드 프로젝트·위챗 미니프로그램으로 그대로 복원해 주는 스킬입니다.

공개 웹사이트의 색상·폰트·간격 등 디자인 요소를 추출해 프로젝트용 토큰 파일을 만들어 준다.

WCAG 2.2 AA 기준, ARIA 패턴, 키보드 내비게이션, 스크린리더 대응을 한 번에 점검하게 해주는 웹 접근성 레퍼런스 스킬입니다.

WCAG 2.2 기준으로 웹 접근성을 점검하고 위반 사항을 우선순위대로 개선하도록 돕는 스킬입니다.

1600×900 16:9 규격의 트위터용 금언·데이터 카드를 HTML로 만들어 주는 디자인 템플릿.

Superdesign CLI를 통해 무한 캔버스에서 UI, 프레젠테이션, 포스터, 이미지·영상 에셋을 여러 AI 모델로 생성·비교하는 스킬입니다.

흔한 'AI풍' 디자인을 피하고, 뚜렷한 미학 방향을 가진 프로덕션급 프론트엔드 코드를 만들도록 Claude를 이끄는 스킬.

웹사이트의 접근성 결함을 찾아내고 WCAG 2.1 AA 기준에 맞게 고치도록 안내하는 스킬입니다.

한 장의 4×4 시트로 16개 아이콘을 한 번에 생성하고, 셀 분할과 배경 제거를 거쳐 투명 PNG 아이콘 세트를 만들어 줍니다.