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

20 KiB

Raw Blame History

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

Category: AI・LLM エンタープライズAIプラットフォーム。鮮やかなグラデーション、データリッチなダッシュボード美学。

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

Cohereのインターフェースは洗練されたエンタープライズ指令デッキ——自信に満ち、クリーンで、AIを消費者向けのおもちゃではなく本格的なインフラとして感じさせるデザインです。体験は明るいホワイトキャンバスの上に展開され、コンテンツはたっぷりとした丸みを持つカード（22px radius）に整理され、有機的なクラウドのような包括言語を生み出します。これはCTOやエンタープライズアーキテクトに語りかけるサイトです——冷たさのないプロフェッショナル感、威圧感のない洗練さ。

デザイン言語は、デュアルタイプフェイスシステムによって2つの世界を橋渡しします。タイトなトラッキングを持つカスタムディスプレイセリフのCohereTextは、ヘッドラインにテクノロジー宣言のような重厚感を与え、Unica77 Cohere Webはすべてのボディ・UIテキストをジオメトリックなスイス的精度で処理します。このセリフ/サンセリフのペアリングは「自信ある権威とエンジニアリングの明晰さ」という個性を生み出し、エンタープライズAIプラットフォームを完璧に体現します。

色は極めて節制して使われます——インターフェースはほぼ完全に白黒で、クールグレーのボーダー（#d9d9dd、#e5e7eb）が用いられます。パープル-バイオレットは、フォトグラフィックなヒーローバンド、グラデーションセクション、そしてホバーとフォーカス状態を示すインタラクティブブルー（#1863dc）にのみ現れます。この色彩的な節制により、色が登場する場面——製品スクリーンショット、エンタープライズフォトグラフィー、濃いパープルセクション——では最大限の視覚的重量を持ちます。

主な特徴：

クールグレーの区切りボーダーを持つ明るいホワイトキャンバス
22pxシグネチャーborder-radius——「Cohereカード」の独特な丸みの特徴
デュアルカスタムタイプフェイス：CohereText（ディスプレイセリフ）+ Unica77（ボディサンセリフ）
エンタープライズグレードの色彩節制：黒・白・クールグレー、最小限のパープルブルーアクセント
ドラマチックなコントラストを生み出す深いパープル/バイオレットのヒーローセクション
ホバー時にブルーに変化するゴースト/透明ボタン
多様なリアルワールドアプリケーションを示すエンタープライズフォトグラフィー
大文字変換を伴うコードや技術ラベル用のCohereMono

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

プライマリ

Cohere Black (#000000): プライマリヘッドラインテキストと最大強調要素。
Near Black (#212121): 標準ボディリンクカラー——純粋な黒よりわずかにソフト。
Deep Dark (#17171c): ナビゲーションとダークセクションテキスト用の青みがかったニアブラック。

セカンダリ・アクセント

Interaction Blue (#1863dc): プライマリインタラクティブアクセント——ボタンホバー、フォーカス状態、アクティブリンクに現れます。唯一の色彩的アクションカラー。
Ring Blue (#4c6ee6 at 50%): キーボードフォーカスインジケーター用のTailwindリングカラー。
Focus Purple (#9b60aa): インプットフォーカスボーダーカラー——ミュートバイオレット。

サーフェス・バックグラウンド

Pure White (#ffffff): プライマリページバックグラウンドとカードサーフェス。
Snow (#fafafa): 微妙な立体感のあるサーフェスとライトセクションバックグラウンド。
Lightest Gray (#f2f2f2): カードボーダーと最もソフトな区切りライン。

ニュートラル・テキスト

Muted Slate (#93939f): 控えめなフッターリンクとターシャリテキスト——わずかなブルーバイオレットのトーンを持つクールグレー。
Border Cool (#d9d9dd): 標準セクションとリストアイテムボーダー——クールでわずかにパープルがかったグレー。
Border Light (#e5e7eb): ライターボーダーバリアント——Tailwindの標準gray-200。

グラデーションシステム

パープル-バイオレットヒーローバンド: ホワイトキャンバスに対してドラマチックなコントラストを生み出す深いパープルグラデーションセクション。製品スクリーンショットと主要メッセージを収める全幅バンドとして現れます。
ダークフッターグラデーション: ページは深いパープル/チャコールからブラックフッターへと移行し、「夕暮れ」のような効果を生み出します。

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

フォントファミリー

ディスプレイ: CohereText、フォールバック: Space Grotesk, Inter, ui-sans-serif, system-ui
ボディ / UI: Unica77 Cohere Web、フォールバック: Inter, Arial, ui-sans-serif, system-ui
コード: CohereMono、フォールバック: Arial, ui-sans-serif, system-ui
アイコン: CohereIconDefault（カスタムアイコンフォント）

階層

役割	フォント	サイズ	ウェイト	行の高さ	文字間隔	備考
ディスプレイ / ヒーロー	CohereText	72px (4.5rem)	400	1.00 (tight)	-1.44px	最大インパクト、セリフの権威感
ディスプレイセカンダリ	CohereText	60px (3.75rem)	400	1.00 (tight)	-1.2px	大きなセクション見出し
セクション見出し	Unica77	48px (3rem)	400	1.20 (tight)	-0.48px	フィーチャーセクションタイトル
サブ見出し	Unica77	32px (2rem)	400	1.20 (tight)	-0.32px	カード見出し、機能名
フィーチャータイトル	Unica77	24px (1.5rem)	400	1.30	normal	小さいセクションタイトル
ボディラージ	Unica77	18px (1.13rem)	400	1.40	normal	イントロパラグラフ
ボディ / ボタン	Unica77	16px (1rem)	400	1.50	normal	標準ボディ、ボタンテキスト
ボタンミディアム	Unica77	14px (0.88rem)	500	1.71 (relaxed)	normal	小さいボタン、強調ラベル
キャプション	Unica77	14px (0.88rem)	400	1.40	normal	メタデータ、説明
大文字ラベル	Unica77 / CohereMono	14px (0.88rem)	400	1.40	0.28px	大文字セクションラベル
スモール	Unica77	12px (0.75rem)	400	1.40	normal	最小テキスト、フッターリンク
コードマイクロ	CohereMono	8px (0.5rem)	400	1.40	0.16px	小さな大文字コードラベル

原則

宣言にはセリフ、ユーティリティにはサンセリフ: CohereTextはディスプレイスケールでブランドボイスを担います——そのセリフのターミナルがヘッドラインに発表された研究のような権威感を与えます。Unica77はすべての機能的な部分をスイス・ジオメトリックの中立性で処理します。
スケール時のネガティブトラッキング: CohereTextは60〜72pxで-1.2px〜-1.44pxの文字間隔を使用し、密度の高いインパクトあるテキストブロックを生み出します。
シングルボディウェイト: Unica77の使用はほぼすべてウェイト400です。ウェイト500は小さなボタン強調にのみ現れます。このシステムはウェイトのコントラストではなく、サイズとスペーシングに依存します。
大文字コードラベル: CohereMonoは技術タグとセクションマーカーに大文字とポジティブな文字間隔（0.16〜0.28px）を使用します。

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

ボタン

ゴースト / 透明

Background: transparent (rgba(255, 255, 255, 0))
テキスト: Cohere Black (#000000)
ボーダー非表示
ホバー: テキストがInteraction Blue (#1863dc)にシフト、opacity 0.8
フォーカス: Interaction Blueによるsolid 2px outline
プライマリボタンスタイル——インタラクション時まで非表示

ダークソリッド

Background: dark/black
テキスト: Pure White
ライトサーフェス上のCTA用
ピル形状または標準radius

アウトライン

ボーダーベースの区切り
セカンダリアクションに使用

カードとコンテナ

Background: Pure White (#ffffff)
ボーダー: 微妙なカードには thin solid Lightest Gray（1px solid #f2f2f2）、強調には Cool Border（#d9d9dd）
Radius: 22px——プライマリカード、画像、ダイアログコンテナのCohere署名radius。小さい要素には4px、8px、16px、20pxも使用
シャドウ: 最小限——Cohereはシャドウよりバックグラウンドカラーとボーダーに依存
特殊: 0px 0px 22px 22px radius（下部のみ丸み）セクションコンテナ用
ダイアログ: モーダル/ダイアログボックスには8px radius

インプットとフォーム

テキスト: ダークインプット上は白、ライト上は黒
フォーカスボーダー: Focus Purple (#9b60aa) with 1px solid
フォーカスシャドウ: redリング（rgb(179, 0, 0) 0px 0px 0px 2px）——エラー状態の表示に使用
フォーカスアウトライン: Interaction Blue solid 2px

画像処理

多様な被写体と環境のエンタープライズフォトグラフィー
ドラマチックなセクション用のパープルがかったヒーローフォトグラフィー
ダークサーフェス上の製品UIスクリーンショット
カードシステムに合わせた22px radiusの画像
全幅パープルグラデーションセクション

特徴的なコンポーネント

22pxカードシステム

22px border-radiusはCohereのビジュアルシグネチャです
すべてのプライマリカード、画像、コンテナはこのradiusを使用
典型的な8〜12pxとは異なる、クラウドのような有機的な柔らかさを生み出します

エンタープライズトラストバー

企業ロゴをホリゾンタルストリップに表示
エンタープライズ採用を示す
クリーンなモノクロロゴ処理

パープルヒーローバンド

製品ショーケースを収める全幅の深いパープルセクション
ホワイトページフローにドラマチックな視覚的断絶を生み出す
製品スクリーンショットがパープル環境内に浮かぶ

大文字コードタグ

文字間隔付き大文字のCohereMono
セクションマーカーと分類ラベルとして使用
技術的で構造化された情報階層を生み出す

5. レイアウト原則

スペーシングシステム

基本単位: 8px
スケール: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
ボタンpaddingはバリアントによって異なる
カード内部padding: 約24〜32px
セクション縦スペーシング: 余裕を持たせる（セクション間56〜60px）

グリッドとコンテナ

最大コンテナ幅: 2560pxまで（非常に広い）、レスポンシブスケーリング対応
ヒーロー: ドラマチックなタイポグラフィで中央揃え
フィーチャーセクション: 複数列カードグリッド
エンタープライズセクション: 全幅パープルバンド
26のブレークポイントを検出——非常に細かいレスポンシブシステム

ホワイトスペース哲学

エンタープライズの明確さ: 各セクションは一つの明確な提案を、間に余白を持たせて提示します。
フォトグラフィーをヒーローとして: 大きなフォトグラフィックセクションが装飾的なデザイン要素を必要とせずに視覚的な興味を提供します。
カードグルーピング: 関連コンテンツは22px丸みのカードにグループ化され、自然な情報クラスターを形成します。

Border Radiusスケール

シャープ（4px）: ナビゲーション要素、小さなタグ、ページネーション
コンフォタブル（8px）: ダイアログボックス、セカンダリコンテナ、小さなカード
ジェネラス（16px）: フィーチャーコンテナ、ミディアムカード
ラージ（20px）: 大きなフィーチャーカード
シグネチャー（22px）: プライマリカード、ヒーロー画像、メインコンテナ——Cohereのradius
ピル（9999px）: ボタン、タグ、ステータスインジケーター

6. 奥行きと立体感

レベル	処理	使用
フラット（Level 0）	シャドウなし、ボーダーなし	ページバックグラウンド、テキストブロック
ボーダー付き（Level 1）	`1px solid #f2f2f2` または `#d9d9dd`	標準カード、リスト区切り
パープルバンド（Level 2）	全幅のダークパープルバックグラウンド	ヒーローセクション、フィーチャーショーケース

シャドウ哲学: Cohereはほぼシャドウを使いません。奥行きはバックグラウンドカラーのコントラスト（パープルバンド上のホワイトカード、スノー上のホワイトサーフェス）、ボーダーによる区切り（クールグレーボーダー）、そしてドラマチックなライト-ダークセクションの交互表示で伝えられます。要素に立体感が必要な場合、シャドウを落とすのではなくダーク上のホワイトによって実現します。

7. すべきこと・すべきでないこと

すべきこと

すべてのプライマリカードとコンテナに22px border-radiusを使用する——これがビジュアルシグネチャです
ネガティブ文字間隔でCohereTextをディスプレイ見出し（72px、60px）に使用する
すべてのボディとUIテキストにUnica77をウェイト400で使用する
パレットをクールグレーボーダーの白黒に保つ
Interaction Blue (#1863dc)はホバー/フォーカスのインタラクティブ状態にのみ使用する
ドラマチックな視覚的断絶と製品ショーケースには深いパープルセクションを使用する
セクションラベルにはCohereMono + 大文字 + 文字間隔を適用する
多様な被写体のエンタープライズ相応のフォトグラフィーを維持する

すべきでないこと

プライマリカードに22px以外のborder-radiusを使用しない——シグネチャradiusは重要です
ウォームカラーを導入しない——パレットは厳密にクールトーンです
重いシャドウを使用しない——奥行きはカラーコントラストとボーダーから生まれます
ボディテキストにボールド（700+）ウェイトを使用しない——400〜500が範囲です
セリフ/サンセリフの階層を省略しない——ヘッドラインにはCohereText、ボディにはUnica77
カードのサーフェスカラーにパープルを使用しない——パープルは全幅セクション専用です
セクションスペーシングを40px以下に減らさない——エンタープライズレイアウトには余白が必要です
デフォルトでボタンに装飾を加えない——ゴースト/透明がベーススタイルです

8. レスポンシブ動作

ブレークポイント

名称	幅	主な変更
スモールモバイル	<425px	コンパクトレイアウト、最小限のスペーシング
モバイル	425–640px	シングルカラム、積み重ねカード
ラージモバイル	640–768px	軽微なスペーシング調整
タブレット	768–1024px	2カラムグリッド開始
デスクトップ	1024–1440px	フル複数列レイアウト
ラージデスクトップ	1440–2560px	最大コンテナ幅

26のブレークポイントを検出——データセット中で最もきめ細かいレスポンシブサイトの一つ。

タッチターゲット

タッチインタラクションに十分なサイズのボタン
適切なスペーシングのナビゲーションリンク
タッチターゲットとしてのカードサーフェス

折りたたみ戦略

ナビゲーション: フルナビゲーションはハンバーガーに折りたたみ
フィーチャーグリッド: 複数列 → 2列 → シングルカラム
ヒーローテキスト: 72px → 48px → 32px のプログレッシブスケーリング
パープルセクション: 全幅を維持し、コンテンツが積み重なる
カードグリッド: 3 → 2 → 1カラム

画像の動作

フォトグラフィーは22px radiusコンテナ内で比率を維持してスケール
製品スクリーンショットはアスペクト比を維持
パープルセクションはバックグラウンドを比率に合わせてスケール

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

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

プライマリテキスト: "Cohere Black (#000000)"
ページバックグラウンド: "Pure White (#ffffff)"
セカンダリテキスト: "Near Black (#212121)"
ホバーアクセント: "Interaction Blue (#1863dc)"
ミュートテキスト: "Muted Slate (#93939f)"
カードボーダー: "Lightest Gray (#f2f2f2)"
セクションボーダー: "Border Cool (#d9d9dd)"

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

"Pure White (#ffffff) 上にCohereTextを72px ウェイト400、line-height 1.0、letter-spacing -1.44pxで使ったヒーローセクションを作成してください。Cohere Blackのテキスト。サブタイトルはUnica77で18px ウェイト400、line-height 1.4。"
"22px border-radius、white上に1px solid Lightest Gray (#f2f2f2) ボーダーのフィーチャーカードをデザインしてください。タイトルはUnica77で32px、letter-spacing -0.32px。ボディはUnica77で16px、Muted Slate (#93939f)。"
"ゴーストボタンを構築してください：透明バックグラウンド、Unica77 16pxのCohere Blackテキスト。ホバー時、テキストがInteraction Blue (#1863dc) にopacity 0.8でシフト。フォーカス：2px solid Interaction Blueアウトライン。"
"ホワイトテキストの深いパープル全幅セクションを作成してください。見出しにCohereTextを60px。製品スクリーンショットが22px border-radiusを使って内側に浮かびます。"
"CohereMono 14px、大文字、letter-spacing 0.28pxのセクションラベルをデザインしてください。Muted Slate (#93939f) テキスト。"

イテレーションガイド

一度に一つのコンポーネントに集中する
プライマリカードには常に22px radiusを使用——「Cohereカードの丸み」
タイプフェイスを明示する——ヘッドラインにはCohereText、ボディにはUnica77、ラベルにはCohereMono
インタラクティブ要素はホバー時のみInteraction Blue (#1863dc) を使用
サーフェスはクールグレーボーダーのホワイトに保つ——ウォームトーンなし
パープルは全幅セクション専用——カードバックグラウンドには使わない

20 KiB Raw Blame History Unescape Escape