timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/ai-recommend/01-style-design-recommend.md

@@ -0,0 +1,64 @@
+# 1. 디자인 스타일 추천 (Stage 3)
+
+
+### 톤 → 스타일 매핑
+
+Stage 0에서 수집한 `config.planning.qa_answers.Q15` (톤/말투)를 분석하여 스타일을 추천합니다:
+
+| 톤 키워드 | 추천 스타일 (우선순위) |
+|----------|----------------------|
+| 전문적, 신뢰, 비즈니스 | M (엔터프라이즈), D (미니멀), K (대시보드) |
+| 친근한, 캐주얼, 재미 | F (비비드), N (게이미피케이션), S (파스텔) |
+| 고급, 럭셔리, 프리미엄 | Q (모노크롬), X (아트데코), U (노르딕) |
+| 혁신적, 미래지향, 테크 | A (다크네온), Z (사이버펑크), V (코스믹) |
+| 자연, 편안, 건강 | G (자연), Y (에코), U (노르딕) |
+| 활기찬, 에너지, 열정 | T (파이어), O (선셋), F (비비드) |
+| 깔끔한, 심플, 모던 | D (미니멀), I (포커스드), Q (모노크롬) |
+| 창의적, 예술적, 감성 | L (크리에이티브), H (보라), C (3D카드) |
+
+### 프로젝트 유형별 추천 스타일
+
+| 프로젝트 유형 | 추천 스타일 (우선순위) | 추천 토큰 형식 |
+|-------------|----------------------|---------------|
+| 랜딩페이지 | A (다크네온), E (글래스), V (코스믹) | `tailwind` |
+| 대시보드 | K (대시보드), D (미니멀), I (포커스드) | `tailwind` |
+| 이커머스 | F (비비드), W (트로피컬), T (파이어) | `tailwind` |
+| 블로그/콘텐츠 | D (미니멀), Q (모노크롬), U (노르딕) | `tailwind` |
+| SaaS/웹앱 | I (포커스드), K (대시보드), M (엔터프라이즈) | `tailwind` |
+| 포트폴리오 | C (3D카드), L (크리에이티브), Q (모노크롬) | `css_variables` |
+
+### 앱 유형별 추천
+
+| 앱 유형 | 추천 스타일 | 추천 토큰 형식 |
+|--------|-----------|---------------|
+| 유틸리티 | D (미니멀), I (포커스드), J (모바일) | `style_dictionary` |
+| 소셜/커뮤니케이션 | B (파랑), F (비비드), J (모바일) | `style_dictionary` |
+| 게임/엔터테인먼트 | N (게이미피케이션), Z (사이버펑크), R (레트로) | `style_dictionary` |
+| 핀테크 | M (엔터프라이즈), D (미니멀), P (아이스) | `style_dictionary` |
+| 헬스케어/피트니스 | G (자연), P (아이스), Y (에코) | `style_dictionary` |
+| 이커머스 | F (비비드), T (파이어), W (트로피컬) | `style_dictionary` |
+| 교육/학습 | F (비비드), N (게이미피케이션), S (파스텔) | `style_dictionary` |
+| 크리에이티브/미디어 | L (크리에이티브), H (보라), V (코스믹) | `style_dictionary` |
+
+### 비디오 유형별 추천
+
+| 비디오 유형 | 추천 스타일 (우선순위) | 추천 backend | 추천 database |
+|------------|----------------------|-------------|--------------|
+| short_form (숏폼) | F (비비드), A (다크네온), R (레트로) | none | none |
+| long_form (롱폼) | D (미니멀), B (파랑), Q (모노크롬) | none | none |
+| data_viz (데이터 시각화) | K (대시보드), B (파랑), I (포커스드) | fastapi | postgresql |
+| template (템플릿) | D (미니멀), F (비비드), I (포커스드) | none | none |
+| video_saas (비디오 SaaS) | I (포커스드), K (대시보드), M (엔터프라이즈) | fastapi/nestjs | postgresql |
+| interactive (인터랙티브) | A (다크네온), L (크리에이티브), Z (사이버펑크) | none | none |
+
+### 산업별 추천
+
+| 산업 분야 | 추천 스타일 | 추천 토큰 형식 |
+|----------|-----------|---------------|
+| 여행/라이프스타일 | O (선셋), W (트로피컬), G (자연) | `tailwind` |
+| 럭셔리/패션 | Q (모노크롬), X (아트데코), U (노르딕) | `css_variables` |
+| 뷰티/웰니스 | S (파스텔), G (자연), V (코스믹) | `tailwind` |
+| 푸드/레스토랑 | T (파이어), O (선셋), F (비비드) | `tailwind` |
+| 친환경/NGO | Y (에코), G (자연), U (노르딕) | `css_variables` |
+| 테크/스타트업 | A (다크네온), Z (사이버펑크), B (파랑) | `tailwind` |
+

