0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ 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

8.9 KiB

Raw Blame History

Design System Inspired by Discord

Category: Productivité & SaaS Plateforme de messagerie et de chat vocal. Blurple profond, surfaces prioritairement sombres, moments d'accent enjoués.

1. Visual Theme & Atmosphere

Le produit Discord est conçu pour les soirées, les raids et les sessions de chat vocal en groupe — l'ensemble de la surface est donc prioritairement sombre. Le canevas par défaut est le profond Background Primary (#313338 thème clair, #1e1f22 thème sombre), avec des colonnes de chat superposées sur des teintes légèrement plus claires ou plus foncées pour distinguer les canaux, les fils de discussion et les panneaux latéraux. Le Blurple signature (#5865f2) est réservé à la marque, aux CTA principaux, aux mentions et à l'affordance « vous » — utilisé avec parcimonie pour qu'il ressorte sur les neutres atténués.

La typographie utilise gg sans (le Whitney-replacement personnalisé de Discord) pour le corps du texte et l'interface, avec des formes géométriques arrondies qui paraissent accueillantes tout en restant lisibles aux petites tailles qu'exige un client de messagerie. Les titres augmentent progressivement ; les lignes de chat sont serrées (4–8px entre les groupes de messages) pour que des heures de défilement restent facilement parcourables.

Le langage des formes est arrondi sans être excessivement doux : rayons de 8px sur les cartes, 4px sur les champs de saisie, pilules complètes sur les badges de statut et les étiquettes. Les serveurs sont des avatars carrés arrondis de 48px qui se transforment en cercles au survol — un détail d'animation qui fait désormais partie de l'identité de la marque.

Key Characteristics:

Surfaces prioritairement sombres : #1e1f22 / #2b2d31 / #313338 (profondeur en 3 niveaux)
Blurple #5865f2 comme seul accent saturé dans la surface de chat
gg sans (style Whitney) pour tous les textes — convivial, géométrique, neutre
Avatars de serveur en carré arrondi (rayon 16px) qui se transforment en cercles au survol
Espacement serré entre les lignes de chat, rembourrage généreux dans les panneaux latéraux
Points de statut : vert en ligne, jaune inactif, rouge ne pas déranger, gris hors ligne
Séparateurs de 1px alignés sur la grille de pixels, en blanc cassé à faible opacité

2. Color Palette & Roles

Primary

