精选 · 开放 · 免费

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字体 · 正文和UI元素使用Inter字体 · 在深色背景上保持充足的行高以确保可读性

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

悬停时的颜色过渡 · 交互状态的透明度变化

文本链接颜色变化，卡片伴有微妙阴影提升 · 通过颜色/透明度提供即时视觉反馈

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