package/skills/web-design/claude-code/defs/ai-recommend.md

@@ -0,0 +1,58 @@
+# 디자인 AI 추천 매핑
+
+> 참조원: `collect/collect-style.md` (스타일 추천)
+> Dependencies: `defs/styles.md`, `defs/tokens.md`
+
+## 1. 디자인 스타일 추천
+
+> 상세: `defs/ai-recommend/01-style-design-recommend.md` 참조
+
+사용자의 프로젝트 톤/분위기 또는 프로젝트 유형을 분석하여 스타일을 추천합니다:
+
+### 톤 → 스타일 매핑
+
+| 톤 키워드 | 추천 스타일 (우선순위) |
+|----------|----------------------|
+| 전문적, 신뢰, 비즈니스 | M (엔터프라이즈), D (미니멀), K (대시보드) |
+| 친근한, 캐주얼, 재미 | F (비비드), N (게이미피케이션), S (파스텔) |
+| 고급, 럭셔리, 프리미엄 | Q (모노크롬), X (아트데코), U (노르딕) |
+| 혁신적, 미래지향, 테크 | A (다크네온), Z (사이버펑크), V (코스믹) |
+| 자연, 편안, 건강 | G (자연), Y (에코), U (노르딕) |
+| 활기찬, 에너지, 열정 | T (파이어), O (선셋), F (비비드) |
+| 깔끔한, 심플, 모던 | D (미니멀), I (포커스드), Q (모노크롬) |
+| 창의적, 예술적, 감성 | L (크리에이티브), H (보라), C (3D카드) |
+
+## 4. 플랫폼별 기본 토큰 형식
+
+| 플랫폼 | 기본 토큰 형식 |
+|--------|---------------|
+| 웹 (Tailwind 사용) | `tailwind` |
+| 웹 (일반) | `css_variables` |
+| PC앱 | `css_variables` |
+| 모바일 앱 | `style_dictionary` |
+| 웹+앱 혼합 | `style_dictionary` |
+| 비디오 (순수) | `json` |
+| 비디오 SaaS | `tailwind` |
+
+## 5. 비디오 프로젝트 토큰 형식
+
+| 비디오 유형 | 기본 토큰 형식 |
+|------------|---------------|
+| 순수 비디오 (short_form, long_form, data_viz, template, interactive) | `json` |
+| 비디오 SaaS (video_saas) | `tailwind` (웹앱용) |
+
+## 추천 로직
+
+```
+function recommend(config):
+    1. project_type + type_detail로 산업/유형 매칭
+    2. 매칭된 테이블에서 추천 스타일 3개 추출
+    3. 첫 번째 추천을 기본 선택으로 제안
+    4. 토큰 형식도 함께 추천
+    5. 사용자에게 표시:
+
+    "🤖 AI 추천: {style_name}
+     프로젝트 유형에 가장 적합한 스타일입니다.
+     다른 추천: {alt1}, {alt2}
+     이 스타일로 진행할까요? (Y/N/다른 스타일 선택)"
+```

package/skills/web-design/claude-code/defs/app-layouts/02-utility.md

