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

9.3 KiB

Raw Blame History

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

Category: AIおよびLLM 深いティールブラックを基調とした、ゆったりとした余白とエディトリアルなタイポグラフィが特徴の、落ち着いたほぼモノクロームのシステム。

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

OpenAIのプロダクト表面は、一般向けに整えられた研究施設のように映る——臨床的で、抑制されており、意図的に静謐だ。ページ背景は純粋な白（#ffffff）で、わずかにティールのアンダートーンを帯びたニアブラックのインク（#0d0d0d）と重なり合う。そのためテキストでさえ、攻撃的な暗さではなく、わずかに冷たいトーンを帯びる。結果として生まれる色彩的中立性は、まわりのクロームではなく、モデルの出力・コード・文章そのものを前景に押し出す。

このシステムの象徴的な特徴は、抑えたウェイトのSöhne（またはシステム代替のinter）の使用だ——本文は400、ナビゲーションとラベルは500、強調は600——これに、エディトリアル表示用のコンテンポラリーセリフ書体であるSignifierが組み合わされる。多くのAIブランドが未来志向に傾くなか、OpenAIのセリフ見出しはプロダクトに静かに文学的なトーンをもたらし、まるであらゆるアナウンスがエッセイであるかのような印象を与える。

シェイプシステムは一貫してソフトだ。8px〜12pxの角丸、タグやチップには9999pxのピル形状、どこにも鋭い角は存在しない。セクションの切れ目は仕切り線ではなく余白で示される。ボーダーが現れる際は#e5e5e5のヘアライン——色の存在ではなく、色の不在として読み取れるほど細い。

主な特徴：

深いティールブラックのインク（#0d0d0d）を持つ純白のキャンバス（#ffffff）
控えめなウェイト（400、500、600）のSöhne / Inter——主張より抑制
エディトリアル表示の見出しにSignifierセリフ
すべての箇所に8〜12pxのソフトな角丸、チップには9999pxのピル
ヘアラインボーダー（#e5e5e5）を控えめに使用、余白が主たる区切り
深いティールによる単色イラスト——マーク内にグラデーションなし
十分なラインハイト（1.55〜1.65）とゼロに近いトラッキング

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

プライマリ

ピュアホワイト（#ffffff）：プライマリ背景、カード面、ボタン背景。
インクブラック（#0d0d0d）：プライマリテキスト、ブランドマーク、プライマリCTA。
ソフトブラック（#1a1a1a）：セカンダリ見出し、非重要テキストの代替インク。

サーフェスと背景

ミスト（#fafafa）：セクション区切り背景、フッターサーフェス。
パール（#f5f5f5）：カード面、高さのあるパネル。
クラウド（#ececec）：無効化された背景、仕切りのティント。

ブランドアクセント

OpenAIティール（#10a37f）：ブランドプライマリ、リンク、ハイライトバッジ——それ以外はニュートラルなシステムにおける唯一の色。
ティールディープ（#0a7a5e）：ブランドカラーのホバーおよび押下状態。
ティールソフト（#e8f5f0）：成功バッジやハイライトコールアウトのサーフェスティント。

ニュートラルとテキスト

グラファイト（#3c3c3c）：本文テキスト、デフォルトの閲覧カラー。
スレート（#6e6e6e）：セカンダリテキスト、キャプション、メタデータ。
アッシュ（#9b9b9b）：第三テキスト、プレースホルダー、無効ラベル。
ストーン（#c4c4c4）：装飾的な仕切り線、薄いアイコン。

セマンティックとボーダー

ボーダーヘアライン（#e5e5e5）：標準のヘアライン区切り線。
ボーダーソフト（#ededed）：白いサーフェス上のカードアウトライン。
エラー（#ef4146）：バリデーション、破壊的なアクション。
ワーニング（#f5a623）：注意喚起の状態に使うソフトなアンバー。
インフォ（#2563eb）：情報リンクのトーン（控えめに使用、ティールが優先）。

3. タイポグラフィのルール

フォントファミリ

ディスプレイ / エディトリアル：Signifier、フォールバック：'Source Serif Pro', Georgia, serif
本文 / UI：Söhne、フォールバック：Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
コード / モノ：Söhne Mono、フォールバック：ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

