shape
코딩 전 UX/UI 디자인 계획
대부분의 AI 생성 UI는 디자인 사고를 건너뛰기 때문에 실패합니다. 이 스킬은 포괄적인 디자인 브리프를 생성하기 전에 사용자 요구사항, 제약조건, 목표를 이해하기 위해 구조화된 디스커버리 인터뷰를 실행합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"shape" 사용 중입니다. 새 사용자가 작업 공간을 설정할 수 있도록 돕는 사용자 온보딩 플로우의 UX를 설계하세요.
예상 결과:
기능 요약:刚刚가입한사용자를 위한 최초 작업 공간 설정. 주요 목표는 5분 이내에 사용자에게 '아하 모멘트'에 도달하면서 구성 복잡성에 대한 불안감을 줄이는 것입니다. 주요 사용자 작업: 자신감 있게 작업 공간 구성 완료. 디자인 방향: 차분하고 안심시키며 점진적 공개. 레이아웃 전략: 명확한 진행 표시기와 함께 단일 컬럼 수직 플로우. 주요 상태: 첫 방문(환영), 진행 중(단계 표시기), 완료(성공 축하), 오류(안내와 함께 검증). 상호작용 모델: 건너뛰기 가능한 선택 단계가 있는 가이드 마법사, 각 섹션 후 자동 저장. 콘텐츠 요구사항: 환영 메시지, 단계 헤더, 인라인 도움말 텍스트, 검증 메시지. 권장 참조: interaction-design.md, form-design.md. 미결 질문: 프로필 설정을 건너뛸 수 있도록 허용해야 하는가?
"shape" 사용 중입니다. API 상태를 모니터링하는 대시보드를 디자인해야 합니다.
예상 결과:
기능 요약: DevOps 엔지니어를 위한 실시간 API 모니터링 대시보드. 주요 목표는 문제의 신속한 파악과 근본 원인 분석입니다. 주요 사용자 작업: API 이상 징후를 빠르게 발견하고 진단. 디자인 방향: 정보 밀집도 높음, 고대비, 빠른 스캔. 레이아웃 전략: 그리드 기반, 상단에 상태 개요, 하단에 상세 지표, 좌우 심각도 그래디언트. 주요 상태: 전체 시스템 정상, 부분 저하(경고), 심각한 오류, 로딩(초기 데이터 가져오기), 데이터 없음. 상호작용 모델: 세부 정보는 호버, 드릴다운은 클릭, 30초마다 자동 새로고침, 수동 새로고침 가능. 콘텐츠 요구사항: 서비스 이름, 상태 표시기, 지연 시간 수치, 오류 수, 타임스탬프, 오류 메시지. 권장 참조: data-visualization.md, dashboard-design.md. 미결 질문: 알림 임계값 선호도는?
보안 감사
안전Static analysis detected 22 potential issues (21 'weak cryptographic algorithm' patterns, 1 'external commands' pattern). All findings are false positives caused by pattern matching on markdown formatting (backticks around `.impeccable.md`) and common English words ('block', 'key', 'cipher'). This is a pure documentation/planning skill with no executable code, no network operations, no file system access, and no security risks. The skill runs a structured interview process and generates design documentation.
낮은 위험 문제 (1)
품질 점수
만들 수 있는 것
새 기능 기획하는 제품 매니저
엔지니어링에 요구사항을 전달하기 전에 이 스킬을 사용하여 명확한 UX 방향, 성공 지표, 디자인 제약조건을 설정하세요.
구현을 시작하는 개발자
코딩 전에 구축할 내용을 명확히 하여 잘못 이해된 요구사항이나 누락된 엣지 케이스로 인한 재작업을 방지하세요.
상호작용 패턴을 정의하는 디자이너
시각적 목업이나 프로토타입을 만들기 전에 사용자 플로우, 상태, 콘텐츠 요구사항에 대한 사고를 구조화하세요.
이 프롬프트를 사용해 보세요
[기능 설명]을 디자인해야 합니다. 디스커버리 인터뷰를 실행하고 디자인 브리프를 작성하세요.
[기능]의 UX를 설계하세요. /impeccable에서 이미 디자인 맥락을 가지고 있으므로, 제약조건과 패턴을 논의할 때 이를 활용하세요.
[기능]의 UX를 다음 제약조건으로 기획하세요: [모바일 우선, 접근성 요구사항, 성능 예산 등 제약조건 목록]. 인터뷰에서 이러한 제약조건들이 디자인에 어떤 영향을 미치는지에 집중하세요.
[기능]을 디자인하고 싶지만 [복잡성 과부하 같은 특정 우려사항]에 대해 걱정됩니다. 디스커버리 인터뷰에서 안티 목표와 이것이 어떤 것이 되어서는 안 되는지를 탐색해야 합니다.
모범 사례
- 이 스킬을 사용하기 전에 /impeccable를 호출하여 디자인 원칙과 프로젝트 맥락이 로드되었는지 확인하세요
- 사소한.detail이라고 생각되더라도 인터뷰 질문에 대해 신중하게 답변하세요
- 확인하기 전에 생성된 디자인 브리프를 꼼꼼히 검토하세요
- 확인된 브리프를 /impeccable craft 또는 /impeccable에 전달하여 원활한 구현을 진행하세요
피하기
- 디스커버리 인터뷰를 건너뛰고 바로 디자인 제안으로 바로 이동
- 맥락 없이 인터뷰 질문에 한 단어로만 답변
- 디자인 문서 대신 코드 출력을 기대하며 이 스킬 사용
- 브리프 확인 단계를 무시하고 불완전한 이해로 진행