@@ -0,0 +1,54 @@
+# 유틸리티 (`utility`) 전용 레이아웃
+
+
+### [U1] 📐 싱글 스크린 (Single Screen)
+- **구조**: 하나의 메인 화면 + 설정
+- **적합**: 계산기, 타이머, 변환기, 메모
+- **화면 흐름**:
+```
+┌─────────────┐
+│   App Bar    │
+├─────────────┤
+│             │
+│  Main View  │
+│  (도구 영역) │
+│             │
+├─────────────┤
+│  Actions    │
+└─────────────┘
+```
+
+### [U2] 📑 탭 + 설정 (Tab + Settings)
+- **구조**: 2~3개 탭 (메인 기능 / 히스토리 / 설정)
+- **적합**: 할일, 습관 트래커, 간단한 기록 앱
+- **화면 흐름**:
+```
+┌─────────────┐
+│   App Bar    │
+├─────────────┤
+│             │
+│   Content   │
+│             │
+├─────────────┤
+│ Tab1│Tab2│⚙️ │
+└─────────────┘
+```
+
+### [U3] 🧩 위젯 기반 (Widget Dashboard)
+- **구조**: 드래그 가능한 위젯 그리드
+- **적합**: 날씨, 시계, 멀티 도구 앱
+- **화면 흐름**:
+```
+┌─────────────┐
+│   App Bar    │
+├──────┬──────┤
+│ W1   │ W2   │
+├──────┼──────┤
+│ W3   │ W4   │
+├──────┴──────┤
+│  + 위젯 추가 │
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/03-social.md

@@ -0,0 +1,71 @@
+# 소셜/커뮤니케이션 (`social`) 전용 레이아웃
+
+
+### [S1] 📰 피드 + 스토리 (Feed + Stories)
+- **구조**: 상단 스토리 바 + 무한 스크롤 피드
+- **적합**: SNS, 커뮤니티, 뉴스
+- **화면 흐름**:
+```
+┌─────────────┐
+│   App Bar    │
+├─────────────┤
+│ ○ ○ ○ ○ ○  │ ← Stories
+├─────────────┤
+│ ┌─────────┐ │
+│ │ Post 1  │ │
+│ └─────────┘ │
+│ ┌─────────┐ │
+│ │ Post 2  │ │
+│ └─────────┘ │
+├─────────────┤
+│🏠│🔍│➕│♡│👤│
+└─────────────┘
+```
+
+### [S2] 💬 채팅 중심 (Chat-Centric)
+- **구조**: 채팅 목록 + 채팅방 + 프로필
+- **적합**: 메신저, 고객 지원, 팀 커뮤니케이션
+- **화면 흐름**:
+```
+┌─────────────┐
+│  Chat List   │
+├─────────────┤
+│ 👤 User A   │
+│ 👤 User B   │
+│ 👤 User C   │
+│             │
+├─────────────┤
+│💬│👥│🔔│⚙️ │
+└─────────────┘
+    ↓ tap
+┌─────────────┐
+│ ← User A    │
+├─────────────┤
+│  Messages   │
+│  Bubble UI  │
+├─────────────┤
+│ [입력창] 📎 │
+└─────────────┘
+```
+
+### [S3] 👤 프로필 + 피드 (Profile + Feed)
+- **구조**: 프로필 헤더 + 콘텐츠 그리드/리스트
+- **적합**: 포트폴리오 공유, 크리에이터 플랫폼
+- **화면 흐름**:
+```
+┌─────────────┐
+│  Profile     │
+│  Header      │
+│  ┌──┬──┬──┐ │
+│  │📷│📝│♡│ │ ← 탭 전환
+│  ├──┴──┴──┤ │
+│  │▪▪▪│▪▪▪│ │
+│  │▪▪▪│▪▪▪│ │ ← 그리드
+│  └────────┘ │
+├─────────────┤
+│🏠│🔍│➕│♡│👤│
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/04-game.md

