From rn-launch-harness
Designs NativeWind design system for React Native apps: proposes brand tones, defines light/dark colors, typography, component specs, screen layouts, ad placements from PRD.
npx claudepluginhub tjdrhs90/rn-launch-harness --plugin rn-launch-harnessThis skill is limited to using the following tools:
PRD를 기반으로 NativeWind 디자인 시스템을 설계한다.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Guides code writing, review, and refactoring with Karpathy-inspired rules to avoid overcomplication, ensure simplicity, surgical changes, and verifiable success criteria.
Executes ctx7 CLI to fetch up-to-date library documentation, manage AI coding skills (install/search/generate/remove/suggest), and configure Context7 MCP. Useful for current API refs, skill handling, or agent setup.
Share bugs, ideas, or general feedback.
PRD를 기반으로 NativeWind 디자인 시스템을 설계한다.
오케스트레이터에서 Phase 3으로 호출됨.
docs/harness/plans/YYYY-MM-DD-prd.md (PRD)docs/harness/references/ (있으면)3가지 비주얼 방향 제안:
AskUserQuestion으로 사용자 선택.
// tailwind.config.js colors 확장
colors: {
primary: {
50: '#...',
100: '#...',
// ... 900
DEFAULT: '#...',
},
secondary: { ... },
// Semantic colors
success: '#...',
warning: '#...',
error: '#...',
info: '#...',
// Background
background: '#...',
surface: '#...',
// Text
text: {
primary: '#...',
secondary: '#...',
disabled: '#...',
},
}
Light/Dark 모드 모두 정의.
Heading 1: 28px / Bold / line-height 36
Heading 2: 24px / Semibold / line-height 32
Heading 3: 20px / Semibold / line-height 28
Body: 16px / Regular / line-height 24
Caption: 12px / Regular / line-height 16
Label: 14px / Medium / line-height 20
주요 컴포넌트 variant 정의:
각 주요 화면의 레이아웃 구조:
<SafeAreaView className="flex-1 bg-background">
<Header />
<ScrollView className="flex-1 px-4">
{/* Content */}
</ScrollView>
{/* AdBanner는 SafeAreaView 안, 하단 */}
<AdBanner />
</SafeAreaView>
AdMob 광고의 시각적 통합:
| 축 | 비중 | 목표 | 설명 |
|---|---|---|---|
| Design Quality | 30% | 7/10+ | 일관성, 정체성 |
| Originality | 25% | 6/10+ | 커스텀 결정, 템플릿 탈피 |
| Craft | 25% | 7/10+ | 간격, 타이포, 대비 |
| Functionality | 20% | 8/10+ | 사용성 |
docs/harness/plans/YYYY-MM-DD-design.md:
# Design System
## 브랜드 톤
[선택된 톤 + 이유]
## 컬러 시스템
### Light Mode
### Dark Mode
## 타이포그래피
## 컴포넌트 스펙
### Button
### Card
### Input
### Typography
## 화면 레이아웃
### 홈
### 상세
### 프로필
## 광고 배치 디자인
## 자체 평가
| 축 | 점수 | 근거 |
추가로 파일 직접 수정:
tailwind.config.js — colors, fonts 확장src/shared/config/theme.ts — 테마 토큰 정의current_phase: contract
next_role: rn-harness-contract