Blurple (#5865f2): Couleur principale de la marque, CTA principal, mise en évidence des mentions.
Blurple Hover (#4752c4): Survol/actif pour le blurple.
Blurple Soft (#7289da): Blurple hérité, accent secondaire dans le marketing.

Surface (Dark Theme — default)

Background Tertiary (#1e1f22): Rail de la liste des serveurs, arrière-plan le plus profond.
Background Secondary (#2b2d31): Barre latérale des canaux, barre latérale des paramètres.
Background Primary (#313338): Surface de chat, colonne des messages.
Background Floating (#111214): Popovers flottants, infobulles, autocomplétion.
Background Modifier Hover (rgba(78, 80, 88, 0.3)): Superposition de survol sur les lignes.
Background Modifier Selected (rgba(78, 80, 88, 0.6)): Ligne active.

Surface (Light Theme)

Light Bg Primary (#ffffff): Surface de chat en thème clair.
Light Bg Secondary (#f2f3f5): Barre latérale en thème clair.
Light Bg Tertiary (#e3e5e8): Surface claire la plus profonde.

Text

Header Primary (#f2f3f5): En-têtes de canaux, titres de modales en thème sombre.
Header Secondary (#b5bac1): En-têtes atténués.
Text Normal (#dbdee1): Corps du texte en thème sombre — légèrement plus froid que le blanc pur.
Text Muted (#949ba4): Horodatages, noms de serveurs, métadonnées secondaires.
Text Link (#00a8fc): Hyperliens dans les messages — bleu ciel, distinct du blurple.
Channels Default (#80848e): Nom du canal inactif dans la barre latérale.

Status & Semantic

Status Online (#23a55a): Point en ligne, états de succès.
Status Idle (#f0b232): Point inactif, absent.
Status DND (#f23f43): Ne pas déranger, sert également de rouge destructif.
Status Streaming (#593695): Violet « En direct ».
Status Offline (#80848e): Gris hors ligne.
Mention Highlight (rgba(88, 101, 242, 0.1)): Légère teinte blurple sur les lignes de @mention.

Border & Divider

Background Modifier Accent (rgba(255, 255, 255, 0.06)): Séparateur standard en thème sombre.
Border Subtle (#3f4147): Séparateur solide pour les cartes.

3. Typography Rules

Font Family

Body / UI / Headings: gg sans, avec repli : "Helvetica Neue", Helvetica, Arial, sans-serif
Display (legacy / Whitney): Whitney, avec repli : gg sans
Code / Mono: "gg mono", avec repli : Consolas, Andale Mono, Courier New, Courier, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Hero	gg sans	56px (3.5rem)	800	1.1	-0.02em	Hero marketing
Page Heading	gg sans	24px (1.5rem)	700	1.25	normal	Titres paramètres/profil
Channel Name	gg sans	16px (1rem)	600	1.25	normal	`#general`, en-tête de canal
Message Body	gg sans	16px (1rem)	400	1.375	normal	Texte de chat standard
Username	gg sans	16px (1rem)	500	1.25	normal	Auteur d'un message
Timestamp	gg sans	12px (0.75rem)	500	1.25	normal	« Aujourd'hui à 16:32 »
Sidebar Channel	gg sans	16px (1rem)	500	1.25	normal	Lignes de la liste des canaux
Server Name	gg sans	16px (1rem)	600	1.25	normal	En-tête du serveur
Caption / Meta	gg sans	12px (0.75rem)	400	1.3	0.02em	Texte de statut, balise modifiée
Code Inline	gg mono	0.875em	400	inherit	normal	`code` en ligne
Code Block	gg mono	14px (0.875rem)	400	1.5	normal	Bloc `triple-backtick`

Principles

Géométrie conviviale : gg sans remplace Whitney avec des terminaisons arrondies sur a/g/s — la marque recherche la chaleur sans sacrifier la lisibilité.
Contraste par les graisses plutôt que par les couleurs : la hiérarchie repose sur les paliers de graisse 400→500→600→700→800 ; la surface reste neutre.
Corps à 16px : les messages de chat ne descendent pas en dessous de 16px. La densité vient de l'interligne (1.375), pas de la taille de police.

4. Component Stylings

Buttons

Primary

Background: #5865f2
Text: #ffffff
Padding: 8px 16px
Radius: 4px
Hover: #4752c4
Utilisation : CTA principaux, « Continuer », « Rejoindre le serveur »

Secondary

Background: #4e5058
Text: #ffffff
Padding: 8px 16px
Radius: 4px
Hover: #6d6f78

Tertiary / Subtle (Link-style)

Background: transparent
Text: #dbdee1
Hover: texte souligné, pas de changement d'arrière-plan

Danger

Background: #da373c
Text: #ffffff
Hover: #a12d2f

Inputs

Background: #1e1f22
Text: #dbdee1
Border: 1px solid #1e1f22
Radius: 4px
Padding: 10px 12px
Focus: border #5865f2

Server Avatars

Size: 48×48px
Radius: 16px (carré arrondi) par défaut ; passe à 50% au survol et à l'état actif.
État actif : pilule blanche de 4px sur le bord gauche de la colonne d'icônes.

Status Dots

Size: 10×10px
Border: 3px solid background-tertiary (crée l'effet d'« encoche »)
Position: en bas à droite de l'avatar.

Cards / Embeds

Background: #2b2d31 (sombre) ou #f2f3f5 (clair)
Bordure gauche: 4px solid couleur d'accent de l'embed.
Radius: 4px
Padding: 8px 16px

Mention Pill

Background: rgba(88, 101, 242, 0.3)
Text: #c9cdfb
Padding: 0 2px
Radius: 3px

5. Spacing & Layout

Unité de base : 4px. Échelle : 4, 8, 12, 16, 20, 24, 32, 40.
Rail des serveurs : 72px de large, fixe.
Barre latérale des canaux : 240px de large.
Liste des membres : 240px de large sur ordinateur de bureau.
Colonne de chat : fluide, minimum 380px.

6. Motion

Durée : 200ms pour le survol ; 350ms pour la morphose avatar en cercle ; 80ms pour l'apparition de l'infobulle.
Easing: cubic-bezier(0.215, 0.61, 0.355, 1) pour la morphose de l'avatar (départ vif puis stabilisation).
Impulsion de notification : 1.4s ease-in-out infinite sur l'indicateur de mention non lue.

7. Usage Guardrails

Conserver ensemble l'enveloppe sombre, la densité compacte et la hiérarchie d'actions en blurple ; utiliser le blurple sur une mise en page marketing à fond clair rompt l'identité produit de Discord.
Structurer les surfaces à forte navigation autour de rails, de barres latérales et de colonnes de chat plutôt que de cartes décoratives isolées.
Utiliser le langage avatar carré arrondi et point de statut pour représenter des personnes, des serveurs ou une présence active.

8.9 KiB Raw Blame History Unescape Escape