厳選・オープン・無料

Trigger.dev

フルランタイム制御でAIエージェントとワークフローを構築・デプロイするための、ダークで開発者中心のプラットフォーム。

devtoolsdark
Trigger.dev のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

オリジナル: https://trigger.dev

📦 パックの中身を見る →

01

デザイン DNA

developerAIautomationruntimeTypeScript

AIワークフローのための産業グレードの電源タップ

02

カラー

#BFFF00Accent
#D7D9DDInk
#878C99Ink soft
#121317BG
#1C1E21BG soft
#15171ABG quiet
rgba(59, 62, 69, 1)Line

深い暗色のサーフェスに、高コントラストのニュートラルテキストと、プライマリアクションのための単一のネオングリーンアクセントを配置。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

大きな表示用見出しにはGeometric Sansを使用します。 · インラインコードリファレンスやターミナルUI要素にはMonospaceを使用します。

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
96px

一貫した4pxグリッド。大きなコンテナ要素には十分なpaddingを確保しています。

05

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

sm · 4px
md · 6px
lg · 12px
pill · 9999px

1px solid rgba(59, 62, 69, 1)

0 1px 2px 0 rgba(0, 0, 0, 0.05)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準的な中心対称レイアウト。目立つ幅広のヒーローセクションに続き、グリッドベースのフィーチャーセクションが続きます。

07

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

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素に対する標準的なcolorおよびbackground-colorトランジション。 · hover状態に対する繊細なopacityおよびtransformの変化。

要素はhover時に、0.15秒から0.3秒のdurationで、色や背景色が微妙に変化します。 · 状態変化を示すために主に色のトランジションに依存する、最小限のフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

Trigger.dev — 桌面首屏（hero）
桌面首屏（hero）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Trigger.dev — 移动首屏
移动首屏

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

11

System Prompt

これは、ダークでインダストリアルな美学を持つ、開発者中心のAIプラットフォームです。デザインのDNAは、深いチャーコール背景(#121317)、高コントラストのニュートラルテキスト(#D7D9DD)、プライマリCTAのための単一の高彩度ネオングリーンアクセント(#BFFF00)を中心に展開されます。タイポグラフィは、見出しと本文テキストにGeometric SansとHumanist Sansを、技術的参照にはMonospaceフォントを、クリーンに組み合わせています。レイアウトは中心対称で広々としており、一貫した4pxのスペーシンググリッドを採用しています。重要な注意点: ライトモードのパレットは決して使用せず、装飾フォントも決して使用せず、製品の技術的で焦点を絞った性質から逸脱する重いドロップシャドウやマルチカラーアクセントも決して使用しないこと。システムは全体を通して、プロフェッショナルで権威的、技術的なトーンを維持すべきです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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