④段整套同步（六节＋ 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,168 @@
+# Discord에서 영감받은 디자인 시스템
+
+> Category: 생산성 및 SaaS
+> 음성/채팅 플랫폼. 짙은 블러플, 다크 우선 서피스, 포인트 액센트.
+
+## 1. 비주얼 테마 & 분위기
+
+Discord의 제품은 야간 플레이, 레이드, 그룹 음성 통화를 위해 설계되었으므로 전체 서피스는 다크 우선입니다. 기본 캔버스는 짙은 `Background Primary`(`#313338` 라이트 테마, `#1e1f22` 다크 테마)이며, 채널·스레드·사이드 패널을 구분하기 위해 채팅 컬럼은 약간 밝거나 어두운 음영으로 겹겹이 쌓여 있습니다. 시그니처 **블러플**(`#5865f2`)은 브랜드 마크, 주요 CTA, 멘션, "나" 어포던스에만 사용되며, 절제된 뉴트럴 톤 위에서 도드라지도록 아낌없이 아껴 씁니다.
+
+타이포그래피는 산문과 크롬 UI에 **gg sans**(Discord의 커스텀 Whitney 대체 서체)를 사용하며, 채팅 클라이언트에서 요구하는 작은 크기에서도 친근하면서 가독성이 유지되는 둥근 기하학적 형태를 갖습니다. 헤딩은 단계별로 점진적으로 커지고, 채팅 행 간격은 촘촘하게(메시지 그룹 사이 4–8px) 유지되어 몇 시간치 스크롤백도 빠르게 훑어볼 수 있습니다.
+
+형태 언어는 둥글지만 풍선처럼 부드럽지는 않습니다. 카드에는 8px 반경, 입력 필드에는 4px 반경, 상태 배지와 태그에는 완전한 필 모양을 사용합니다. 서버 아이콘은 48px 크기의 둥근 사각형 아바타이며 호버 시 원으로 변형되는데, 이 작은 모션이 브랜드 아이덴티티의 일부가 되었습니다.
+
+**주요 특성:**
+- 다크 우선 서피스: `#1e1f22` / `#2b2d31` / `#313338` (3단계 깊이)
+- 채팅 서피스의 유일한 채도 높은 액센트인 블러플 `#5865f2`
+- 모든 텍스트에 gg sans (Whitney 스타일) — 친근하고 기하학적이며 중립적
+- 호버 시 원으로 전환되는 둥근 사각형 서버 아바타 (16px 반경)
+- 촘촘한 채팅 행 간격, 여유로운 사이드 패널 패딩
+- 상태 점: 초록색 온라인, 노란색 자리 비움, 빨간색 방해 금지, 회색 오프라인
+- 낮은 알파값의 은은한 오프화이트 1px 픽셀 스냅 구분선
+
+## 2. 색상 팔레트 & 역할
+
+### 프라이머리
+- **블러플** (`#5865f2`): 브랜드 프라이머리, 주요 CTA, 멘션 하이라이트.
+- **블러플 호버** (`#4752c4`): 블러플의 호버/활성 상태.
+- **블러플 소프트** (`#7289da`): 레거시 블러플, 마케팅 보조 액센트.
+
+### 서피스 (다크 테마 — 기본)
+- **Background Tertiary** (`#1e1f22`): 서버 목록 레일, 가장 깊은 배경.
+- **Background Secondary** (`#2b2d31`): 채널 사이드바, 설정 사이드바.
+- **Background Primary** (`#313338`): 채팅 서피스, 메시지 컬럼.
+- **Background Floating** (`#111214`): 플로팅 팝오버, 툴팁, 자동완성.
+- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): 행 위의 호버 오버레이.
+- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): 활성 행.
+
+### 서피스 (라이트 테마)
+- **Light Bg Primary** (`#ffffff`): 라이트 테마의 채팅 서피스.
+- **Light Bg Secondary** (`#f2f3f5`): 라이트 테마의 사이드바.
+- **Light Bg Tertiary** (`#e3e5e8`): 가장 깊은 라이트 서피스.
+
+### 텍스트
+- **Header Primary** (`#f2f3f5`): 다크 테마의 채널 헤더, 모달 제목.
+- **Header Secondary** (`#b5bac1`): 음소거된 헤더.
+- **Text Normal** (`#dbdee1`): 다크 테마 본문 텍스트 — 순수 흰색보다 약간 차갑습니다.
+- **Text Muted** (`#949ba4`): 타임스탬프, 서버 이름, 보조 메타데이터.
+- **Text Link** (`#00a8fc`): 메시지 내 하이퍼링크 — 블러플과 구별되는 하늘색.
+- **Channels Default** (`#80848e`): 사이드바의 비활성 채널 이름.
+
+### 상태 & 시맨틱
+- **Status Online** (`#23a55a`): 온라인 점, 성공 상태.
+- **Status Idle** (`#f0b232`): 자리 비움 점, 부재 중.
+- **Status DND** (`#f23f43`): 방해 금지, 파괴적 동작의 빨간색으로도 사용.
+- **Status Streaming** (`#593695`): "스트리밍" 보라색.
+- **Status Offline** (`#80848e`): 오프라인 회색.
+- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @멘션 행의 은은한 블러플 워시.
+
+### 테두리 & 구분선
+- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): 다크 테마의 표준 구분선.
+- **Border Subtle** (`#3f4147`): 카드용 솔리드 구분선.
+
+## 3. 타이포그래피 규칙
+
+### 글꼴 패밀리
+- **본문 / UI / 헤딩**: `gg sans`, 폴백: `"Helvetica Neue", Helvetica, Arial, sans-serif`
+- **디스플레이 (레거시 / Whitney)**: `Whitney`, 폴백: `gg sans`
+- **코드 / 모노**: `"gg mono"`, 폴백: `Consolas, Andale Mono, Courier New, Courier, monospace`
+
+### 계층 구조
+
+| 역할 | 글꼴 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 마케팅 히어로 |
+| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 설정/프로필 제목 |
+| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, 채널 헤더 |
+| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 표준 채팅 텍스트 |
+| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 메시지 작성자 |
+| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
+| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 채널 목록 행 |
+| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 서버 헤더 |
+| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 상태 텍스트, 수정 태그 |
+| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 인라인 `code` |
+| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```삼중 펜스``` 블록 |
+
+### 원칙
+- **친근한 기하학**: gg sans는 a/g/s의 둥근 터미널로 Whitney를 대체합니다 — 브랜드는 가독성을 해치지 않으면서 따뜻함을 추구합니다.
+- **색상 대비보다 굵기 대비**: 계층 구조는 400→500→600→700→800 굵기 단계로 표현되며 서피스는 뉴트럴을 유지합니다.
+- **16px 본문**: 채팅 메시지는 16px 아래로 줄어들지 않습니다. 밀도는 글꼴 크기가 아닌 줄 높이(1.375)로 조절합니다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**프라이머리**
+- Background: `#5865f2`
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 4px
+- Hover: `#4752c4`
+- 사용처: 주요 CTA, "계속하기", "서버 참가"
+
+**세컨더리**
+- Background: `#4e5058`
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 4px
+- Hover: `#6d6f78`
+
+**터셔리 / 서틀 (링크 스타일)**
+- Background: transparent
+- Text: `#dbdee1`
+- Hover: 텍스트 밑줄 표시, 배경 변화 없음
+
+**위험**
+- Background: `#da373c`
+- Text: `#ffffff`
+- Hover: `#a12d2f`
+
+### 입력 필드
+- Background: `#1e1f22`
+- Text: `#dbdee1`
+- Border: 1px solid `#1e1f22`
+- Radius: 4px
+- Padding: 10px 12px
+- 포커스: border `#5865f2`
+
+### 서버 아바타
+- 크기: 48×48px
+- 반경: 기본값 16px (둥근 사각형); 호버 및 활성 상태에서 50%로 전환.
+- 활성 상태: 아이콘 컬럼 왼쪽 가장자리에 4px 흰색 필 표시.
+
+### 상태 점
+- 크기: 10×10px
+- 테두리: 3px solid background-tertiary ("노치" 효과 생성)
+- 위치: 아바타 우하단.
+
+### 카드 / 임베드
+- Background: `#2b2d31` (다크) 또는 `#f2f3f5` (라이트)
+- 왼쪽 테두리: 4px solid 임베드 액센트 색상.
+- Radius: 4px
+- Padding: 8px 16px
+
+### 멘션 필
+- Background: `rgba(88, 101, 242, 0.3)`
+- Text: `#c9cdfb`
+- Padding: 0 2px
+- Radius: 3px
+
+## 5. 간격 & 레이아웃
+
+- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 20, 24, 32, 40.
+- **서버 레일**: 너비 72px, 고정.
+- **채널 사이드바**: 너비 240px.
+- **멤버 목록**: 데스크톱에서 너비 240px.
+- **채팅 컬럼**: 유동적, 최소 380px.
+
+## 6. 모션
+
+- **지속 시간**: 호버 200ms; 아바타 원형 변형 350ms; 툴팁 페이드 80ms.
+- **이징**: 아바타 변형에 `cubic-bezier(0.215, 0.61, 0.355, 1)` (빠르게 시작 후 안착).
+- **알림 펄스**: 읽지 않은 멘션 인디케이터에 1.4s ease-in-out infinite.
+
+## 7. 사용 가이드라인
+
+- 다크 쉘, 촘촘한 밀도, 블러플 액션 계층 구조를 함께 유지하세요. 밝은 마케팅 스타일 레이아웃에 블러플을 사용하면 Discord 제품의 느낌이 무너집니다.
+- 내비게이션이 많은 서피스는 독립적인 장식용 카드보다 레일, 사이드바, 채팅 컬럼 중심으로 구성하세요.
+- 사람, 서버, 또는 활성 현재 상태를 나타낼 때는 둥근 사각형 아바타와 상태 점 언어를 사용하세요.