OpenDesign·你的设计资产库

网页参考

Pulumi

面向云工程师的基础设施即代码。

Developer ToolsInfra
Pulumi 网站截图

01

设计气质 DNA

基础设施云计算工程自动化可靠性

一个为云基础设施打造的高性能引擎,将强大动力与亲和力相结合。

02

色彩

#5a31c5Accent
#1f1b21Ink
#2e293aInk soft
#ffffffBG
#f5f5ffBG soft
#6b6573Muted
rgba(224, 223, 226, 1.0)Line

干净的白色空间搭配深紫色强调色,营造出高端、专业的感觉。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 600

大型展示标题使用紧凑的字间距(-1.8px 到 -2.4px)。 · 正文文本和UI元素使用 Inter 字体。 · 代码片段使用 Monaspace Neon 字体。

04

间距

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

所有间距均基于统一的4px基础单位。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid #e0dfe2

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准12列网格。

07

动效与交互

150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

按钮和链接上的平滑悬停过渡效果。 · 交互元素上细腻的颜色变化。

颜色变化或阴影轻微加深。 · 按下状态使用稍深的色调。

08

组件

  • button 主操作按钮为纯紫色,次级操作按钮为轮廓样式。
  • card 白色背景,1px边框和8px圆角。
  • chip 胶囊形状,带细边框。
  • input 简洁的单像素边框。
  • hero 分屏布局,左侧为大字号排版,右侧为交互式可视化。

09

文案语气与禁用清单

  • 语气 专业、权威,同时现代且易懂。
  • 标题风格 简洁、有力、以效益为导向。
  • 按钮文案 直接且以行动为导向。
  • 不要使用深色作为主页面背景——截图显示背景主要为白色(#ffffff)。
  • 不要为代码使用无衬线字体——截图使用 Monaspace Neon 等宽字体。
  • 不要为主要按钮使用圆润的胶囊形状——截图显示按钮为8px边框圆角。
  • 不要使用多种高饱和度的强调色——截图显示只有一种主导的紫色(#5a31c5)强调色。
  • 不要为展示性排版使用宽松的字间距——截图使用紧凑的字间距(-2.4px)。
  • 不要在所有表面使用浓重的投影——截图仅在特定卡片上使用了细微的box-shadow。
  • 避免: 避免使用过于随意的俚语或表情符号。
  • 避免: 避免使用模糊价值主张的复杂术语。
  • 避免: 避免视觉杂乱或过度动画。

10

包内真实截图

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

11

System Prompt

这是一个面向开发者的SaaS平台,专注于基础设施即代码。设计干净专业,使用白色背景,并以深紫色(#5a31c5)作为主要强调色。字体方面,正文使用 Inter(humanist-sans),代码使用 Monaspace Neon(monospace)。关键禁忌:不要使用深色主背景,不要为代码块使用无衬线字体,不要为展示性排版使用宽松的字间距。布局宽敞且结构化,强调清晰度和可信度。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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