OpenDesign·你的设计资产库

网页参考

Fly.io

一个活泼、开发者优先的云平台,让基础设施变得平易近人且高效快速。

Developer ToolsInfra
Fly.io 网站截图

01

设计气质 DNA

活泼以开发者为中心现代基础设施平易近人自信

一个友好、邻家式的工坊,用于构建和部署代码。

02

色彩

#7c3aedAccent
#202237Ink
#281950Ink soft
#f1f2f9BG
#a39ac1Muted
rgba(231,230,244,1)Line

柔和、低饱和度的背景,搭配深色、高对比度的文字,并用单一鲜明的紫色作为主要操作的强调色。

03

字体

grotesque-sans · humanist-sans · monospace

  • display56px · 500

展示文本使用加粗、略带不规则感的 grotesque 字体以体现个性。 · 正文使用清晰易读的 humanist 无衬线字体。 · 斜体强调(如 'fearlessly')使用衬线字体以示突出。 · 大标题使用紧凑的字距,较小文本的字距则稍宽松。

04

间距

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

各区块之间采用宽松的垂直间距,而分组元素内部则使用紧凑的间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(231,230,244,1)

rgba(32,34,55,0.075) 0px 0px 0px 1px · rgba(32,34,55,0.05) 0px 10px 15px -3px · rgba(91,33,182,0.1) 0px 5px 5px -2px

06

布局

1280container
12columns
32pxgutter
768 / 1024breakpoints

以居中的单列主视觉区域起始,过渡到多列功能网格。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

颜色和背景过渡使用标准 ease-in-out 缓动。 · 微交互使用快速的不透明度和变换变化。

交互元素上的背景或颜色发生细微变化。 · 标准的按压反馈。

08

组件

  • button 主要按钮为药丸形状,采用纯紫色背景和白色文字;次要按钮为透明背景配以细微边框。
  • card 边框柔和、无边框的卡片,采用柔和阴影或通过邻近性进行分组。
  • chip 未显著使用;框架徽标以图标徽章形式出现。
  • input 截图中未显示;推断为简洁、圆角的输入框。
  • hero 大型、居中的标题,上方有一幅突出、奇趣的插图。

09

文案语气与禁用清单

  • 语气 自信、友好,略带不羁。
  • 标题风格 简短、有力、直接,常混合使用粗体和斜体以示强调。
  • 按钮文案 以行动为导向且清晰明确,例如 '部署你的应用'。
  • 不要使用深色主题——截图显示背景以柔和、偏淡紫的浅色调为主。
  • 不要使用僵硬、几何感的插图——截图显示为手绘、奇趣且有机的线条艺术。
  • 不要使用单一、刺眼的强调色——截图显示以紫色为主,但插图中使用了柔和的粉彩色板。
  • 不要使用紧凑、密集的布局——截图显示有充足的留白和清晰的视觉分隔。
  • 不要使用纯无衬线字体排印——截图显示标题中使用了衬线字体进行斜体强调。
  • 不要使用尖锐、硬边角的UI元素——截图显示边角一致圆润,通常为药丸形状。
  • 避免: 过于企业化的行话
  • 避免: 冷淡、非个人的语言
  • 避免: 密集、技术性的文字堆砌

10

包内真实截图

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

11

System Prompt

Fly.io 是一个开发者优先的云平台,具有活泼、平易近人的品牌形象。其设计基因建立在柔和、偏淡紫的背景色 (#f1f2f9) 与高对比度的深墨色文字 (#202237) 之上。鲜明的紫色 (#7c3aed) 用作号召性用语的主要强调色。排印混合了加粗、有个性的 grotesque 无衬线字体用于标题、清晰的 humanist 无衬线字体用于正文,以及用于强调的斜体衬线字体。其美学定义于奇趣的手绘插图和宽松的间距。关键禁忌:避免深色模式、避免尖锐边角,以及避免冷淡、企业化的语言。布局居中且宽敞,优先考虑清晰度和友好的语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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