精选 · 开放 · 免费

Windsurf

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

01

设计气质 DNA

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

02

色彩

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

03

字体

geometric-sans · humanist-sans · monospace

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

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

04

间距

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

05

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

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

布局

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

07

动效与交互

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

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko