④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,160 @@
+# Duolingo에서 영감을 받은 디자인 시스템
+
+> Category: 생산성 & SaaS
+> 언어 학습 플랫폼. 밝은 올빼미 그린, 굵직한 그림자, 게임화된 즐거움.
+
+## 1. 비주얼 테마와 분위기
+
+Duolingo는 시각 언어로 표현된 게임화 디자인입니다. 인터페이스는 거리낌 없이 밝으며, **올빼미 그린**(`#58cc02`)을 브랜드 프라이머리로 사용하고 모든 인터랙티브 요소 하단에 4px의 굵직한 그림자를 두어 눌리기를 기다리는 3D 버튼처럼 보입니다. 페이지는 흰색(`#ffffff`)이며 2–3px의 굵은 테두리는 진한 회색(`#e5e5e5`)으로, 전체 시스템은 더 나은 계층 구조로 재탄생한 2015년 iOS 앱처럼 읽힙니다.
+
+타이포그래피는 크롬에 **Feather Bold**(커스텀 둥근 산세리프), 본문에 **Mona Sans**(또는 Inter)를 사용합니다. 디스플레이 크기는 크고 자신감 넘치며——Duolingo는 절대 속삭이지 않습니다. 제목에는 종종 초록색 밑줄 획이 있거나 초록색 필 위에 올라가며, 마스코트 Duo(초록색 올빼미)는 정적인 로고가 아닌 활동적인 일러스트 캐릭터로 등장합니다.
+
+형태 언어는 친근합니다: 카드에 16–20px 반지름, 버튼에 12px, 칩과 프로그레스 바에 9999px. 아이코노그래피는 채워진 형태의 둥근 스타일이며 스킬별로 색상이 코딩되어——모든 레슨 화면에는 즉시 식별 가능한 색상 쌍이 있습니다.
+
+**주요 특징:**
+- 올빼미 그린(`#58cc02`)이 지배적인 브랜드 컬러로 서페이스의 30% 이상 사용
+- 모든 버튼에 4px 굵직한 바텀 그림자("촉각적 누름" 어포던스)
+- 2–3px 솔리드 테두리, 헤어라인은 절대 사용 안 함
+- Feather Bold(둥근 디스플레이) + Mona Sans(본문)
+- 크고 자신감 넘치는 텍스트——디스플레이 크기는 48px에서 시작해 올라감
+- 마스코트=캐릭터: Duo 올빼미가 온보딩, 오류, 스트릭에 등장
+- 스트릭 오렌지(`#ff9600`)와 젬 핑크(`#ce82ff`)가 세컨더리 브랜드 컬러
+
+## 2. 컬러 팔레트와 역할
+
+### 프라이머리
+- **올빼미 그린**(`#58cc02`): 브랜드 프라이머리, 주요 CTA, 정답.
+- **올빼미 그린 딥**(`#58a700`): 초록 버튼의 누름/그림자 색상.
+- **올빼미 그린 라이트**(`#89e219`): 호버, 소프트 필.
+- **올빼미 그린 페일**(`#dbf8c5`): 소프트 서페이스, 성공 배너.
+
+### 세컨더리 악센트
+- **스트릭 오렌지**(`#ff9600`): 스트릭 카운터, 불꽃 아이콘, 프리미엄 에너지.
+- **스트릭 오렌지 딥**(`#cc7a00`): 오렌지 눌림 상태.
+- **젬 핑크**(`#ce82ff`): 젬 화폐, Super Duolingo.
+- **장어 블루**(`#1cb0f6`): 힌트 버튼, 정보 링크.
+- **카디널 레드**(`#ff4b4b`): 오답, 목숨 소실.
+- **비 옐로우**(`#ffc800`): 프로 배지, 업적.
+
+### 서페이스
+- **스노우**(`#ffffff`): 프라이머리 배경.
+- **장어**(`#f7f7f7`): 섹션 구분, 세컨더리 서페이스.
+- **스완**(`#e5e5e5`): 비활성화 배경, 인셋 블록.
+- **울프**(`#777777`): 다크 구분선, 세컨더리 텍스트.
+
+### 잉크 & 텍스트
+- **장어 블랙**(`#3c3c3c`): 프라이머리 텍스트.
+- **울프**(`#777777`): 세컨더리 텍스트, 캡션.
+- **헤어**(`#afafaf`): 비활성화, 플레이스홀더.
+
+### 테두리
+- **스완**(`#e5e5e5`): 표준 2px 테두리.
+- **헤어**(`#afafaf`): 호버 시 강조 테두리.
+
+## 3. 타이포그래피 규칙
+
+### 폰트 패밀리
+- **디스플레이 / UI / 제목**: `Feather Bold`, 폴백: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
+- **본문 / 장문**: `Mona Sans`, 폴백: `'Helvetica Neue', system-ui, sans-serif`
+- **코드 (드물게, 학교/관리)**: `JetBrains Mono`, 폴백: `ui-monospace, Menlo, monospace`
+
+### 계층 구조
+
+| 역할 | 폰트 | 크기 | 굵기 | 줄간격 | 자간 | 비고 |
+|------|------|------|--------|-------------|----------------|-------|
+| 디스플레이 | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | 온보딩 히어로 |
+| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | 페이지 제목 |
+| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | 섹션 제목 |
+| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | 카드 제목, 레슨 행 |
+| 본문 라지 | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | 레슨 프롬프트, 안내 |
+| 본문 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 표준 산문 |
+| 캡션 | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP 카운터, 메타데이터 |
+| 버튼 | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 표준 버튼 레이블 |
+| 스트릭 | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | 스트릭 숫자, 불꽃 위 |
+
+### 원칙
+- **800이 기본값**: Feather Bold는 제목과 버튼에서 800으로 실행됩니다. 이 시스템에서 700은 약하게 보입니다.
+- **큰 타입**: 제목 크기가 일반적인 제품 브랜드보다 25–40% 더 크며——자신감이 곧 정체성입니다.
+- **둥근 글자꼴**: 모든 글리프에 부드러운 끝부분이 있습니다. 날카로운 세리프는 친근함의 계약을 깨뜨립니다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**프라이머리 (올빼미 그린)**
+- 배경: `#58cc02`
+- 텍스트: `#ffffff`
+- 패딩: 14px 24px
+- 반지름: 16px
+- 바텀 테두리: 4px solid `#58a700` (굵직한 그림자)
+- 호버: 배경 `#89e219`
+- 액티브: translate-y 4px, 바텀 테두리 0 (버튼 "눌림")
+- 사용: "계속", "확인", 메인 CTA.
+
+**세컨더리 (바텀 그림자가 있는 흰색)**
+- 배경: `#ffffff`
+- 텍스트: `#777777`
+- 테두리: 2px solid `#e5e5e5`
+- 바텀 테두리: 4px solid `#e5e5e5`
+- 반지름: 16px
+- 패딩: 14px 24px
+- 호버: 텍스트 `#3c3c3c`, 테두리 `#afafaf`
+
+**스트릭 오렌지**
+- 배경: `#ff9600`
+- 텍스트: `#ffffff`
+- 바텀 테두리: 4px solid `#cc7a00`
+- 사용: 스트릭 목표, "스트릭 시작"
+
+**에러 (카디널 레드)**
+- 배경: `#ff4b4b`
+- 텍스트: `#ffffff`
+- 바텀 테두리: 4px solid `#cc3b3b`
+- 사용: 오답 피드백.
+
+### 카드 / 레슨 타일
+- 배경: `#ffffff`
+- 테두리: 2px solid `#e5e5e5`
+- 바텀 테두리: 4px solid `#e5e5e5`
+- 반지름: 16px
+- 패딩: 16px
+- 호버: 2px 상승, 그림자 `0 4px 0 #d7d7d7`
+
+### 스킬 트리 노드 (레슨 버블)
+- 크기: 80×72px
+- 배경: 스킬 색상 tint (활성화는 초록, 잠김은 회색)
+- 바텀 테두리: 6px solid 더 어두운 변형
+- 반지름: 50% (원형)
+- 활성화: 1.6s마다 1.0 → 1.05 펄스
+
+### 입력
+- 배경: `#ffffff`
+- 테두리: 2px solid `#e5e5e5`
+- 반지름: 12px
+- 패딩: 12px 16px
+- 포커스: 테두리 `#1cb0f6` (장어 블루), 링 `0 0 0 3px rgba(28, 176, 246, 0.2)`
+
+### 프로그레스 바
+- 트랙: `#e5e5e5`
+- 필: `#58cc02` (또는 스트릭 시 `#ff9600`)
+- 반지름: 9999px
+- 높이: 16px
+- 애니메이션 필: 증가 시 320ms ease-out.
+
+## 5. 간격 & 레이아웃
+
+- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64.
+- **컨테이너**: 최대 1080px, 24px 거터.
+- **레슨 트리 열**: 너비 320px; 데스크톱에서 중앙 정렬.
+
+## 6. 모션
+
+- **지속시간**: 버튼 누름 180ms; 스킬 노드 잠금 해제 320ms; 활성 노드 펄스 1.6s.
+- **이징**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (백아웃, 약간의 오버슈트) 잠금 해제용.
+- **마스코트**: Duo는 4–6s마다 눈을 깜빡이고, 스트릭 마일스톤에서 점프 (480ms ease-out 스프링).
+
+## 7. 사용 가이드라인
+
+- 고채도 올빼미 그린, 굵직한 바텀 그림자, 둥근 레슨 기하학적 요소를 함께 유지하세요. 평평한 초록 버튼 단독으로는 Duolingo처럼 읽히지 않습니다.
+- 특대형 볼드 타입은 제품이 격려나 피드백이 필요한 레슨, 스트릭, 진행 상황 순간을 위해 아껴두세요.
+- 플레이풀한 모션은 진행 상태 변화 주변에 절제하여 사용하고, 모든 컨트롤에 일반적인 바운시 애니메이션을 사용하는 것은 피하세요.