精選 · 開放 · 免費

Strapi

專為 AI 驅動網站與應用程式打造的開源無頭 CMS

cmsdev
Strapi 網站截圖
↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://strapi.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

開源無頭 CMSAI 驅動以開發者為中心

一個以開發者為優先的內容平台，在技術實用性與高品質質感之間取得平衡

02

色彩

#4F46E5Accent
#FFFFFFInk
#3E3E5CInk soft
#0F0F23BG
#F7F8FCBG soft
#E7EDF1BG quiet
#5E709DMuted
rgba(94,112,157,0.2)Line

高對比的深色/淺色區塊，並以靛藍色作為行動呼籲的強調色

03

字型

geometric-sans · humanist-sans · monospace

使用 Poppins 作為展示型與標題字體 · 使用 Inter 作為內文與 UI 元素字體 · 在深色背景上維持寬裕的行高以利閱讀

04

間距

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

以 8px 為基準單位，並維持一致的垂直節奏

05

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

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

1px solid rgba(94,112,157,0.2)

rgba(26,26,67,0.1) 0px 1px 4px 0px · rgba(0,0,0,0.1) 0px 4px 12px 0px · rgba(0,0,0,0.08) 0px 6px 10px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

置中的內容搭配寬裕的留白，以及全寬的深色英雄區塊

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4,0,0.2,1)easing

hover 時的色彩過渡 · 互動狀態的透明度變化

文字連結的色彩變化，卡片細微的陰影浮起效果 · 透過色彩/透明度提供即時的視覺回饋

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Strapi 的設計系統以開發者為目標受眾，用於建構 AI 驅動的應用程式，採用深色/淺色雙區塊的設計手法。主要色彩包含用於英雄區塊的深邃海軍藍 (#0F0F23)、用於內容區域的白色 (#FFFFFF)，以及用於行動呼籲的靛藍色 (#4F46E5)。字體排印方面，使用幾何風格的 Poppins 作為展示型/標題字體，以及人文主義風格的 Inter 作為內文字體，以維持清晰的層級結構。關鍵的「不要」事項：避免在互動元素上使用灰暗的顏色（標準做法是使用鮮明的靛藍色）、不要將長篇內文置中、為程式碼片段維持寬裕的尺寸。此系統強調技術可信度，採用簡潔的佈局、細微的陰影與有目的性的留白。專注於清晰的價值主張，並採用開發者友好的模式，例如可複製的程式碼區塊與直接的行動呼籲。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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