OpenDesign·你的设计资产库

网页参考

Gitpod

面向后台代理的平台。

Developer ToolsTooling

封面待补录,可通过原站查看设计。

01

设计气质 DNA

AICloudPlatformAutomationGovernance

一个企业级编排平台,用于自主 AI 软件代理。

02

色彩

#397554Accent
#0A0E19Ink
#636363Ink soft
#FFFFFFBG
#F9F9F9BG soft
#E1E1E1BG quiet
#818181Muted
rgba(10,14,25,1.0)Line

高对比度单色基底搭配细微灰阶层次,使用深绿色点缀关键链接。

03

字体

transitional-serif · neo-grotesque-sans · monospace

  • display72px · 400
  • body18px · 400
  • caption12px · 400

大号展示字体使用过渡衬线体,传达编辑权威感。 · 所有界面元素和正文使用新怪诞无衬线体,确保最佳可读性。 · 大号展示文本保持紧凑的字间距,以形成连贯的文本块。

04

间距

4px
8px
12px
16px
24px
32px
40px
43px
64px

8px 网格

05

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

sm · 6px
md · 8px
lg · 12px
pill · 33554440px

1px solid rgba(10,14,25,1.0)

0px 0px 120px 0px rgba(0,0,0,0.07) · 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中内容,充足留白,固定顶部导航栏。

07

动效与交互

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

菜单和界面状态变化时的平滑透明度过渡。 · hover 时细微的背景和边框颜色过渡。

文本和边框的平滑颜色过渡。 · 通过透明度或背景变化提供细微视觉反馈。

08

组件

  • button 深色实心填充配白色文字,或白色填充配深色边框和文字。
  • card 简洁容器,带细微边框和 8px 圆角。
  • chip 用于标签或状态指示器的圆角小容器。
  • input 标准化文本输入框,带清晰的聚焦状态。
  • hero 大型编辑风格衬线标题搭配无衬线副文本。

09

文案语气与禁用清单

  • 语气 权威、专业、高度技术性。
  • 标题风格 使用衬线字体,大胆、陈述性的标题。
  • 按钮文案 直接且面向行动,例如「开始使用」或「申请演示」。
  • 不要使用霓虹色或高饱和度的点缀色——截图显示为柔和的深绿色点缀。
  • 不要使用过度装饰性的无衬线字体——截图显示展示用过渡衬线体,正文用干净的新怪诞无衬线体。
  • 不要使用厚重的投影——截图显示最小化、大圆角的盒状阴影或完全无阴影。
  • 不要为主要文本使用低对比度——截图显示深色墨迹(#0A0E19)与白色背景形成鲜明对比。
  • 不要使用复杂、繁杂的背景图案——截图显示干净、纯色的背景。
  • 不要使用生硬、方形的边角——截图显示一致使用 8px 至 12px 的边框圆角。
  • 避免: 过于随意的俚语
  • 避免: 过多的感叹号
  • 避免: 缺乏上下文的模糊技术术语

10

包内真实截图

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

11

System Prompt

这是一个高端、面向企业的 B2B SaaS 平台,专注于 AI 开发者工具。它采用干净的单色调色板(白色、浅灰、深灰、近黑色),并以单一的柔和深绿色(#397554)作为强调色。字体方面,大型权威的过渡衬线体用于展示标题,与干净的新怪诞无衬线体用于所有正文和界面文本形成对比。关键布局约束:使用充足留白、12列居中网格和基于 8px 的边框圆角。核心约束:保持墨迹色(#0A0E19)与背景之间的高对比度,避免过度装饰的字体,仅使用指定的柔和绿色作为点缀链接,并确保所有交互元素使用标准的 0.2 秒 cubic-bezier 过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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