@@ -0,0 +1,54 @@
+# 게임/엔터테인먼트 (`game`) 전용 레이아웃
+
+
+### [G1] 🎮 풀스크린 몰입형 (Immersive)
+- **구조**: 전체 화면 게임뷰 + HUD 오버레이
+- **적합**: 액션, 퍼즐, 아케이드
+- **화면 흐름**:
+```
+┌─────────────┐
+│ ♡♡♡  Score  │ ← HUD
+│             │
+│  Game View  │
+│  (Full)     │
+│             │
+│    [⬆]      │
+│ [⬅][⬇][➡] │ ← Controls
+└─────────────┘
+```
+
+### [G2] 📋 로비 + 룸 (Lobby + Room)
+- **구조**: 메인 로비 → 방 선택 → 게임
+- **적합**: 멀티플레이어, 보드게임, 퀴즈
+- **화면 흐름**:
+```
+┌─────────────┐
+│   Lobby      │
+├─────────────┤
+│ 🎮 Room 1   │
+│ 🎮 Room 2   │
+│ 🎮 Room 3   │
+├─────────────┤
+│ [방 만들기]  │
+├─────────────┤
+│🏠│🏆│👥│⚙️ │
+└─────────────┘
+```
+
+### [G3] 📊 메뉴 + 게임뷰 (Menu Hub)
+- **구조**: 메인 메뉴 허브 → 모드 선택 → 플레이
+- **적합**: 캐주얼, 시뮬레이션, RPG
+- **화면 흐름**:
+```
+┌─────────────┐
+│   🎮 LOGO   │
+├─────────────┤
+│ [▶ 시작]    │
+│ [📊 기록]   │
+│ [🛒 상점]   │
+│ [⚙️ 설정]   │
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/05-fintech.md

@@ -0,0 +1,62 @@
+# 핀테크 (`fintech`) 전용 레이아웃
+
+
+### [F1] 📊 대시보드 + 카드 (Dashboard Cards)
+- **구조**: 잔액 카드 + 빠른 액션 + 거래 내역
+- **적합**: 뱅킹, 지갑, 자산 관리
+- **화면 흐름**:
+```
+┌─────────────┐
+│  💳 Balance  │
+│  ₩1,234,567 │
+├──────┬──────┤
+│ 송금  │ 결제  │
+│ 충전  │ 더보기│
+├──────┴──────┤
+│ 거래 내역    │
+│ ├ -50,000   │
+│ ├ +200,000  │
+│ └ -12,000   │
+├─────────────┤
+│🏠│📊│💳│⚙️ │
+└─────────────┘
+```
+
+### [F2] 📈 포트폴리오 뷰 (Portfolio View)
+- **구조**: 총자산 차트 + 종목 리스트 + 상세
+- **적합**: 투자, 주식, 암호화폐
+- **화면 흐름**:
+```
+┌─────────────┐
+│  📈 Chart   │
+│  (Area/Line) │
+├─────────────┤
+│ BTC  +5.2%  │
+│ ETH  -1.3%  │
+│ AAPL +2.1%  │
+├─────────────┤
+│🏠│📊│🔍│👤│
+└─────────────┘
+```
+
+### [F3] 📋 거래 중심 (Transaction List)
+- **구조**: 필터/검색 + 거래 타임라인
+- **적합**: 가계부, 영수증 관리, 결제 앱
+- **화면 흐름**:
+```
+┌─────────────┐
+│ [🔍 검색]    │
+│ [필터▼] [정렬]│
+├─────────────┤
+│ 2월 5일      │
+│ ├ 카페 -4,500│
+│ ├ 점심 -8,000│
+│ 2월 4일      │
+│ ├ 급여+3,000k│
+├─────────────┤
+│🏠│📊│➕│⚙️ │
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/06-healthcare.md

