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

17 KiB

Raw Blame History

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

Category: メディア・コンシューマービジュアル探索。レッドアクセント、マソングリッド、画像ファースト。

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

Pinterest のウェブサイトは、ビジュアル探索をライフスタイル誌のように演出する、温かくインスピレーション溢れるキャンバスです。デザインは柔らかくやや温かみのある白い背景を基調とし、Pinterest レッド（#e60023）を唯一の大胆なブランドアクセントとして使用しています。多くのテックプラットフォームのクールなブルーとは異なり、Pinterest のニュートラルスケールには明確な温かみが感じられます——グレーはクールなスチールではなく、オリーブ/サンドトーン（#91918c、#62625b、#e5e5e0）に傾いており、居心地よくクラフト感のある雰囲気を作り出し、ブラウジングへの誘いを高めています。

タイポグラフィには Pin Sans を使用しています——日本語フォントを含む幅広いフォールバックスタックを持つカスタムプロプライエタリフォントで、Pinterest のグローバルなリーチを反映しています。ディスプレイサイズ（70px、ウェイト 600）では、Pin Sans は大きく親しみやすいヘッドラインを生み出します。小さいサイズではシステムはコンパクトです：ボタン 12px、キャプション 12–14px。CSS 変数の命名システム（--comp-*、--sema-*、--base-*）は、洗練された3層のデザイントークンアーキテクチャを示しています：コンポーネントレベル、セマンティックレベル、ベースレベルのトークンです。

Pinterest の特徴は、寛大なボーダーラジウスシステム（12px–40px、円形には 50%）と温かみのあるボタン背景です。セカンダリボタン（#e5e5e0）はコールドグレーではなく、明確に温かみのあるサンドトーンを持ちます。プライマリレッドボタンは 16px のラジウスを使用——丸みがありますが、ピル形ではありません。温かみのあるバッジ背景（hsla(60,20%,98%,.5)——微妙なイエロー温色調）と写真主体のレイアウトを組み合わせることで、コーポレートでステリルではなく、手作り感があり個人的なデザインが生まれています。

主な特徴：

オリーブ/サンドトーンのニュートラルカラーを持つ温かい白いキャンバス——居心地よく、クリニカルではない
Pinterest レッド（#e60023）を唯一の大胆なアクセントとして——控えめにならず、常に自信に満ちている
グローバルフォールバックスタック（CJK を含む）を持つ Pin Sans カスタムフォント
3層トークンアーキテクチャ：--comp-* / --sema-* / --base-*
温かみのあるセカンダリサーフェス：サンドグレー（#e5e5e0）、温かいバッジ（hsla(60,20%,98%,.5)）
寛大なボーダーラジウス：標準 16px、大きなコンテナには最大 40px
写真ファーストのコンテンツ——ピン/画像が主要なビジュアル要素
ダークに近いパープルのテキスト（#211922）——温かみがあり、プラムのヒントを持つ

2. カラーパレットとロール

プライマリブランド

Pinterest レッド（#e60023）：プライマリ CTA、ブランドアクセント——大胆で自信に満ちた赤
グリーン 700（#103c25）：--base-color-green-700、成功/ネイチャーアクセント
グリーン 700 ホバー（#0b2819）：--base-color-hover-green-700、プレスされたグリーン

テキスト

プラムブラック（#211922）：プライマリテキスト——プラムのアンダートーンを持つ温かいニアブラック
ブラック（#000000）：セカンダリテキスト、ボタンテキスト
オリーブグレー（#62625b）：セカンダリ説明、ミュートテキスト
ウォームシルバー（#91918c）：--comp-button-color-text-transparent-disabled、無効テキスト、入力ボーダー
ホワイト（#ffffff）：ダーク/カラーサーフェス上のテキスト

インタラクティブ

フォーカスブルー（#435ee5）：--comp-button-color-border-focus-outer-transparent、フォーカスリング
パフォーマンスパープル（#6845ab）：--sema-color-hover-icon-performance-plus、パフォーマンス機能
レコメンデーションパープル（#7e238b）：--sema-color-hover-text-recommendation、AI レコメンデーション
リンクブルー（#2b48d4）：リンクテキストカラー
Facebook ブルー（#0866ff）：--facebook-background-color、ソーシャルログイン
プレストブルー（#617bff）：--base-color-pressed-blue-200、プレスした状態

サーフェスとボーダー

サンドグレー（#e5e5e0）：セカンダリボタン背景——温かみがあり、クラフト感がある
ウォームライト（#e0e0d9）：円形ボタン背景、バッジ
ウォームウォッシュ（hsla(60, 20%, 98%, 0.5)）：--comp-badge-color-background-wash-light、微妙な温かいバッジ背景
フォグ（#f6f6f3）：ライトサーフェス（50% 不透明度）
ボーダー無効（#c8c8c1）：--sema-color-border-disabled、無効ボーダー
ホバーグレー（#bcbcb3）：--base-color-hover-grayscale-150、ホバーボーダー
ダークサーフェス（#33332e）：ダークセクションの背景

