精选 · 开放 · 免费

Storyblok

面向现代框架的企业级 Headless CMS，拥有简洁愉悦的美学设计

cmsdev

Storyblok 网站截图

↓ 下载设计系统包 (16 MB)在 OpenDesign 中打开

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

📦 浏览包内文件 →

01

设计气质 DNA

Headless CMS开发者优先AI 内容愉悦

一个对开发者友好、既精致又易于上手的内容平台

02

色彩

#7530F7Accent

#1F1F1FInk

#44474AInk soft

#FFFFFFBG

#808080Muted

rgba(31,31,31,0.12)Line

高对比度的中性色，搭配单一活力的紫色点缀和策略性的蓝色高亮

03

字体

geometric-sans

display56px · 900
heading48px · 900
subheading36px · 700
body16px · 400
small14px · 400
caption12px · 400

标题使用字重 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

按钮和链接的平滑悬停过渡 · 交互元素上的微妙颜色过渡

按钮的背景色变化，链接的透明度变化 · 主要操作的缩放反馈

08

组件

button 主按钮采用深色实心填充配白色文本，次按钮采用描边轮廓，圆角
card 带一致内边距的简洁带边框容器
input 带微妙边框的标准文本输入框
hero 浅色背景上的大号粗体排版，蓝色强调文本，居中布局

09

文案语气与禁用清单

语气自信、技术性，略带俏皮
标题风格 采用加粗的陈述句式，选择性使用色彩强调
按钮文案 直接的行动动词，如“免费试用”和“查看我们的 MCP”

不要使用多种强调色——截图显示紫色和蓝色被谨慎使用，并有清晰的层次
不要使用厚重的阴影——截图显示使用了最小化、微妙的投影
不要使用装饰性字体——截图显示全文使用几何无衬线体
不要使界面杂乱——截图保持了充足的留白和呼吸空间
不要使用激进的 CTA——截图显示冷静、清晰的按钮标签
不要混用视觉风格——截图保持了统一的圆角和排版
避免: 过于企业化的语言
避免: 被动语态
避免: 缺乏上下文的术语
避免: 激进的销售话术

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

这是一个面向开发者的 Headless CMS SaaS 平台。设计在技术可信度与平易近人的亲和力之间取得平衡。主色调为白色背景搭配近乎黑色的文本（#1F1F1F）和紫色强调色（#7530F7）。蓝色高亮（#3B82F6）出现在英雄区文本中。标题排版使用几何无衬线体，字重 900，字间距紧凑。不要使用多种冲突的强调色。不要应用厚重的阴影或渐变。不要使用装饰性的衬线字体。布局以内容为中心，间距充足。按钮主操作采用深色填充和圆角。界面感觉干净、现代，但又不至于冷漠。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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