OpenDesign·你的设计资产库

网页参考

Replicate

通过简洁的 API 运行 AI 模型。

Developer ToolsAIGradientCleanTooling
Replicate 网站截图

01

设计气质 DNA

AI 基础设施API 优先以开发者为中心云原生

AI 模型的 AWS

02

色彩

#EA2804Accent
#202020Ink
#646464Ink soft
#FCFCFCBG
#F0F0F0BG soft
#F9F9F9BG quiet
#BBBBBBMuted
rgba(204,204,204,0.5)Line

高对比度实用色彩，搭配富有表现力的渐变主视觉点缀

03

字体

grotesque-sans · humanist-sans · monospace

  • display64px · 700
  • heading36px · 700
  • body16px · 400

标题采用紧凑字距和高字重以增强视觉冲击力 · 代码片段使用等宽字体并辅以语法高亮 · 渐变背景上的文本需保持高对比度以确保可读性

04

间距

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

基于标准 4px 网格，主要章节周围预留充足留白

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

交互元素采用 1px solid #202020 边框，卡片则无边框

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽度主视觉区域，内容居中，下方为基于网格的功能模块区

07

动效与交互

150msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的色彩过渡 · 加载状态的透明度渐变 · 按钮与链接的平滑悬停效果

文本链接和按钮在悬停时发生色彩变化与微妙的透明度调整 · 点击时提供即时的视觉反馈，并带有过渡动画

08

组件

  • button 实心黑色胶囊状按钮，搭配白色文字和闪电图标；或使用描边胶囊按钮作为次级操作
  • card 简洁的代码块，支持语法高亮，并通过标签页界面实现语言切换
  • chip 标签式语言选择器（Node、Python、HTTP），激活状态带下划线
  • input 圆角搜索栏，并附有键盘快捷键提示
  • hero 大面积渐变背景，搭配醒目的字体和突出的行动号召按钮

09

文案语气与禁用清单

  • 语气 专业、技术且充满自信
  • 标题风格 采用简短、祈使句式的陈述，强调简洁与强大
  • 按钮文案 以行动为导向，并清晰传达价值主张
  • 不要使用多种强调色 —— 截图显示红色是唯一的高饱和度强调色
  • 不要为代码块使用圆角 —— 截图显示代码面板为直角
  • 不要为标题使用衬线字体 —— 截图显示所有排版均一致使用无衬线字体
  • 不要为大多数 UI 元素添加投影 —— 截图显示投影仅用于特定组件，且使用极简
  • 不要使用全宽度按钮 —— 截图显示按钮具有标准内边距和胶囊形状
  • 不要在长段落中使用居中文本 —— 截图显示正文为左对齐
  • 不要在同一区域混用不同样式的按钮 —— 截图保持按钮样式统一
  • 避免: 营销术语
  • 避免: 过于随意的语言
  • 避免: 标题中包含复杂的技术解释
  • 避免: 缺乏具体案例的模糊承诺

10

包内真实截图

Replicate — 桌面首屏（hero）
桌面首屏（hero）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Replicate — 移动首屏
移动首屏

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

11

System Prompt

Replicate 是一个以开发者为中心的 AI 平台，其界面简洁、专业，强调简洁性与技术能力。设计采用浅色背景（#FCFCFC）搭配黑色（#202020）文本与红色（#EA2804）点缀，营造出高对比度的可读性。字体组合采用人文主义无衬线字体作为正文，搭配一款怪诞无衬线展示字体用于标题，代码则使用等宽字体。关键色彩包括渐变主视觉（从粉红到红再到黄），以及 UI 元素上一致使用的黑白配色。关键设计规则：不使用多种强调色，保持代码块为直角，并确保所有排版一致使用无衬线字体。布局采用 12 列网格，拥有充足留白和清晰的视觉层次，引导开发者浏览技术内容。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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