精选 · 开放 · 免费
Windsurf
在一个界面中管理本地和云端代理集群。
aidev
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
- display
56px · 500 - heading
40px · 500 - body-lg
20px · 400 - body
16px · 400 - caption
13px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该设计是为名为 Devin Desktop 的开发者工具打造的干净、专业的产品页面。它采用极简的白色画布,点缀一个鲜明的蓝色(#317CFF)作为主要操作的强调色。字体由几何无衬线和人文无衬线构成,使用大号、紧凑字距的标题以获得强烈的视觉冲击力。关键设计元素包括充足的空白、细微的 1px 边框和非常柔和的阴影。关键设计约束:避免使用多种强调色,绝不使用装饰性衬线字体,并保持墨色与背景之间的高对比度以实现最大可读性。语调是技术性和高效的,目标受众是工程团队。
en · zh-CN · zh-TW · ja · ko