OpenDesign·你的设计资产库

网页参考

Windsurf

在一个界面中管理本地和云端代理集群。

AIDeveloper Tools

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

01

设计气质 DNA

代理桌面端工作流开发者IDE

管理 AI 编程代理集群的指挥中心。

02

色彩

#317CFFAccent
#191919Ink
rgba(0,0,0,0.4)Ink soft
#FFFFFFBG
#F8F8F8BG soft
#A5A5A5Muted
rgba(0,0,0,0.1)Line

干净的白色画布,搭配高对比度的墨色,以及一个用于主要操作的鲜明蓝色强调色。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 500
  • heading40px · 500
  • body-lg20px · 400
  • body16px · 400
  • caption13px · 400

使用几何无衬线字体用于显示和标题,传达现代技术精确感。 · 使用人文无衬线字体用于正文,以保持高可读性。 · 为任何技术术语、代码片段或 UI 状态指示器使用等宽字体。 · 为大号显示文本保持紧凑的字间距(-1.5px),以形成强烈的视觉块。

04

间距

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

基于 4px 网格的一致垂直节奏,首屏区域留有充足的空白。

05

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

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

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.05) 0px 1px 2px 0px · rgba(0,0,0,0.1) 0px 2px 6px -2px · rgba(0,0,0,0.1) 0px 10px 15px -3px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽首屏区域后接内联内容块。

07

动效与交互

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

hover 状态下细微的不透明度和背景色过渡。 · 菜单或抽屉打开与关闭时的平滑过渡。

按钮和交互元素采用细微的背景色或不透明度变化。 · 通过轻微的缩放或不透明度降低提供即时视觉反馈。

08

组件

  • button 实心主按钮(蓝色背景,白色文字),次按钮(白色背景,黑色文字,细微边框),幽灵按钮(纯文字)。所有按钮均带有轻微的圆角。
  • card 白色背景,带有细微的 1px 边框或柔和阴影,用于容纳结构化数据或用户评价。
  • chip 细微的灰色背景(rgba(0,0,0,0.06))加 1px 边框,用于标签和筛选器。
  • input 白色背景,1px 边框,圆角,并带有清晰的占位符文本。
  • hero 干净的白色背景上的大号字体,搭配醒目的行动号召按钮。

09

文案语气与禁用清单

  • 语气 专业、技术化且直接,专注于效率与控制力。
  • 标题风格 大号、加粗且简洁,技术术语常使用等宽字体。
  • 按钮文案 以行动为导向且清晰,例如“为 MacOS 下载”或“试用 Devin”。
  • 不要使用多种相互竞争的鲜艳颜色——截图显示的是白色、黑色和单一蓝色强调色的克制配色。
  • 不要在显示文本中使用装饰性衬线字体——截图显示所有标题都使用干净的几何无衬线字体。
  • 不要使用厚重的盒状阴影或 3D 效果——截图显示的是细微、柔和的阴影,几乎难以察觉。
  • 不要使用拥挤、局促的布局——截图显示所有主要内容块周围都有充足的空白。
  • 不要为元数据使用小而难以阅读的文本——截图显示 13-16px 的文本,并带有清晰的行高。
  • 不要将所有容器都做成圆角的药丸形状——截图显示大多使用细微的 4-10px 圆角。
  • 避免: 模糊的营销术语
  • 避免: 过于活泼或随意的语言
  • 避免: 复杂的句子

10

包内真实截图

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

11

System Prompt

该设计是为名为 Devin Desktop 的开发者工具打造的干净、专业的产品页面。它采用极简的白色画布,点缀一个鲜明的蓝色(#317CFF)作为主要操作的强调色。字体由几何无衬线和人文无衬线构成,使用大号、紧凑字距的标题以获得强烈的视觉冲击力。关键设计元素包括充足的空白、细微的 1px 边框和非常柔和的阴影。关键设计约束:避免使用多种强调色,绝不使用装饰性衬线字体,并保持墨色与背景之间的高对比度以实现最大可读性。语调是技术性和高效的,目标受众是工程团队。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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