厳選・オープン・無料
LangChain
AIエージェント開発に特化した、ダークテーマで開発者に焦点を当てたプラットフォーム。クリーンで技術的な美学を持ちます。
aidev
01
デザイン DNA
開発者AIインフラストラクチャエージェントライフサイクル
AI開発者向けの洗練されたデジタルワークベンチ。技術的な精度と現代的な美学を融合させています。
02
カラー
#FFFFFFInk
rgba(255, 255, 255, 0.6)Ink soft
#030710BG
#162034BG soft
#7FC8FFMuted
rgba(204, 233, 255, 1)Line
技術的な強調のため、ブルーアクセントトーンを持つハイコントラストダークテーマ
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
64px · 300 - heading
48px · 300 - body
16px · 400 - caption
14px · 400
ディスプレイおよび見出しテキストには狭め文字間隔（-1.92px～-1.44px）を使用 · 本文テキストのベースサイズは16px、行間は1.5 · フォントウェイトは見出しにライト（300）、本文にレギュラー（400）を主に使用
04
余白
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
呼吸するための余白をたっぷりと取った、一貫した8pxベースグリッド
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 6px
lg · 16px
pill · 80px
インタラクティブ要素向けの、ブルー調の1pxソリッドボーダー
0px 32px 68px 0px rgba(0, 0, 0, 0.3) · 0px 0px 32px 0px rgba(127, 200, 255, 0.5)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
センタリングされたコンテンツを持つ固定ヘッダー、セクション間に十分な縦方向の余白
07
モーションとインタラクション
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover状態のスムーズなトランジション（0.3秒） · コンテンツ変更時の微細なフェードトランジション · フラッシュなアニメーションは不使用。プロフェッショナルな感覚を維持
スムーズなカラートランジションと微細なビジュアルフィードバック · ビジュアル状態の変化による即時応答
08
コンポーネント
- button プライマリ: 白背景に黒テキスト、角丸（6px）。セカンダリ: 透明背景に白ボーダー
- card 微細なボーダーを持つダークカード。製品ショーケースや機能ハイライトに使用
- chip ブルーボーダーを持つピル形タグ（例: Build, Test, Deploy, Monitor）
- input ブルーアクセントと明確なタイポグラフィを持つダーク入力フィールド
- hero 大きなセンタリングタイポグラフィ、グラデーションブルーライン、デュアルCTAボタンを持つフルワイドダークセクション
09
文体と禁止事項
- トーン プロフェッショナルで、技術的、かつ力強い
- 見出し インパクトを与えるための、狭め文字間隔を持つ大きくライトウェイトのタイポグラフィ
- CTA 明確でアクション指向の言葉遣い（'Start building'、'Get a demo'など）
- 明るい色の使用不可 — スクリーンショットは微細なブルーアクセントを持つダークテーマを示しています
- 太いフォントウェイトの使用不可 — スクリーンショットはライト（300）とレギュラー（400）のウェイトを示しています
- 広い文字間隔の使用不可 — スクリーンショットは見出し用の狭めネガティブ間隔を示しています
- 複雑な装飾要素の使用不可 — スクリーンショットはクリーンでミニマルなデザインを示しています
- 複数のアクセントカラーの使用不可 — スクリーンショットは単一のブルーアクセントパレットを示しています
- すべてのボタンに丸みのあるピルシェイプの使用不可 — スクリーンショットは角丸と長方形ボタンの混合を示しています
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: 過度な感嘆符の使用
- 避ける: 説明なしの専門用語
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
AIエージェント開発向けのダークテーマ開発者プラットフォーム。クリーンで技術的な美学を備え、プライマリカラーパレットは深いネイビー（#030710）とライトブルーアクセント（#7FC8FF、#CCE9FF）。タイポグラフィはディスプレイ用にジオメトリックサンセリフ、本文用にヒューマニストサンセリフを組み合わせ、見出しにライトウェイト（300）、本文コピーにレギュラー（400）を使用。主要な特徴には、たっぷりとした余白、微細なブルーグラデーションライン、ソリッドおよびボーダーボタンの混合が含まれます。重要なデザイン原則: ダークテーマの一貫性を維持、強調のためブルーアクセントを控えめに使用、タイポグラフィをライトで広々と保つ、技術的なコンテンツを圧迫する可能性のある重い視覚要素を避ける、すべてのインタラクションをスムーズでプロフェッショナルに感じさせる。
en · zh-CN · zh-TW · ja · ko