精选 · 开放 · 免费
Storyblok
面向现代框架的企业级 Headless CMS,拥有简洁愉悦的美学设计
cmsdev
01
设计气质 DNA
Headless CMS开发者优先AI 内容愉悦
一个对开发者友好、既精致又易于上手的内容平台
02
色彩
#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line
高对比度的中性色,搭配单一活力的紫色点缀和策略性的蓝色高亮
03
字体
geometric-sans
- display
56px · 900 - heading
48px · 900 - subheading
36px · 700 - body
16px · 400 - small
14px · 400 - caption
12px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向开发者的 Headless CMS SaaS 平台。设计在技术可信度与平易近人的亲和力之间取得平衡。主色调为白色背景搭配近乎黑色的文本(#1F1F1F)和紫色强调色(#7530F7)。蓝色高亮(#3B82F6)出现在英雄区文本中。标题排版使用几何无衬线体,字重 900,字间距紧凑。不要使用多种冲突的强调色。不要应用厚重的阴影或渐变。不要使用装饰性的衬线字体。布局以内容为中心,间距充足。按钮主操作采用深色填充和圆角。界面感觉干净、现代,但又不至于冷漠。
en · zh-CN · zh-TW · ja · ko