セマンティック

エラーレッド（#9e0a0a）：チェックボックス/フォームエラー状態

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

フォントファミリー

プライマリ：Pin Sans、フォールバック：-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳＰゴシック, Arial

階層

ロール	フォント	サイズ	ウェイト	行高	文字間隔	備考
ディスプレイヒーロー	Pin Sans	70px (4.38rem)	600	normal	normal	最大インパクト
セクション見出し	Pin Sans	28px (1.75rem)	700	normal	-1.2px	ネガティブトラッキング
ボディ	Pin Sans	16px (1.00rem)	400	1.40	normal	標準読み取り
キャプションボールド	Pin Sans	14px (0.88rem)	700	normal	normal	強いメタデータ
キャプション	Pin Sans	12px (0.75rem)	400–500	1.50	normal	小テキスト、タグ
ボタン	Pin Sans	12px (0.75rem)	400	normal	normal	ボタンラベル

原則

コンパクトなタイプスケール：範囲は 12px–70px で劇的なジャンプ——ほとんどの機能的テキストは 12–16px で、密度の高いアプリのような情報階層を作ります。
温かいウェイト分布：見出しに 600–700、ボディに 400–500。超軽量ウェイトなし——テキストは常に実質感があります。
見出しのネガティブトラッキング：28px 見出しの -1.2px により、居心地よく親密なセクションタイトルが生まれます。
シングルフォントファミリー：Pin Sans がすべてを担当——セカンダリディスプレイやモノスペースフォントは検出されませんでした。

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

ボタン

プライマリレッド

背景：#e60023（Pinterest レッド）
テキスト：#000000（黒——赤に対するコントラストとしては珍しい選択）
パディング：6px 14px
ラジウス：16px（寛大な丸み、ピル形ではない）
ボーダー：2px solid rgba(255, 255, 255, 0)（透明）
フォーカス：CSS 変数によるセマンティックボーダー + アウトライン

セカンダリサンド

背景：#e5e5e0（温かいサンドグレー）
テキスト：#000000
パディング：6px 14px
ラジウス：16px
フォーカス：同じセマンティックボーダーシステム

サーキュラーアクション

背景：#e0e0d9（ウォームライト）
テキスト：#211922（プラムブラック）
ラジウス：50%（円形）
用途：ピンアクション、ナビゲーションコントロール

ゴースト/トランスペアレント

背景：透明
テキスト：#000000
ボーダーなし
用途：第三のアクション

カードとコンテナ

寛大なラジウス（12px–20px）を持つ写真ファーストのピンカード
ほとんどのカードに従来のボックスシャドウなし
白または温かいフォグ背景
一部の画像コンテナに 8px の白い太いボーダー

インプット

メール入力：白い背景、1px solid #91918c ボーダー、16px ラジウス、11px 15px パディング
フォーカス：CSS 変数によるセマンティックボーダー + アウトラインシステム

画像処理

ピンスタイルのマソングリッド（Pinterest のシグネチャレイアウト）
画像の角丸：12px–20px
写真をプライマリコンテンツとして——すべてのピンは画像
フィーチャード画像コンテナに太い白いボーダー（8px）

5. レイアウト原則

スペーシングシステム

ベースユニット：8px
スケール：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
大きなジャンプ：セクション間隔に 32px → 80px → 100px

グリッドとコンテナ

ピンコンテンツにマソングリッド（シグネチャレイアウト）
寛大な最大幅を持つ中央揃えのコンテンツセクション
フルワイドのダークフッター
プライマリナビゲーション要素としての検索バー

ホワイトスペース哲学

インスピレーション密度：マソングリッドはピンをぎっしりと詰め込みます——コンテンツ密度自体が価値提案です。ホワイトスペースはグリッド内ではなく、セクション間に存在します。
上で呼吸し、下で密度を：ヒーロー/フィーチャーセクションには寛大なパディングを。ピングリッドはコンパクトでイマーシブ。

ボーダーラジウススケール

スタンダード（12px）：小カード、リンク
ボタン（16px）：ボタン、入力、中サイズカード
コンフォータブル（20px）：フィーチャーカード
ラージ（28px）：大きなコンテナ
セクション（32px）：タブ要素、大パネル
ヒーロー（40px）：ヒーローコンテナ、大型フィーチャーブロック
サークル（50%）：アクションボタン、タブインジケーター

6. 奥行きと高さ

