npx claudepluginhub jh941213/my-cc-harness --plugin ccppThis skill is limited to using the following tools:
모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다.
Stitch는 상세하고 구체적인 프롬프트에서 더 좋은 결과를 생성합니다. 이 스킬은:
DESIGN.md에서 스타일 정보 통합| 요소 | 설명 | 예시 |
|---|---|---|
| 콘텐츠 | 무엇을 보여줄지 | "사용자 프로필 카드" |
| 스타일 | 어떻게 보일지 | "미니멀, 둥근 모서리, 부드러운 그림자" |
| 레이아웃 | 어떻게 배치할지 | "중앙 정렬, 3열 그리드" |
❌ 나쁜 프롬프트: "로그인 페이지"
⚠️ 괜찮은 프롬프트: "이메일과 비밀번호 필드가 있는 로그인 페이지"
✅ 좋은 프롬프트: "
미니멀한 로그인 페이지:
- 중앙에 배치된 카드 형태의 로그인 폼
- 상단에 로고와 환영 메시지
- 이메일 입력 필드 (아이콘 포함)
- 비밀번호 입력 필드 (보이기/숨기기 토글)
- 파란색 기본 버튼 '로그인'
- '비밀번호 찾기' 링크
- '계정 만들기' 보조 버튼
- 부드러운 그라데이션 배경
"
사용자의 원본 아이디어를 분석합니다:
입력: "대시보드 만들어줘"
분석:
- 타입: 대시보드 (관리/분석 UI)
- 누락된 정보:
- 어떤 데이터?
- 어떤 스타일?
- 주요 기능?
관련 정보를 수집합니다:
DESIGN.md 확인 (있는 경우)
도메인 추론
## [페이지 유형]: [페이지 이름]
### 개요
[페이지의 목적과 주요 기능 1-2문장 설명]
### 시각적 스타일
- **분위기**: [형용사들 - 예: 모던, 미니멀, 전문적]
- **색상**: [주요 색상 설명 또는 DESIGN.md 참조]
- **타이포그래피**: [폰트 스타일 설명]
### 레이아웃 구조
1. **헤더**: [헤더 구성 요소]
2. **메인 섹션**: [주요 콘텐츠 영역]
3. **사이드바** (선택): [보조 정보]
4. **푸터**: [푸터 구성 요소]
### 핵심 요소
- [요소 1]: [설명]
- [요소 2]: [설명]
- [요소 3]: [설명]
### 상호작용
- [액션 1]: [동작 설명]
- [액션 2]: [동작 설명]
### 디자인 시스템
[DESIGN.md 섹션 6 복사 또는 스타일 가이드]
원본 입력:
"랜딩 페이지"
향상된 프롬프트:
## 랜딩 페이지: SaaS 제품 소개
### 개요
잠재 고객에게 제품 가치를 전달하고 가입을 유도하는 현대적인 랜딩 페이지
### 시각적 스타일
- **분위기**: 신뢰감 있고 전문적, 친근한 느낌
- **색상**:
- 기본: 진한 파랑 (#2563EB) - 신뢰와 안정
- 강조: 밝은 주황 (#F97316) - CTA 버튼
- 배경: 순백색 (#FFFFFF) with 미묘한 그레이 섹션
- **타이포그래피**: Inter 폰트, 큰 헤딩 (48-72px), 넉넉한 줄간격
### 레이아웃 구조
1. **네비게이션 바**
- 좌측: 로고
- 중앙: 메뉴 링크 (Features, Pricing, About, Contact)
- 우측: "로그인" 텍스트 링크 + "무료 시작" 기본 버튼
2. **히어로 섹션**
- 좌측 (60%):
- 대형 헤드라인 (제품 가치 제안)
- 부제목 (1-2문장 설명)
- CTA 버튼 그룹 ("무료 체험" + "데모 보기")
- 신뢰 지표 (사용 기업 로고 또는 사용자 수)
- 우측 (40%):
- 제품 스크린샷 또는 3D 일러스트
- 미묘한 그림자로 떠있는 효과
3. **기능 섹션**
- 섹션 제목: "왜 [제품명]인가요?"
- 3열 그리드의 기능 카드
- 각 카드: 아이콘 + 제목 + 설명 (2-3줄)
4. **사회적 증거 섹션**
- 고객 로고 배너 (그레이스케일)
- 선택: 추천 인용문 카드
5. **CTA 섹션**
- 배경: 미묘한 그라데이션
- 대형 텍스트: 행동 유도 문구
- 큰 CTA 버튼
6. **푸터**
- 4열: 제품, 회사, 리소스, 법적 링크
- 하단: 저작권 + 소셜 아이콘
### 핵심 요소
- **CTA 버튼**: 둥근 모서리 (8px), 넉넉한 패딩, 호버 시 약간 어두워짐
- **기능 카드**: 흰색 배경, 미묘한 테두리 또는 그림자, 호버 시 살짝 상승
- **신뢰 지표**: 회색조 로고, 자연스러운 간격
### 상호작용
- 네비게이션 링크: 호버 시 색상 변경
- CTA 버튼: 호버 시 살짝 어두워지고 미세한 상승
- 기능 카드: 호버 시 그림자 강화 및 미세 상승
### 참고사항
- 모바일 반응형 고려 (DESKTOP 우선 생성)
- 이미지 플레이스홀더 사용 가능
- 접근성: 충분한 색상 대비, 큰 클릭 영역
원본 입력:
"분석 대시보드"
향상된 프롬프트:
## 대시보드: 비즈니스 분석 개요
### 개요
핵심 비즈니스 지표를 한눈에 파악할 수 있는 데이터 중심 대시보드
### 시각적 스타일
- **분위기**: 데이터 중심, 깔끔, 전문적
- **색상**:
- 배경: 밝은 그레이 (#F3F4F6)
- 카드: 순백색 (#FFFFFF)
- 기본 텍스트: 진한 회색 (#1F2937)
- 차트 팔레트: 파랑, 초록, 보라, 주황 (데이터 시각화)
- 성공: 초록 (#10B981), 경고: 주황 (#F59E0B), 위험: 빨강 (#EF4444)
- **타이포그래피**:
- 폰트: Inter 또는 system-ui
- 숫자: tabular-nums (고정폭 숫자)
- 큰 지표 숫자는 bold, 설명은 regular
### 레이아웃 구조
1. **좌측 사이드바** (고정, 60px 접힌 상태 / 240px 펼친 상태)
- 상단: 로고
- 메뉴 아이템: 아이콘 + 텍스트
- 현재 페이지 강조 (배경색 + 좌측 강조선)
- 하단: 사용자 아바타 + 설정
2. **상단 헤더** (고정)
- 좌측: 페이지 제목 + 빵크럼
- 우측: 검색 바 + 알림 아이콘 + 프로필 드롭다운
3. **메인 콘텐츠** (스크롤 가능)
**Row 1: KPI 카드 (4열)**
- 총 매출 (금액 + 전주 대비 %)
- 신규 사용자 (숫자 + 전주 대비 %)
- 전환율 (% + 전주 대비)
- 활성 세션 (숫자 + 스파크라인)
- 각 카드: 작은 아이콘, 라벨, 큰 숫자, 변화율 배지
**Row 2: 차트 영역 (2열)**
- 좌측 (66%): 라인 차트 (주간 트렌드)
- 제목 + 기간 선택 드롭다운
- 범례
- 호버 시 툴팁
- 우측 (33%): 도넛 차트 (카테고리 분포)
- 중앙에 총합 표시
- 우측에 범례 목록
**Row 3: 데이터 테이블**
- 제목: "최근 거래"
- 컬럼: 날짜, 고객명, 금액, 상태 (배지), 액션 버튼
- 페이지네이션
- 필터/정렬 컨트롤
### 핵심 요소
- **KPI 카드**: 둥근 모서리 (12px), 미묘한 그림자, 좌측에 색상 강조선
- **변화율 배지**: 초록 (상승), 빨강 (하락), 작은 화살표 아이콘
- **차트**: 깔끔한 그리드선, 호버 시 데이터 포인트 강조
- **테이블**: 줄무늬 행, 호버 시 행 강조
### 상호작용
- 사이드바 메뉴: 호버 시 배경 변경
- KPI 카드: 클릭 시 상세 페이지 이동 암시 (커서 변경)
- 차트: 호버 시 툴팁, 범례 클릭 시 시리즈 토글
- 테이블 행: 호버 시 강조, 액션 버튼 표시
프롬프트에 추가하면 좋은 키워드들:
| 키워드 | 용도 |
|---|---|
| centered | 중앙 정렬 |
| grid layout | 그리드 레이아웃 |
| split view | 분할 뷰 |
| sidebar | 사이드바 |
| sticky header | 고정 헤더 |
| card layout | 카드 레이아웃 |
| masonry | 벽돌형 레이아웃 |
| 키워드 | 용도 |
|---|---|
| minimal | 미니멀 |
| modern | 현대적 |
| clean | 깔끔한 |
| rounded corners | 둥근 모서리 |
| soft shadows | 부드러운 그림자 |
| subtle gradient | 미묘한 그라데이션 |
| glassmorphism | 유리 효과 |
| frosted glass | 불투명 유리 효과 |
| 키워드 | 용도 |
|---|---|
| pill button | 알약형 버튼 |
| avatar | 프로필 이미지 |
| badge | 배지/태그 |
| tooltip | 툴팁 |
| dropdown | 드롭다운 |
| modal | 모달 |
| toast | 토스트 알림 |
| skeleton | 로딩 스켈레톤 |
| 키워드 | 용도 |
|---|---|
| hover effect | 호버 효과 |
| active state | 활성 상태 |
| disabled | 비활성화 |
| loading | 로딩 중 |
| empty state | 빈 상태 |
| error state | 에러 상태 |
DESIGN.md가 있는 경우, 섹션 6을 프롬프트 끝에 추가합니다:
### 디자인 시스템 (DESIGN.md에서)
비주얼 스타일: 미니멀하고 공기처럼 가벼운, 넉넉한 여백
기본 색상: Deep Ocean Blue (#0066FF) - 기본 액션 버튼
보조 색상: Soft Sky (#E0F2FE) - 강조 배경
배경: Pure White (#FFFFFF) 메인, Whisper Gray (#F9FAFB) 섹션
텍스트: Midnight (#1A1A1A) 헤딩, Slate (#64748B) 본문
버튼 스타일: 알약 모양, 미묘한 호버 상승
카드 스타일: 8px 둥근 모서리, 속삭이듯 부드러운 그림자
전체적인 느낌: 신뢰감 있고 친근한, 전문적이면서 접근하기 쉬운
| ❌ 피해야 할 것 | ✅ 대신 이렇게 |
|---|---|
| "예쁜 페이지" | "미니멀하고 현대적인, 충분한 여백" |
| "좋은 색상" | "#2563EB 파란색 기본 버튼, #10B981 성공 표시" |
| "큰 버튼" | "높이 48px, 패딩 24px, 둥근 모서리" |
| "어딘가에 로고" | "좌측 상단 모서리에 로고, 높이 32px" |
| "몇 개의 카드" | "3열 그리드, 각 카드에 아이콘, 제목, 설명" |