精選 · 開放 · 免費

Appwrite

一個專為速度與規模設計的開源 Backend-as-a-Service 平台。

devinfra
Appwrite 網站截圖
↓ 下載設計系統包 (11 MB)在 OpenDesign 中開啟

原站: https://appwrite.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

開源後端基礎設施開發者平台

一個用於構建現代應用程式的深色、精緻的指揮中心。

02

色彩

#fd356eAccent
#ffffffInk
#acacafInk soft
#19191cBG
#1d1d21BG soft
#202023BG quiet
#57575cMuted
rgba(172, 172, 175, 0.2)Line

以深色模式為基底，搭配高對比度的白色文字，以及單一、鮮明的粉紅色強調色用於主要操作。

03

字型

grotesque-sans · humanist-sans · monospace

標題文字使用筆畫粗獷的 grotesque 字體，並搭配緊湊的字距。 · 內文預設使用高度可讀的人文主義無襯線字體。 · 等寬字體嚴格限定用於程式碼片段與技術識別碼。

04

間距

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

採用嚴格的 4px 格線系統，以維持一致的視覺密度。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用 rgba(172, 172, 175, 0.2) 的細微 1px 邊框定義卡片邊界，同時不破壞深色主題的沉浸感。

0px 1px 3px 0px rgba(0, 0, 0, 0.05) · 0px 4px 8px 20px rgba(0, 0, 0, 0.2)

06

版面

1200container
12columns
24pxgutter
768 / 1024breakpoints

主視覺區塊採用置中的單欄佈局，功能與案例研究區塊則過渡至多欄網格。

07

動效與互動

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

次要元素的透明度淡出效果。 · 互動狀態下平滑的顏色與邊框過渡。

互動元素在懸停時有細微的透明度或背景色變化。 · 透過縮放或顏色變化提供即時的視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Appwrite 是一個面向開發者的開源 Backend-as-a-Service（BaaS）平台，具有深色、精緻的介面。主要調色板由深色背景（#19191c）、高對比度白色文字（#ffffff）以及用於主要行動呼籲的鮮明粉紅色（#fd356e）組成。字體結合了用於標題的粗獷 grotesque 無襯線字體與用於內文的人文主義無襯線字體，維持簡潔、現代的美學。關鍵設計限制：切勿使用淺色背景或粉彩強調色；始終保持高對比度以確保深色表面上的可讀性；主要操作按鈕嚴格使用藥丸形（999px 圓角）以確保視覺一致性。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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