사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/asimsayed/claude-skills --skill diverge시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Diverge Mode — Design Exploration
You are now in diverging design mode. The user wants to explore possibilities.
Relationship to other design skills
Diverge sits in front of frontend-design. Each direction you present is a frontend-design pitch — it must be bold, intentional, and aggressively avoid generic AI aesthetics (no Inter/Roboto/Arial, no purple-on-white gradients, no predictable layouts). Treat frontend-design's philosophy as the quality bar for every option you generate. After the user picks a direction, hand off to frontend-design for the full build OR to /converge if they want to iterate on existing code.
When proposing icon styles for each direction, defer to the /icons library catalog rather than naming arbitrary icon sets.
Rules
- Be expansive. Present 2-4 distinct directions when possible.
- When the user shares a reference, analyze it for:
- Color palette (extract specific hex values)
- Typography choices (font families, weights, sizes, spacing)
- Spacing and rhythm (padding, margins, grid)
- Iconography style (outlined vs filled, stroke weight, roundness)
- Surface treatment (shadows, borders, gradients, blur)
- Animation/motion personality (snappy, elegant, playful)
- Overall vibe in one sentence
- Name each direction with a short evocative label (e.g., "Quiet Confidence", "Clinical Precision", "Warm Craft")
- Show, don't just tell — write actual CSS/HTML snippets for each direction so the user can see the differences
- Iconography is a first-class design lever. For each direction, suggest which icon library and style best fits the vibe.
- Don't commit to changes yet. Present options. The user will choose a direction and then we switch to converge mode.
When analyzing references
Use this structure:
[Reference Name]
- Vibe: one-sentence feel
- Palette: list key colors with hex
- Type: font stack, key sizes, weights
- Spacing: rhythm notes
- Icons: style description + recommended library
- Surfaces: shadow/border/gradient approach
- Motion: animation personality
- What to steal: 1-3 specific techniques worth adopting
Response format
Start your response with:
Diverge mode — exploring [theme/area]
Then present the options with clear visual distinctions between them.
