SaaS 디자인 가이드 스킬 - 독창적이고 기억에 남는 UI/UX 설계
Provides SaaS UI/UX design principles for creating intentional, memorable interfaces. Triggers when designing or reviewing SaaS applications to establish aesthetic direction and avoid generic patterns.
/plugin marketplace add johunsang/kreatsaas/plugin install kreatsaas@kreatsaas-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
독창적이고 프로덕션 수준의 SaaS UI/UX를 설계하기 위한 디자인 철학과 가이드입니다.
"의도적인 것이 강렬한 것보다 중요하다. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 작동한다 - 핵심은 의도성이다."
코드 작성 전, 맥락을 이해하고 대담한 미적 방향을 결정:
극단적인 미적 방향 중 선택:
| 스타일 | 설명 | 적합한 SaaS |
|---|---|---|
| Brutally minimal | 극도로 절제, 여백 중심 | 생산성, 노트 |
| Maximalist chaos | 풍부하고 레이어드 | 크리에이티브, 게임 |
| Retro-futuristic | 복고 + 미래 | 테크, AI |
| Organic-natural | 유기적 곡선 | 웰니스, 환경 |
| Luxury-refined | 고급스러운 | 프리미엄, 금융 |
| Playful-toy-like | 재미있고 친근한 | 교육, 소셜 |
| Editorial-magazine | 잡지 스타일 | 미디어, 콘텐츠 |
| Brutalist-raw | 거칠고 원시적 | 개발자 도구 |
| Art deco-geometric | 기하학적 대칭 | 부동산, 럭셔리 |
| Industrial-utilitarian | 기능적, 산업적 | B2B, 엔터프라이즈 |
디스플레이 폰트 (헤딩):
- 영문: Space Grotesk, Clash Display, Cabinet Grotesk, Instrument Sans
- 한글: Pretendard, SUIT, Wanted Sans, 본고딕
본문 폰트:
- 영문: Geist, Söhne, Satoshi
- 한글: Pretendard, SUIT, Noto Sans KR
전략: 개성 있는 디스플레이 폰트 + 읽기 쉬운 본문 폰트 조합
/* 예시: 지배색 + 날카로운 악센트 */
:root {
--color-bg: #0a0a0a;
--color-text: #fafafa;
--color-accent: #00ff88; /* 예상치 못한 악센트 */
--color-muted: #737373;
}
전략:
/* 순차적 등장 */
.item { animation: fadeIn 0.5s ease-out forwards; }
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
/* 스크롤 트리거 */
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
전략:
맥락에 맞는 효과:
구성:
- 히어로 (강렬한 헤드라인 + CTA)
- 소셜 프루프 (로고, 사용자 수)
- 기능 소개 (3-5개 핵심 기능)
- 스크린샷/데모
- 가격표
- FAQ
- 푸터 CTA
구성:
- 심플한 폼
- 소셜 로그인 (Google, GitHub)
- 비밀번호 찾기 링크
- 브랜딩 요소
구성:
- 환영 메시지 / 상태 요약
- 핵심 지표 카드
- 퀵 액션 버튼
- 최근 활동
- 사이드바 네비게이션
구성:
- 프로필 편집
- 구독/결제 관리
- 팀 멤버 관리
- 알림 설정
- API 키 (개발자용)
구성:
- 플랜 비교표
- 월간/연간 토글
- 결제 폼
- 영수증/청구서
구성:
- 환영 모달
- 단계별 설정 위저드
- 첫 사용 가이드 투어
- 빈 상태 (empty state) 가이드
디자인 비전에 맞는 구현 복잡도:
| 비전 | 구현 |
|---|---|
| 맥시멀리스트 | 정교한 코드, 풍부한 애니메이션, 레이어드 효과 |
| 미니멀리스트 | 절제, 정밀한 여백, 미묘한 디테일 |
"Claude는 놀라운 창작 능력을 가지고 있습니다. 틀을 벗어나 생각하고, 독특한 비전에 완전히 몰입할 때 진정으로 무엇을 만들 수 있는지 보여주세요."
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.