精選 · 開放 · 免費

Storyblok

為現代框架設計的企業級 Headless CMS，具備簡潔愉悅的美學

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

原站: https://www.storyblok.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

Headless CMSDeveloper-firstAI 內容愉悅感

一個開發者友好的內容平台，兼具精緻質感與親和力

02

色彩

#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line

以高對比中性色調為基底，搭配單一活潑的紫色作為主強調色，並策略性地運用藍色作為輔助亮點

03

字型

geometric-sans

標題使用字重 900，字距緊湊 · 內文維持寬裕行高以利閱讀 · 按鈕文字為字重 500，尺寸 16px · 強調色彩僅用於英雄區塊的關鍵語句

04

間距

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

固定 24px 欄間距，區段內距寬裕，設為 48-96px

05

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

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

卡片與輸入框採用 1-2px 的柔和邊框

0 2px 8px rgba(31,31,31,0.08) · 0 4px 16px rgba(31,31,31,0.12)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

採用置中單欄英雄區塊設計，下方為全寬內容區段

07

動效與互動

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

按鈕與連結具備流暢的 hover 過渡效果 · 互動元素具有細膩的色彩過渡變化

按鈕背景色變化，連結透明度改變 · 主要操作具有縮放回饋

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個以開發者為導向的 SaaS 平台，用於 Headless CMS。其設計平衡了技術可信度與親和力。主要色彩為白色背景搭配近黑色文字 (#1F1F1F) 與紫色強調色 (#7530F7)。藍色亮點 (#3B82F6) 用於英雄區塊文字。排版採用幾何無襯線字體，標題字重為 900，字距緊湊。不要使用多種相互競爭的強調色。不要使用厚重陰影或漸層。不要使用裝飾性襯線字體。佈局採用置中設計，留白充足。主要操作按鈕採用實心深色填充與圓角設計。整體介面感覺簡潔現代，同時不顯冰冷。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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