OpenDesign·你的设计资产库

网页参考

Storyblok

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

CMSDeveloper Tools
Storyblok 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。