390 스킬들
📦

frontend-design

안전 73

눈에 띄는 독특한 프론트엔드 인터페이스 구축

작성자 pbakaus

일반적인 AI 생성 코드는 잊을 만하고 템플릿화된 디자인을 생산합니다. 이 스킬은 기억에 남는 사용자 경험을 만들어내는 대담한 미학적 방향성과 프로덕션 수준의 구현을 가르칩니다.

Claude Codex Code(CC)
설치
📦

delight

안전 70

기대를 초월하는 미세 상호작용으로 인터페이스를 탈바꿈시키기

작성자 pbakaus

기능적인 인터페이스는 종종 차갑고 기계적으로 느껴집니다. 이 스킬은 사용성을 유지하면서 사용자가 미소 짓게 되는 전략적인 기쁨과 개성을 순간적으로 추가합니다.

Claude Codex Code(CC)
설치
🎨

critique

안전 66

디자인 비판하기

작성자 pbakaus

AI 생성 패턴, 시각적 계층 구조 문제 및 실행 가능한 개선 사항을 파악하여 인터페이스를 높이는 전문 UX 디자인 피드백을 받으세요.

Claude Codex Code(CC)
설치
🎨

colorize

안전 69

디자인에 전략적인 컬러 적용하기

작성자 pbakaus

회색빛이고 생명력 없는 인터페이스를 따뜻하고 매력적인 경험으로 변화시킵니다. 이 스킬은 시각적 계층 구조를 개선하고 사용자의 즐거움을 높이기 위해 의도적인 컬러 이론을 적용합니다.

Claude Codex Code(CC)
설치
📦

clarify

안전 70

불분명한 UX 문구 및 오류 메시지 개선

작성자 pbakaus

혼란스러운 인터페이스 텍스트는 사용자를 좌절시키고 지원 비용을 증가시킵니다. 이 스킬은 전문 용어, 모호한 레이블, 부적절한 오류 메시지를 사용자를 효과적으로 안내하는 명확하고 인간 친화적인 문구로 변환합니다.

Claude Codex Code(CC)
설치
🎨

bolder

안전 69

평범한 디자인을 대담한 경험으로 변화시키세요

작성자 pbakaus

진부하고 기억에 남지 않는 인터페이스에 더 이상 타협하지 마세요. 이 스킬은 사용성과 접근성 표준을 유지하면서도 사용자를 사로잡는 시각적으로 인상적인 디자인을 Claude 가 만들 수 있도록 도와줍니다.

Claude Codex Code(CC)
설치
📦

audit

안전 69

인터페이스 품질 감사

작성자 pbakaus

잘못된 인터페이스 품질은 사용자 경험을 저하시키고 장애를 가진 사용자를 배제합니다. 이 스킬은 접근성, 성능, 테마, 반응형 디자인에 대한 체계적인 감사를 제공하여 프로덕션에 도달하기 전에 문제를 식별합니다.

Claude Codex Code(CC)
설치
📐

arrange

안전 69

의도적인 간격과 리듬으로 레이아웃 변형하기

작성자 pbakaus

단조로운 그리드와 임의의 간격을 제거합니다. 이 스킬은 의도적인 간격, 다양한 리듬, 중요한 부분에 시선을 유도하는 구조화된 레이아웃을 통해 시각적 계층 구조를 만들기 위한 체계적인 접근 방식을 제공합니다.

Claude Codex Code(CC)
설치

animate

안전 69

의미 있는 애니메이션과 마이크로 인터랙션 추가

작성자 pbakaus

정적 인터페이스는 미완성처럼 느껴지며 사용자를 안내할 기회를 놓치게 됩니다. 이 스킬은 사용자에게 피드백을 제공하고 이해도를 높이며 사용자를 압도하지 않으면서 즐거운 경험을 만들어내는 모션을 전략적으로 추가할 수 있도록 도와줍니다.

Claude Codex Code(CC)
설치
📦

adapt

안전 69

화면이나 플랫폼에 관계없이 디자인을 적용하세요

작성자 pbakaus

모바일, 태블릿, 데스크톱, 인쇄 또는 이메일을 통해 디자인을 작동시키기가 어려우신가요? 이 스킬은 일관성과 사용성을 유지하면서 다양한 맥락에 맞게 디자인을 적용하는 전문가의 안내를 제공합니다.

Claude Codex Code(CC)
설치
📦

liquid-glass

안전 70

Liquid Glass 효과를 SwiftUI 앱에 추가하기

작성자 patrickserrano

최신 iOS 인터페이스를 구축하려면 고급 시각 효과를 구현해야 합니다. 이 스킬은 iOS 26+ Liquid Glass API를 사용하여 SwiftUI에서 블러, 반사, 인터랙티브 글래스 표면을 만드는 가이드라인과 코드 예제를 제공합니다.

