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

11 KiB

Raw Blame History

Discordにインスパイアされたデザインシステム

Category: 生産性・SaaS ボイス／チャットプラットフォーム。深みのあるブラープル、ダークファーストのサーフェス、遊び心あるアクセント。

1. ビジュアルテーマと雰囲気

Discordのプロダクトは、夜のセッション、レイド、グループボイス通話のために設計されているため、全体のサーフェスはダークファーストで構成されています。デフォルトのキャンバスは深みのある Background Primary（ライトテーマ: #313338、ダークテーマ: #1e1f22）で、チャットカラムはチャンネル・スレッド・サイドパネルを区別するため、わずかに明るいまたは暗いシェードで重ね合わされています。シグネチャーカラーの Blurple（#5865f2）はブランドマーク、主要CTA、メンション、「自分」を示すアフォーダンスのみに使用され、落ち着いたニュートラルな背景の中で際立つよう、控えめに用いられています。

タイポグラフィには gg sans（DiscordのカスタムWhitneyの後継フォント）が使用されており、丸みを帯びたジオメトリック形状がチャットクライアントに求められる小さなサイズでも親しみやすく、かつ読みやすい印象を与えます。見出しは段階的にサイズが上がり、チャット行の間隔は詰め気味（メッセージグループ間4〜8px）で、長時間のスクロールでも見渡しやすく設計されています。

形状言語は丸みを帯びつつも、膨らんだ印象は持ちません。カードは角丸8px、インプットは4px、ステータスバッジやタグには全円のピルを使用しています。サーバーアバターは48pxの角丸スクエアで、ホバー時に円形に変化するアニメーションは、ブランドアイデンティティの一部となっています。

主な特徴:

ダークファーストサーフェス: #1e1f22 / #2b2d31 / #313338（3段階の深度）
チャットサーフェスの唯一の彩度あるアクセントとしての Blurple #5865f2
全テキストに gg sans（Whitneyスタイル）— フレンドリー、ジオメトリック、ニュートラル
ホバー時に円形へスナップする角丸スクエアのサーバーアバター（角丸16px）
チャット行の詰めたスペーシングと、サイドパネルの余裕あるパディング
ステータスドット: 緑でオンライン、黄でアイドル、赤でDND、グレーでオフライン
低アルファの淡いオフホワイトによるピクセルスナップ1px区切り線

2. カラーパレットとその役割

プライマリ

Blurple (#5865f2): ブランドプライマリ、主要CTA、メンションハイライト。
Blurple Hover (#4752c4): Blurpleのホバー／アクティブ状態。
Blurple Soft (#7289da): レガシーBlurple、マーケティングでのセカンダリアクセント。

サーフェス（ダークテーマ — デフォルト）

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): メッセージ内のハイパーリンク — スカイブルー、Blurpleとは異なる色。
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)): @メンション行への淡いBlurpleウォッシュ。

ボーダーと区切り線

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	マーケティングヒーロー
ページ見出し	gg sans	24px (1.5rem)	700	1.25	normal	設定・プロフィールタイトル
チャンネル名	gg sans	16px (1rem)	600	1.25	normal	`#general`、チャンネルヘッダー
メッセージ本文	gg sans	16px (1rem)	400	1.375	normal	標準チャットテキスト
ユーザー名	gg sans	16px (1rem)	500	1.25	normal	メッセージの送信者
タイムスタンプ	gg sans	12px (0.75rem)	500	1.25	normal	"Today at 4:32 PM"
サイドバーチャンネル	gg sans	16px (1rem)	500	1.25	normal	チャンネルリスト行
サーバー名	gg sans	16px (1rem)	600	1.25	normal	サーバーヘッダー
キャプション / メタ	gg sans	12px (0.75rem)	400	1.3	0.02em	ステータステキスト、編集済みタグ
インラインコード	gg mono	0.875em	400	inherit	normal	インライン `code`
コードブロック	gg mono	14px (0.875rem)	400	1.5	normal	`三重フェンス` ブロック

原則

フレンドリーなジオメトリー: gg sans はWhitneyの後継として、a/g/sの文字に丸みのある字形を採用 — ブランドは読みやすさを損なわない温かみを求めています。
色のコントラストよりウェイトのコントラスト: 階層は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
Radius: デフォルト16px（角丸スクエア）、ホバー時およびアクティブ時に50%へ遷移。
アクティブ状態: アイコンカラムの左端に4pxのホワイトピル。

ステータスドット

サイズ: 10×10px
Border: 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. 使用上のガイドライン

ダークシェル、コンパクトな情報密度、Blurpleのアクション階層は一体として保持すること。ライトなマーケティングスタイルのレイアウトにBlurpleを使用すると、Discordプロダクトの雰囲気が崩れます。
ナビゲーションが多いサーフェスは、孤立した装飾的なカードではなく、レール・サイドバー・チャットカラムを中心に構成すること。
人物・サーバー・アクティブなプレゼンスを表す際には、角丸スクエアアバターとステータスドットの言語を使用すること。

11 KiB Raw Blame History Unescape Escape