精選 · 開放 · 免費
Trigger.dev
一個以開發者為導向的深色平台,用於建置與部署 AI 代理及工作流程,並提供完整的運行時控制。
devtoolsdark
01
設計氣質 DNA
開發者AI自動化運行時TypeScript
AI 工作流程的工業級電源排插
02
色彩
#BFFF00Accent
#D7D9DDInk
#878C99Ink soft
#121317BG
#1C1E21BG soft
#15171ABG quiet
rgba(59, 62, 69, 1)Line
以深色表面搭配高對比中性文字,並以單一霓虹綠強調色用於主要操作。
03
字型
geometric-sans · humanist-sans · monospace
- display
56px · 500 - heading-2
30px · 500 - body
16px · 400 - caption
14px · 400
大型展示標題使用 Geometric Sans。 · 行內程式碼參照與終端機 UI 元素使用 Monospace。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
一致的 4px 網格,大型容器元素留有充足內距。
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
互動元素的標準顏色與背景色過渡。 · hover 狀態的細微透明度與變形變化。
元素在 hover 時細微改變顏色或背景色,持續時間 0.15s 至 0.3s。 · 最小化回饋,主要依賴顏色過渡指示狀態變化。
08
組件
- button 主要按鈕採用高彩度霓虹綠背景與黑色文字,圓角微凸 (4px),並使用深色文字。
- card 卡片具有細微邊框與深色背景,通常包含功能列表,帶有明確標題與描述。
- chip 小型圓角 (藥丸狀) 徽章,採用深色背景與細微邊框,用於功能標籤。
- input 深色主題輸入欄位,具有細微邊框與圓角。
- hero 全幅深色背景區域,包含大型粗體白色標題與高對比號召行動按鈕。
09
文案語氣與禁用清單
- 語氣 技術性、權威且直截了當。
- 標題風格 粗體、肯定且以效益為導向。
- 按鈕文案 以行動為導向且直接,通常使用高對比按鈕。
- 避免使用鮮明、飽和的多彩配色——截圖顯示以深色、近乎單色調的背景為主,強調色極為有限。
- 避免使用裝飾性或手寫體字型——截圖顯示所有文字皆採用簡潔的幾何與人文無襯線體。
- 避免在卡片或容器上使用大型、複雜的 border-radius 值——截圖顯示圓角多為 4px 至 12px。
- 避免使用厚重的陰影或光暈效果營造層次——截圖顯示陰影極為細微,幾乎不存在。
- 避免使用亮色模式配色方案——截圖顯示為極深、低亮度的介面。
- 避免在內文中使用置中、多欄版面——截圖顯示大多數非英雄區塊的文字皆為左對齊。
- 避免: 過於隨意或俏皮的語言。
- 避免: 缺乏技術實質的行銷術語。
- 避免: 模糊或不明確的功能描述。
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 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個以開發者為導向的 AI 平台,具有深色工業美學。設計 DNA 以深炭灰背景 (#121317) 搭配高對比中性文字 (#D7D9DD) 及單一高彩度霓虹綠強調色 (#BFFF00) 作為主要號召行動。字型為幾何與人文無襯線體的簡潔組合,用於標題與內文,並以等寬字體呈現技術參照。版面採用置中、寬敞配置,並使用一致的 4px 間距網格。關鍵禁忌:切勿使用亮色模式配色、切勿使用裝飾性字型、切勿使用厚重陰影或多彩強調色,以免分散產品的技術專注本質。系統應全程保持專業、權威且技術性的語氣。
en · zh-CN · zh-TW · ja · ko