Claude Codex Code(CC)
설치
📱

app-store-screenshots

안전 70

클로드로 앱 스토어 스크린샷 생성하기

작성자 ParthJadhav

전문적인 앱 스토어 스크린샷을 만드는 것은繁琐하고 시간이 많이 소요됩니다. 이 스킬은 Next.js와 html-to-image를 사용하여 Apple의 요구 해상도에서 마케팅 최적화된 iOS 스크린샷을 생성합니다.

Claude Codex Code(CC)
설치
🎨

mulerouter

안전 81

MuleRouter로 AI 이미지 및 비디오 생성

작성자 openmule

전문적인 AI 생성 미디어를 만들려면 복잡한 API 통합과 모델 관리가 필요합니다. MuleRouter 기술은 최첨단 AI 모델을 사용하여 이미지 및 비디오를 생성하기 위한 통합 인터페이스를 제공하여 이를 간소화합니다.

Claude Codex Code(CC)
설치
📦

ckm:design

중간 위험 68

AI로 로고, 브랜드 아이덴티티, 소셜 미디어 비주얼 디자인하기

작성자 nextlevelbuilder

전문적인 디자인을 만들려면 보통 디자이너를 고용하거나 복잡한 소프트웨어를 배워야 합니다. 이 스킬은 AI를 활용하여 사용자의 설명만으로 로고, 브랜드 아이덴티티 문서, 소셜 미디어 이미지, 배너, 아이콘, 프레젠테이션을 직접 생성합니다.

Claude Codex Code(CC)
설치
📦

ckm:design-system

낮은 위험 72

디자인 토큰 생성, 사용 검증 및 브랜드 슬라이드 제작

작성자 nextlevelbuilder

디자인 시스템은 프리미티브, 시맨틱, 컴포넌트 레이어 전반에 걸쳐 토큰이 일관되게 적용되지 않을 때 자주 무너집니다. 이 스킬은 JSON 토큰 정의에서 CSS 변수를 생성하고, 코드에서 토큰 사용을 검증하며, Chart.js와 통합된 브랜드 준수 슬라이드 프레젠테이션을 제작합니다.

Claude Codex Code(CC)
설치
📦

gif-sticker-maker

중간 위험 68

사진에서 애니메이션 GIF 스티커 만들기

작성자 MiniMax-AI

모든 사진을 독특한 Funko Pop 3D 피규어 스타일의 애니메이션 스티커 4장으로 변환합니다. 이 스킬은 이미지 생성부터 애니메이션, 최종 GIF 출력까지 전체 워크플로우를 처리하며, 소스 사진과 MiniMax API 키만 있으면 됩니다.

Claude Codex Code(CC)
설치
🎨

design-style-skill

안전 70

PPT 슬라이드에 비주얼 디자인 시스템 적용

작성자 MiniMax-AI

일관성 없는 스타일링은 프레젠테이션 슬라이드를 비전문적으로 보이고 주의를 산만하게 합니다. 이 스킬은 정확한 코너 반경 및 간격 값을 제공하는 4가지 사전 정의된 디자인 스타일 레시피를 제공하여 모든 슬라이드가 통합된 비주얼 시스템을 따르도록 합니다.

Claude Codex Code(CC)
설치
📦

color-font-skill

안전 71

프레젠테이션에 컬러 팔레트 및 폰트 페어링 추가

작성자 MiniMax-AI

프레젠테이션용 색상과 글꼴 선택에는 시간이 걸리며 일관성 없는 디자인이 만들어지기 쉽습니다. 이 스킬은 PowerPoint 슬라이드에 최적화된 큐레이션된 브랜드 안전한 컬러 팔레트와 폰트 페어링을 제공합니다.

Claude Codex Code(CC)
설치
🎨

design-an-interface

안전 74

병렬 서브 에이전트를 활용한 더 나은 인터페이스 설계

작성자 mattpocock

디자이너는 종종 대안 없이 첫 번째 인터페이스 아이디어에 안주합니다. 이 스킬은 '두 번 설계하기(Design It Twice)' 방법론을 적용하여 병렬 서브 에이전트를 사용해 비교 및 통합을 위한 근본적으로 다른 인터페이스 설계를 생성합니다.

Claude Codex Code(CC)
설치
🖼️

nano-image-generator

안전 76

Gemini 3 Pro와 스타일 레퍼런스를 사용한 이미지 생성

작성자 lxfater

프로젝트용 시각 자산을 만들려면 비용이昂贵的 디자인 도구나 수동 일러스트레이션이 필요합니다. 이 스킬은 Google Gemini 3 Pro Preview API를 사용하여 즉각적인 이미지 생성을 지원하며, 레퍼런스 이미지를 통해 여러 에셋에서 일관된 스타일과 캐릭터 외관을 유지할 수 있습니다.

Claude Codex Code(CC)
설치