精选 · 开放 · 免费
Gitpod
面向后台代理的平台。
devtool
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
- display
72px · 400 - body
18px · 400 - caption
12px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（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
这是一个高端、面向企业的 B2B SaaS 平台，专注于 AI 开发者工具。它采用干净的单色调色板（白色、浅灰、深灰、近黑色），并以单一的柔和深绿色（#397554）作为强调色。字体方面，大型权威的过渡衬线体用于展示标题，与干净的新怪诞无衬线体用于所有正文和界面文本形成对比。关键布局约束：使用充足留白、12列居中网格和基于 8px 的边框圆角。核心约束：保持墨迹色（#0A0E19）与背景之间的高对比度，避免过度装饰的字体，仅使用指定的柔和绿色作为点缀链接，并确保所有交互元素使用标准的 0.2 秒 cubic-bezier 过渡。
en · zh-CN · zh-TW · ja · ko