@@ -0,0 +1,66 @@
+# 헬스케어/피트니스 (`healthcare`) 전용 레이아웃
+
+
+### [H1] 📊 대시보드 + 타임라인 (Health Dashboard)
+- **구조**: 오늘의 요약 + 건강 지표 카드 + 타임라인
+- **적합**: 건강 관리, 바이탈 트래킹
+- **화면 흐름**:
+```
+┌─────────────┐
+│ 👋 Good AM  │
+├──────┬──────┤
+│ 🫀   │ 🏃   │
+│ 72bpm│ 8,432│
+├──────┼──────┤
+│ 💤   │ 🔥   │
+│ 7.5h │ 1,850│
+├──────┴──────┤
+│ 오늘의 활동  │
+│ ├ 09:00 걷기 │
+│ └ 12:00 운동 │
+├─────────────┤
+│🏠│📊│➕│👤│
+└─────────────┘
+```
+
+### [H2] 🏋️ 트래커 + 차트 (Fitness Tracker)
+- **구조**: 운동 기록 + 진행률 차트 + 루틴
+- **적합**: 운동, 다이어트, 습관 트래커
+- **화면 흐름**:
+```
+┌─────────────┐
+│ 이번 주 목표  │
+│ ████████░░  │
+│ 4/5 완료     │
+├─────────────┤
+│ 📈 주간 차트  │
+│ (Bar Chart)  │
+├─────────────┤
+│ 오늘의 루틴   │
+│ ☑ 스쿼트 3세트│
+│ ☐ 플랭크 60초 │
+├─────────────┤
+│🏠│📊│➕│👤│
+└─────────────┘
+```
+
+### [H3] 📅 예약 기반 (Appointment)
+- **구조**: 캘린더 + 예약 목록 + 의료 기록
+- **적합**: 병원 예약, 상담, 진료 기록
+- **화면 흐름**:
+```
+┌─────────────┐
+│  📅 2월 2026 │
+│ [일월화수목금토]│
+│  ... 5 ...  │
+├─────────────┤
+│ 다음 예약     │
+│ 🏥 2/10 내과  │
+│ 🦷 2/15 치과  │
+├─────────────┤
+│📅│📋│➕│👤│
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/07-ecommerce.md

@@ -0,0 +1,63 @@
+# 이커머스 (`ecommerce`) 전용 레이아웃
+
+
+### [E1] 🛍️ 그리드 카탈로그 (Grid Catalog)
+- **구조**: 카테고리 + 상품 그리드 + 상세
+- **적합**: 종합 쇼핑몰, 마켓플레이스
+- **화면 흐름**:
+```
+┌─────────────┐
+│ [🔍 검색]    │
+│ [카테고리 ▼] │
+├──────┬──────┤
+│ 📦   │ 📦   │
+│ 상품1 │ 상품2 │
+├──────┼──────┤
+│ 📦   │ 📦   │
+│ 상품3 │ 상품4 │
+├──────┴──────┤
+│🏠│🔍│🛒│♡│👤│
+└─────────────┘
+```
+
+### [E2] 📱 싱글 프로덕트 (Single Product Focus)
+- **구조**: 상품 이미지 + 상세 + 구매 CTA
+- **적합**: 브랜드몰, 한정판, 구독 서비스
+- **화면 흐름**:
+```
+┌─────────────┐
+│             │
+│  📸 Product │
+│   Image     │
+│  (Carousel) │
+│             │
+├─────────────┤
+│ Product Name │
+│ ₩99,000     │
+│ ⭐⭐⭐⭐½   │
+│ [옵션 선택▼] │
+├─────────────┤
+│ [🛒 구매하기] │
+└─────────────┘
+```
+
+### [E3] 📂 카테고리 브라우즈 (Category Browse)
+- **구조**: 대분류 → 소분류 → 상품 리스트
+- **적합**: 대형 카탈로그, 식료품, 도서
+- **화면 흐름**:
+```
+┌─────────────┐
+│  Categories  │
+├─────────────┤
+│ 🥗 식품      │
+│ 👕 패션      │
+│ 📱 전자기기   │
+│ 🏠 생활용품   │
+│ 📚 도서      │
+├─────────────┤
+│🏠│📂│🛒│👤│
+└─────────────┘
+```
+
+---
+

package/skills/web-design/claude-code/defs/app-layouts/08-education.md

@@ -0,0 +1,88 @@
+# 교육/학습 (`education`) 전용 레이아웃
+
+
+### [ED1] 📚 코스 리스트 + 플레이어 (Course Player)
+- **구조**: 코스 목록 → 커리큘럼 → 영상/자료
+- **적합**: 온라인 강의, MOOC, 튜토리얼
+- **화면 흐름**:
+```
+┌─────────────┐
+│ 📚 My Courses│
+├─────────────┤
+│ ▶ Course 1  │
+│   ████░░ 60%│
+│ ▶ Course 2  │
+│   ██░░░░ 30%│
+│ ▶ Course 3  │
+│   ░░░░░░ 0% │
+├─────────────┤
+│🏠│📚│🔍│👤│
+└─────────────┘
+
+→ 코스 탭 →
+
+┌─────────────┐
+│ ← Course 1  │
+├─────────────┤
+│  🎬 Video   │
+│  Player     │
+│  (16:9)     │
+├─────────────┤
+│ ✅ Lesson 1 │
+│ ▶ Lesson 2  │
+│ 🔒 Lesson 3 │
+├─────────────┤
+│ [📝 노트]    │
+└─────────────┘
+```
+
+### [ED2] 🃏 카드 진행형 (Card Progress)
+- **구조**: 학습 카드 + 진행률 + 복습
+- **적합**: 단어장, 플래시카드, 퀴즈
+- **화면 흐름**:
+```
+┌─────────────┐
+│  Today's    │
+│  Review     │
+│  ████░░ 12/20│
+├─────────────┐
+│ ┌─────────┐ │
+│ │         │ │
+│ │  Card   │ │
+│ │ (Tap to │ │
+│ │  flip)  │ │
+│ │         │ │
+│ └─────────┘ │
+├──────┬──────┤
+│  ✗   │  ✓   │
+│ Again│ Got it│
+├──────┴──────┤
+│🏠│🃏│📊│👤│
+└─────────────┘
+```
+
+### [ED3] 🎮 퀴즈/인터랙티브 (Quiz Interactive)
+- **구조**: 문제 화면 + 결과 + 리더보드
+- **적합**: 시험 대비, 게이미피케이션 학습
+- **화면 흐름**:
+```
+┌─────────────┐
+│ Q3/10  ⏱ 15s│
+├─────────────┤
+│             │
+│ What is the │
+│ capital of  │
+│ France?     │
+│             │
+├─────────────┤
+│ [A] London  │
+│ [B] Paris ✅│
+│ [C] Berlin  │
+│ [D] Madrid  │
+├─────────────┤
+│ 🔥 x3 Combo│
+│ Score: 250  │
+└─────────────┘
+```
+
+---

package/skills/web-design/claude-code/defs/app-layouts/09-creative.md

@@ -0,0 +1,86 @@
+# 크리에이티브/미디어 (`creative`) 전용 레이아웃
+
+
+### [CR1] 🎨 캔버스 + 도구 (Canvas + Tools)
+- **구조**: 전체 화면 캔버스 + 사이드/하단 도구바
+- **적합**: 그림, 사진 편집, 디자인
+- **화면 흐름**:
+```
+┌─────────────┐
+│ ← 🔄 ↩ ↪ 💾│
+├─────────────┤
+│             │
+│   Canvas    │
+│   Area      │
+│  (Pinch/    │
+│   Pan/Zoom) │
+│             │
+├─────────────┤
+│🖌️│✏️│⬜│🔤│🎨│
+│ Brush|Pen|  │
+│ Shape|Text| │
+│ Color       │
+└─────────────┘
+```
+
+### [CR2] 🖼️ 갤러리 + 에디터 (Gallery + Editor)
+- **구조**: 미디어 갤러리 → 편집 화면
+- **적합**: 사진/비디오 편집, 콜라주
+- **화면 흐름**:
+```
+┌─────────────┐
+│ 📷 Gallery  │
+├──────┬──────┤
+│ 🖼️   │ 🖼️   │
+│ img1 │ img2 │
+├──────┼──────┤
+│ 🖼️   │ 🖼️   │
+│ img3 │ img4 │
+├──────┴──────┤
+│ [+ Create]  │
+├─────────────┤
+│🏠│🖼️│➕│♡│👤│
+└─────────────┘
+
+→ 편집 모드 →
+
+┌─────────────┐
+│ ✗    Edit  ✓│
+├─────────────┤
+│             │
+│  Preview    │
+│  (Filtered) │
+│             │
+├─────────────┤
+│ ☀️ Bright   │
+│ ━━━━●━━━━━━ │
+│ 🎨 Contrast │
+│ ━━━━━━●━━━━ │
+├─────────────┤
+│[Auto][Filter]│
+└─────────────┘
+```
+
+### [CR3] 📰 피드 + 생성 (Feed + Create)
+- **구조**: 콘텐츠 피드 + FAB 생성 버튼
+- **적합**: 블로그, 노트, 일기
+- **화면 흐름**:
+```
+┌─────────────┐
+│ 📝 My Notes │
+├─────────────┤
+│ ┌─────────┐ │
+│ │ Note 1  │ │
+│ │ 2h ago  │ │
+│ └─────────┘ │
+│ ┌─────────┐ │
+│ │ Note 2  │ │
+│ │ 1d ago  │ │
+│ └─────────┘ │
+│         [+] │ ← FAB
+├─────────────┤
+│🏠│📝│🔍│👤│
+└─────────────┘
+```
+
+---