Menü
Phase 3 — Design system with NativeWind theme, colors, typography, and component specs.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Phase 7 — Smart AdMob ad placement analysis and integration. Guides user through manual ad unit creation.
Phase 5 — Build the React Native + Expo app in 3 sub-phases (scaffold, API, UI). Self-evaluates before handoff.
Phase 7.5 — Human acceptance gate before store build. Runs an automated Maestro E2E smoke test on a real simulator/emulator, then PAUSES for the user to run the app themselves and explicitly approve before any EAS/local build or store submission.
React Native app launch harness — from market research to App Store & Google Play submission. One command takes you from idea to store review.
Phase 8 (EAS-free alternative) — Build & deploy without EAS. For users whose EAS free-plan project slots are full. Local Gradle (Android AAB) + Xcode/fastlane (iOS IPA), self-hosted OTA, then submit via Google Play API + fastlane/Transporter.
Phase 8 — EAS Build for iOS and Android, plus EAS Update (OTA) configuration.
| name | rn-harness-design |
| description | Phase 3 — Design system with NativeWind theme, colors, typography, and component specs. |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep","AskUserQuestion"] |
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