階層

役割	フォント	サイズ	ウェイト	ラインハイト	レタースペーシング	備考
Display	Signifier	56px (3.5rem)	400	1.08	-0.02em	エディトリアルヒーロー、告知タイトル
H1	Söhne	40px (2.5rem)	600	1.15	-0.01em	ページ見出し
H2	Söhne	28px (1.75rem)	600	1.2	-0.005em	セクション見出し
H3	Söhne	20px (1.25rem)	600	1.3	normal	サブセクション
Body Large	Söhne	18px (1.125rem)	400	1.6	normal	リード段落
Body	Söhne	16px (1rem)	400	1.65	normal	標準本文
Body Small	Söhne	14px (0.875rem)	400	1.55	normal	カード本文、密なUI
Caption	Söhne	13px (0.8125rem)	500	1.4	0.01em	メタデータ、バッジ
Label	Söhne	12px (0.75rem)	500	1.3	0.04em	アイブロウ、大文字ナビリンク
Code	Söhne Mono	14px (0.875rem)	400	1.55	normal	コードブロック、ターミナル出力

原則

アイデンティティとしての抑制：ウェイトは600を上限とする。700以上はブランドのトーンから外れる。階層はウェイトではなく、サイズと色によって生み出す。
魂のためのセリフ、システムのためのサンセリフ：SignifierはエディトリアルなDisplayの場面にのみ使用する。プロダクトUIはサンセリフのみ。
Displayにはネガティブトラッキング：Displayサイズには-0.02em、16pxに向かうにつれてゼロに戻す。

4. コンポーネントのスタイリング

ボタン

プライマリ

Background: #0d0d0d
Text: #ffffff
Padding: 10px 18px
Radius: 9999px（チップはフルピル形状）、矩形CTAには12px
Hover: #1a1a1a background
用途：プライマリCTA、「ChatGPTを試す」、「サインイン」

セカンダリ

Background: #ffffff
Text: #0d0d0d
Border: 1px solid #e5e5e5
Padding: 10px 18px
Radius: 12px
Hover: background #fafafa、border #d4d4d4

ブランドアクセント

Background: #10a37f
Text: #ffffff
Padding: 10px 18px
Radius: 12px
Hover: #0a7a5e
用途：アップグレードのハイライトCTA、成功パス

カード

Background: #ffffff
Border: 1px solid #ededed
Radius: 16px
Padding: 24px〜32px
Shadow: デフォルトはなし、ホバー時 0 4px 16px rgba(13,13,13,0.06)

インプット

Background: #ffffff
Border: 1px solid #e5e5e5
Radius: 12px
Padding: 12px 14px
Focus: border #10a37f、ring 0 0 0 3px rgba(16,163,127,0.12)

ピルとタグ

Background: #f5f5f5
Text: #3c3c3c
Padding: 4px 10px
Radius: 9999px
Font: 12px / 500

5. スペーシングとレイアウト

基本単位：4px。スケール：4、8、12、16、24、32、48、64、96、128。
コンテナ：max-width 1200px、モバイルは24pxガター、デスクトップは48px。
セクションリズム：主要セクション間の縦方向は96〜128px、モバイルは64px。
グリッド：デスクトップは12カラム、モバイルは4カラム、ギャップは24px。

6. モーション

デュレーション：ホバーは150〜220ms、レイアウトトランジションは280〜360ms。
イージング：入場には cubic-bezier(0.16, 1, 0.3, 1)（スムーズアウト）。
抑制：パララックスなし、スクロールジャッキングなし。控えめなフェードとトランスレートのみ。

7. 使用上のガイドライン

ニュートラルなエディトリアルの抑制、ソフトな角丸、控えめなアクセントの使用は、セットで維持すること。グリーンのアクセントを使うだけでは、OpenAIらしいサーフェスは生まれない。
Signifierスタイルのディスプレイ表現は、エディトリアルまたは告知の階層にのみ使用し、プロダクトのコントロールはサンセリフシステムで保つこと。
装飾的なモーション、重いシャドウ、過大な装飾的カードは避けること。このシステムは落ち着いていて、読みやすく、意図的な印象を与えるものでなければならない。

9.3 KiB Raw Blame History Unescape Escape