レベル	処理	用途
フラット（レベル 0）	シャドウなし	デフォルト——ピンはシャドウではなくコンテンツに依存
サブトル（レベル 1）	最小シャドウ（トークンより）	高架のオーバーレイ、ドロップダウン
フォーカス（アクセシビリティ）	`--sema-color-border-focus-outer-default` リング	フォーカス状態

シャドウ哲学：Pinterest は最小限のシャドウを使用します。マソングリッドは、エレベーション効果ではなくコンテンツ（写真）に依存して視覚的な興味を作り出します。深度は、サーフェスカラーの温かみとコンテナの寛大な丸みから生まれます。

7. やること・やらないこと

やること

温かいニュートラル（#e5e5e0、#e0e0d9、#91918c）を使用する——温かいオリーブ/サンドトーンがアイデンティティ
Pinterest レッド（#e60023）はプライマリ CTA のみに適用する——大胆でシングル
Pin Sans のみを使用する——すべてに一つのフォント
寛大なボーダーラジウスを適用する：ボタン/入力に 16px、カードに 20px 以上
マソングリッドを密に保つ——コンテンツ密度が価値
温かいバッジ背景（hsla(60,20%,98%,.5)）を微妙な温かいウォッシュに使用する
プライマリテキストには #211922（プラムブラック）を使用する——純粋な黒より温かい

やらないこと

クールなグレーのニュートラルを使用しない——常に温かい/オリーブトーン
プライマリテキストに純粋な黒（#000000）を使用しない——プラムブラック（#211922）を使用する
ピル形のボタンを使用しない——16px ラジウスは丸みがあるが、ピル形ではない
重いシャドウを追加しない——Pinterest はデザイン上フラットで、深度はコンテンツから
カードに小さなボーダーラジウス（<12px）を使用しない——寛大な丸みが核心
追加のブランドカラーを導入しない——赤 + 温かいニュートラルが完全なパレット
細いフォントウェイトを使用しない——Pin Sans は最低 400

8. レスポンシブ動作

ブレークポイント

名前	幅	主な変更
モバイル	<576px	シングルカラム、コンパクトレイアウト
モバイルラージ	576–768px	2 カラムピングリッド
タブレット	768–890px	拡張グリッド
デスクトップスモール	890–1312px	標準マソングリッド
デスクトップ	1312–1440px	フルレイアウト
ラージデスクトップ	1440–1680px	拡張グリッドカラム
ウルトラワイド	>1680px	最大グリッド密度

折りたたみ戦略

ピングリッド：5+ カラム → 3 → 2 → 1
ナビゲーション：検索バー + アイコン → 簡略化されたモバイルナビ
フィーチャーセクション：サイドバイサイド → スタック
ヒーロー：70px → 比例的にスケールダウン
フッター：ダークマルチカラム → スタック

9. エージェントプロンプトガイド

クイックカラーリファレンス

ブランド：Pinterest レッド（#e60023）
背景：ホワイト（#ffffff）
テキスト：プラムブラック（#211922）
セカンダリテキスト：オリーブグレー（#62625b）
ボタンサーフェス：サンドグレー（#e5e5e0）
ボーダー：ウォームシルバー（#91918c）
フォーカス：フォーカスブルー（#435ee5）

コンポーネントプロンプト例

「ヒーローを作成：白い背景。ヘッドラインは 70px Pin Sans ウェイト 600、プラムブラック（#211922）。レッド CTA ボタン（#e60023、16px ラジウス、6px 14px パディング）。セカンダリサンドボタン（#e5e5e0、16px ラジウス）。」
「ピンカードをデザイン：白い背景、16px ラジウス、シャドウなし。写真が上部を埋め、下に 16px Pin Sans ウェイト 400 の説明、#62625b で。」
「円形アクションボタンを構築：#e0e0d9 背景、50% ラジウス、#211922 アイコン。」
「入力フィールドを作成：白い背景、1px solid #91918c、16px ラジウス、11px 15px パディング。フォーカス：セマンティックトークンによるブルーアウトライン。」
「ダークフッターをデザイン：#33332e 背景。白い Pinterest スクリプトロゴ。12px Pin Sans リンク、#91918c で。」

イテレーションガイド

いたるところに温かいニュートラル——オリーブ/サンドグレー、クールスチールは決して使わない
Pinterest レッドは CTA のみ——大胆でシングル
ボタン/入力に 16px ラジウス、カードに 20px 以上——寛大だがピル形ではない
Pin Sans が唯一のフォント——UI は 12px でコンパクト、ディスプレイは 70px
写真がデザインを担う——UI は温かくミニマルを保つ
テキストにはプラムブラック（#211922）——純粋な黒より温かい

17 KiB Raw Blame History Unescape Escape