Clauders/appkit
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

readme deleted

Browse Source
This commit is contained in:
rupy1014
2025-12-14 20:17:06 +09:00
parent e9b0c00be7
commit 817c6c82a6
2 changed files with 0 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
.claude/commands/README.appkit.md
View File

@@ -1,282 +0,0 @@
# AppKit Framework
**아이디어를 고객 가치로 변환하는 논리적 사고 프레임워크**
---
## Overview
AppKit은 막연한 아이디어를 고객 중심으로 구체화하여 MVP 기획서, 화면설계서, 정책설계서, 그리고 라이브 목업까지 작성하는 프레임워크입니다.
**핵심 철학**:
1. 고객 가치 우선 → 기능이 아닌 고객의 문제 해결 중심
2. 논리적 사고 연습 → 큰 작업을 작은 단계로 쪼개기
3. MVP 중심 실행 → 최소한의 범위로 최대한의 검증
4. 실행 가능한 문서 → 개발자/디자이너가 바로 작업 가능
5. 시각적 프로토타입 → HTML 목업으로 즉시 확인
**출력 디렉토리**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works`
---
## 논리적 사고 5단계 워크플로우
```
1. /appkit.new → 아이디어 스케치 (어떤 서비스인지?)
2. /appkit.mvp → MVP 범위 정하기 (최소한으로 검증하려면?)
3. /appkit.ui → 화면설계서 (라우터, 화면, 컴포넌트)
4. /appkit.policy → 정책설계서 (비즈니스 규칙)
5. /appkit.visualize → 목업 생성 (HTML 프로토타입)
```
---
## Commands
### 1. `/appkit.new` - 아이디어 스케치
**Purpose**: 막연한 아이디어를 서비스 컨셉으로 구체화
**Input**:
```
/appkit.new 테니스 코트 예약 앱
```
**Output**:
- `ui/works/concept.md` - 서비스 컨셉 & 핵심 가치
- `ui/works/specs/001-xxx/spec.md` - 기능별 스펙 초안
**Key Features**:
- 서비스 본질 파악 (무슨 문제를 해결하나?)
- 예상 고객군 추론 (누가 쓸까?)
- 핵심 가치 제안 (왜 써야 할까?)
---
### 2. `/appkit.mvp` - MVP 범위 정의 + 랜딩페이지
**Purpose**: 최소한의 기능으로 최대한의 검증 + 검증용 랜딩페이지 생성
**Input**:
```
/appkit.mvp
/appkit.mvp "2주 검증"
```
**Output**:
- `ui/works/mvp-scope.md` - MVP 범위 정의 & 검증 지표
- `ui/works/landing.html` - 검증용 랜딩페이지
**Key Features**:
- Phase 0/1/2 기능 분류
- 성공/학습/피벗 지표 설정
- MVP 체크리스트
- **HTML 랜딩페이지 자동 생성**
- Hero, Problem, Solution, How It Works 섹션
- SEO 메타태그 완성
- 반응형 디자인 (모바일 퍼스트)
- CTA 버튼 포함
**Template**: `.specify/templates/sales-landing-template.html`
---
### 3. `/appkit.ui` - 화면설계서
**Purpose**: 라우터, 화면, 컴포넌트 구조 정의 (카카오톡 스타일)
**Input**:
```
/appkit.ui # 전체 화면 설계
/appkit.ui "특정 화면명" # 특정 화면 설계
```
**Output**:
- `ui/works/router.md` - 라우터 & UI 목록
- `ui/works/main.md` - 메인 구조 (탭 구조, 네비게이션)
**Key Features**:
- 5탭 구조 (센터 탭 강조)
- 화면별 컴포넌트 ID 정의
- 바텀시트, 팝업, 토스트 정의
- 네비게이션 플로우
**Template**: `.specify/templates/ui-router.md`, `ui-main.md`
---
### 4. `/appkit.policy` - 정책설계서
**Purpose**: 비즈니스 규칙과 정책을 코드로 구조화
**Input**:
```
/appkit.policy # 전체 정책
/appkit.policy "과금 정책" # 특정 정책
```
**Output**:
- `ui/works/policies/00-policy-index.md` - 정책 인덱스
- `ui/works/policies/01-monetization.md` - 과금 정책 (MN)
- `ui/works/policies/02-gameplay.md` - 서비스 규칙 (GM)
- `ui/works/policies/03-content.md` - 콘텐츠 정책 (CH)
- `ui/works/policies/04-progression.md` - 진행 정책 (PR)
**Policy Codes**:
| 코드 | 카테고리 | 내용 |
|-----|---------|------|
| MN | Monetization | 결제, 구독, 포인트 |
| GM | Gameplay | 서비스 규칙, 제한사항 |
| CH | Content | 콘텐츠 생성/관리 |
| PR | Progression | 레벨, 업적, 보상 |
| CR | Content Rating | 연령 등급, 경고 |
**Template**: `.specify/templates/policy-*.md`
---
### 5. `/appkit.visualize` - HTML 목업 생성
**Purpose**: router.md 기반 라이브 프로토타입 생성
**Input**:
```
/appkit.visualize home # 홈 화면 목업
/appkit.visualize all # 전체 화면 목업
/appkit.visualize "예약 상세" # 특정 화면 목업
```
**Output**:
- `ui/works/mockup/[screen].html` - HTML 목업
- `ui/works/mockup/styles.css` - 공통 스타일
- `ui/works/mockup/scripts.js` - 공통 스크립트
**Key Features**:
- 모바일 퍼스트 (max-width: 430px)
- 다크 테마 기본
- 모달/바텀시트/토스트 동작
- 정책 ID 주석 연결
- 화면 간 상호 링크
**Template**: `.specify/templates/mockup-*.html`, `mockup-styles.css`, `mockup-scripts.js`
---
## Quick Start
```bash
# Step 1: 아이디어 스케치
/appkit.new 친구와 AI 챗봇 서비스
# Step 2: MVP 범위 정의
/appkit.mvp
# Step 3: 화면설계 (라우터, 메인 구조)
/appkit.ui
# Step 4: 정책설계
/appkit.policy
# Step 5: HTML 목업 생성
/appkit.visualize all
```
---
## 생성되는 파일 구조
```
/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/
└── ui/
└── works/
│
├── concept.md # 서비스 컨셉 (/appkit.new)
├── mvp-scope.md # MVP 범위 (/appkit.mvp)
├── landing.html # 랜딩페이지 (/appkit.mvp)
│
├── router.md # 라우터 & UI 목록 (/appkit.ui)
├── main.md # 메인 구조 (/appkit.ui)
│
├── specs/ # 기능별 스펙 (/appkit.new)
│ ├── 001-user/spec.md
│ ├── 002-venue/spec.md
│ └── ...
│
├── policies/ # 정책 문서 (/appkit.policy)
│ ├── 00-policy-index.md # 정책 인덱스
│ ├── 01-monetization.md # 과금 정책 (MN-xxx)
│ ├── 02-gameplay.md # 서비스 규칙 (GM-xxx)
│ ├── 03-content.md # 콘텐츠 정책 (CH-xxx)
│ └── 04-progression.md # 진행 정책 (PR-xxx)
│
└── mockup/ # HTML 목업 (/appkit.visualize)
├── home.html
├── chat.html
├── shop.html
├── styles.css
└── scripts.js
```
---
## 템플릿 파일
```
/Users/taesupyoon/sideProjects/appkit/.specify/templates/
├── ui-router.md # 라우터 템플릿
├── ui-main.md # 메인 구조 템플릿
├── policy-index.md # 정책 인덱스 템플릿
├── policy-monetization.md # 과금 정책 템플릿
├── policy-gameplay.md # 서비스 규칙 템플릿
├── policy-content.md # 콘텐츠 정책 템플릿
├── policy-progression.md # 진행 정책 템플릿
├── policy-content-rating.md # 등급 정책 템플릿
├── mockup-base.html # HTML 목업 기본 템플릿
├── mockup-styles.css # 목업 스타일시트
└── mockup-scripts.js # 목업 스크립트
```
---
## Best Practices
### 1. 고객부터 시작하기
- 기능이 아닌 고객의 문제부터 생각하세요
- "누가 쓸까?" 질문을 계속하세요
### 2. MVP 먼저, 완벽은 나중에
- "없으면 안되는" 기능만 Phase 0에
- "있으면 좋은" 기능은 Phase 1+로
### 3. 정책 ID로 추적하기
- 모든 정책에 코드 부여 (MN-001, GM-002 등)
- UI 요소와 정책 연결 (주석으로 표시)
### 4. 목업으로 검증하기
- 코딩 전에 HTML 목업으로 사용성 확인
- 브라우저에서 직접 확인 가능
### 5. 명확하게 작성
- 모호한 표현 ("적절히", "필요시") 지양
- 개발자가 바로 구현 가능한 수준으로
---
## Philosophy
> "아이디어는 고객의 문제에서 시작되고, 논리적 단계로 구체화되며, 목업으로 검증된다."
AppKit은 다음을 믿습니다:
1. **고객 문제 우선**: 기능보다 고객의 Pain Point 해결
2. **논리적 분해**: 큰 작업을 작은 단계로 쪼개기
3. **빠른 검증**: MVP로 시장 반응 먼저 확인
4. **실행 가능한 문서**: 기획서가 바로 개발로 이어지도록
5. **시각적 확인**: HTML 목업으로 즉시 프로토타입 확인
---
**Version**: 7.1.0 (Simplified Path)
**Last Updated**: 2025-12-14
**Key Update**: [project] 폴더 제거, 모든 출력물 `ui/works/`에 직접 생성