厳選・オープン・無料
Depot
Depotは、ビルドパイプラインのすべての部分を高速化します。
devinfra
01
デザイン DNA
開発者ツールパフォーマンスCI/CD高速性インフラストラクチャ
現代の開発パイプラインのための高性能エンジン
02
カラー
#71D083Accent
#EEEFF0Ink
#B5B2BCInk soft
#04040BBG
#121113BG soft
#323035BG quiet
#7C7A85Muted
rgba(60, 57, 63, 1.0)Line
深い暗色の背景が技術コンテンツに集中できる環境を創出し、鮮やかなグリーンアクセントが高速性とパフォーマンスを強調します。
03
タイポグラフィ
humanist-sans · monospace
- display
56px · 700 - headline
24px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 500
見出しにはネガティブレタースペーシングを使用し、タイトでモダンな印象を実現 · 本文は快適な行間を維持し、可読性を確保 · 技術データやコード風の要素には等幅フォントを使用
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した4pxベースグリッドと論理的なスペーシングの段階
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(60, 57, 63, 1.0)
0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
十分な余白を確保し、明確な垂直セクションで整理された中央揃えのコンテンツ
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素のための滑らかなカラートランジション · ホバーステートのための不透明度の変化 · マイクロインタラクションのためのトランスフォームアニメーション
微細な色の変化と不透明度の調整 · カラートランジションによる即座のビジュアルフィードバック
08
コンポーネント
- button グリーン背景のピル-shapedプライマリボタン、微細なボーダーを持つセカンダリボタン
- card 微細なボーダーと角丸を持つダークカード。パフォーマンス指標を含むことが多い
- chip ステータスインジケーターやカテゴリ用の小さなピル-shapedラベル
- input 微細なボーダーと角丸を持つダークな入力フィールド
- hero 大きな見出し、説明テキスト、目立つCTAを含むフルワイドヒーローセクション
09
文体と禁止事項
- トーン 直接的、自信があり、技術的に正確
- 見出し 高速性と効率性を強調する、短くインパクトのあるステートメント
- CTA 補助情報付きの明確なアクション指向ラベル
- 明るいプライマリカラーを使用しない — スクリーンショットでは暗色背景の上に控えめなグリーンアクセントが示されています
- 装飾的なフォントを使用しない — スクリーンショットではクリーンなhumanist-sansタイポグラフィが示されています
- 重いシャドウやグラデーションを追加しない — スクリーンショットでは最小限のディープスエフェクトが示されています
- 過度なアニメーションを使用しない — スクリーンショットでは微細で目的意識のあるトランジションが示されています
- レイアウトを過密にしない — スクリーンショットでは十分な余白と明確な階層が示されています
- 複雑なナビゲーションパターンを使用しない — スクリーンショットではシンプルで論理的なメニューストラクチャが示されています
- 避ける: 説明のない専門用語
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: 過度な感嘆符の使用
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Depotは、ダークでパフォーマンス重視の美学を持つ、CI/CD高速化のための開発者ツールプラットフォームです。デザインでは、深いチャコール背景（#04040B）に鮮やかなグリーンアクセント（#71D083）を使用し、高速性と効率性を強調しています。タイポグラフィは見出しと本文にhumanist-sans、技術データには等幅フォントを使用しています。レイアウトはクリーンで中央揃え、十分な余白を確保し、明確な垂直セクションで整理されています。主要なインタラクションには、滑らかなカラートランジションと微細なホバーエフェクトが含まれます。トーンは直接的で技術的に正確、専門用語を避けつつ自信を維持しています。重要なデザインルール：控えめなグリーンアクセントを限界まで使用、暗色のカラーコンシステンcyを維持、クリーンで可読性の高いタイポグラフィを維持、過度なアニメーションを避ける、十分なスペーシングを維持、明確なビジュアル階層を維持すること。
en · zh-CN · zh-TW · ja · ko