厳選・オープン・無料

Stream

Streamの開発者優先SDKで、チャット、フィード、ビデオ統合をより速く構築。

01

デザイン DNA

リアルタイム機能を構築するための、クリーンでプロフェッショナルな開発者コンソール。

02

カラー

ハイコントラストのプロフェッショナルなミニマリズムに、鮮やかなブルーアクセントを一点配置。

03

タイポグラフィ

humanist-sans · monospace

• display48px · 500
• h236px · 500
• h324px · 600
• body16px · 400
• code14px · 400
• caption12px · 500

ディスプレイおよび見出しのウェイトは一貫して500から600。 · 本文は最大限の可読性のために標準的な400ウェイトを使用。 · モノスペースフォントはインラインコードおよびコマンドブロック専用として使用。

04

余白

一貫した4pxベースを採用し、ヒーローセクションやセクション間には適度な余白を確保。

05

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

1px solid rgba(13, 23, 33, 0.1)

0px 3px 12px 0px rgba(0, 0, 0, 0) · 0px 1px 4px 0px rgba(0, 0, 0, 0.14)

06

レイアウト

2カラムヒーローレイアウトを備えた標準的な中央揃えコンテナ。

07

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

hover状態におけるスムーズなbackground-colorおよびopacityトランジション。 · インタラクション中の微細なbox-shadow調整。

0.15秒から0.5秒のトランジションによるbackground-colorまたはopacityのシフト。 · 微細なtransformまたはshadowフィードバックを伴う即時状態変化。

08

コンポーネント

• button プライマリアクションにはブルーの角丸ピルボタン。セカンダリアクションにはボーダー付きの白角丸ピルボタン。
• card ユースケースショーケースに使用する、軽いグレーボーダーと角丸（16px）を持つ白いカード。
• chip 明るい背景色と角丸を持つ、小ぶりな大文字バッジ。
• input コマンドプロンプト用にモノスペースフォントとダーク背景を使用したコードブロックスタイル。
• hero 大きな左揃えテキストブロックと、右側にオーバーラップする浮遊型の製品UIモックアップをペアリング。

09

文体と禁止事項

• トーン プロフェッショナルで、開発者に特化し、自信に満ちたトーン。
• 見出し 直接的で行動を促し、ややテクニカルなスタイル。
• CTA 明確かつ即座に行動を促すスタイル。'>_' や '->' のようなモノスペースアクセントを採用。

• 強いドロップシャドウを使用しない — スクリーンショットでは非常に微細でほぼ見えないシャドウが使われている。
• 複雑なグラデーションを使用しない — スクリーンショットでは主にフラットな白と薄グレーの背景が使われている。
• 装飾的なセリフフォントを使用しない — スクリーンショットではすべてのテキストにクリーンなヒューマニストサンセリフが使われている。
• ネオンや複数のアクセントカラーを使用しない — スクリーンショットではブルーのみの厳格なアクセント戦略が使われている。
• プライマリボタンに角の効いた形状を使用しない — スクリーンショットでは完全に丸みを帯びたピルシェイプが使われている。
• 詰まったレイアウトを使用しない — スクリーンショットでは適切なパディングと明確なセクション区切りが使われている。
• 避ける: 過度にカジュアルなスラング
• 避ける: 曖昧なマーケティング用語
• 避ける: 裏付けのない技術的主張

10

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

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

11

System Prompt

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