厳選・オープン・無料

Cognition

人間の能力を拡張する自律型ソフトウェアエンジニア。

01

デザイン DNA

ソフトウェア開発の未来のための建築設計図。

02

カラー

1つの大胆なエレクトリックブルーアクセントを用いた、ハイコントラストのモノクローム。プライマリなインタラクションに使用します。

03

タイポグラフィ

transitional-serif · geometric-sans · monospace

• display56px · 400
• heading20px · 400
• body16px · 400
• caption12px · 400

大きなインパクトのある見出しには、トランジショナル・セリフを使用。 · 本文とUI要素には、ジオメトリック・サンセリフを使用。 · すべての要素で、フォントウェイト400を一貫して維持。

04

余白

メインコンテナに64pxの水平パディングを備えた、ゆとりのあるホワイトスペース。

05

サーフェス (角丸 / 影 / 罫線)

rgba(0,0,0,0.1)を使用した、繊細な1pxのボーダー

06

レイアウト

デスクトップで永続的な左側ナビゲーションバーを備えた、クリーンな12カラム・グリッド。

07

モーションとインタラクション

要素の表示時の、滑らかな不透明度トランジション。 · インタラクティブ要素の、繊細なhover状態。

繊細な色の変化や不透明度の変化。 · 最小限の遅延による即時フィードバック。

08

コンポーネント

• button プライマリアクションには白テキストの黒塗り、セカンダリにはアウトラインまたはテキストベース。
• card 記事用のクリーンなレイアウト。通常、タイトルと日付を表示。
• chip 小さなモノスペースフォントを使用した、シンプルなタグまたはメタデータラベル。
• input シンプルなフォーム用の、最小限のボーダーレス・テキストインプット。
• hero 幅広のマージンとセカンダリ背景ブロックを持つ、大きな中央揃えのテキストブロック。

09

文体と禁止事項

• トーン エンジニアリングの未来に焦点を当てた、権威がありながらも協調的な口調。
• 見出し プロダクトの核心能力に関する、大胆で直接的なステートメント。
• CTA 「役割を探索する」のような、明確でアクション指向のフレーズ。

• 複数のハイクロマカラーを使用しない — スクリーンショットは、1つのブルーアクセントを備えた、主に白黒のパレットを示しています。
• プライマリ要素に丸みのある角を使用しない — スクリーンショットは、ボタンとカードにシャープで四角いエッジを使用しています。
• 重いドロップシャドウを使用しない — スクリーンショットは、最小限の奥行きを持つフラットでクリーンなデザインを示しています。
• 複雑な背景を使用しない — スクリーンショットは、ソリッドで明るいニュートラル背景（#F7F6F5）を示しています。
• 太字のフォントウェイトを使用しない — スクリーンショットは、すべてのテキストに一貫してフォントウェイト400を使用しています。
• 見出しにサンセリフを使用しない — スクリーンショットは、メインヒーローテキストにトランジショナル・セリフを使用しています。
• 避ける: 過度に技術的な専門用語
• 避ける: 誇大広告的なマーケティング言語
• 避ける: 邪魔なポップアップ

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko