OpenDesign·你的设计资产库

网页参考

Render

直观的云基础设施，用于部署和扩展应用程序。

Developer ToolsInfra
Render 网站截图

01

设计气质 DNA

基础设施云平台部署开发者生产环境

一个干净、专业的工作空间，用于管理复杂基础设施

02

色彩

#8A05FFAccent
#0D0D0DInk
#4D4D4DInk soft
#FFFFFFBG
#6B6B6BMuted
rgba(227,227,227,1)Line

高对比度的黑白基础，搭配鲜艳的紫色强调色用于交互元素和品牌标识。

03

字体

geometric-sans · humanist-sans · monospace

  • display80px · 400
  • h240px · 400
  • body-lg20px · 400
  • body16px · 400
  • caption12px · 400

展示字体使用紧凑的字间距和行高以增强冲击力 · 正文文本通过充足的行高保持舒适的阅读体验 · 等宽字体用于代码片段和终端命令 · 有限的字体粗细变化保持设计的整洁和可读性

04

间距

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

基于4px的统一网格，配以充足的留白以提供呼吸空间

05

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

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

卡片和容器使用1px solid #E3E3E3，主要操作按钮使用1px solid #0D0D0D

0px 0px 0px 1px rgba(227,227,227,1) · 0px 0px 0px 1px rgba(13,13,13,1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称双栏首屏，左侧文字，右侧插图。内容分区使用标准的12列网格。

07

动效与交互

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

颜色和背景变化的平滑过渡 · 交互元素的变换动画 · 内容显现的透明度渐变

颜色过渡使用0.3s缓动，交互元素上的背景色有细微变化 · 通过变换和颜色变化提供即时视觉反馈

08

组件

  • button 高对比度的黑白配色，尖锐边角（2px圆角）。主要操作为黑色填充，次要操作为描边。
  • card 干净的白色卡片，带有细微的1px边框且无阴影，通常包含UI模型或数据可视化。
  • chip 在提供的截图中未突出展示。
  • input 干净的搜索输入框，带有细微边框和等宽字体，适用于技术场景。
  • hero 分栏布局，左侧为粗体标题，右侧为交互式仪表盘插图，并有清晰的行动号召按钮。

09

文案语气与禁用清单

  • 语气 专业、自信、技术精准
  • 标题风格 粗体、简洁的陈述，强调速度和生产就绪性
  • 按钮文案 直接且以行动为导向，具有明确的价值主张
  • 不要在主按钮上使用圆角——截图显示为尖锐的2px圆角
  • 不要给卡片添加投影——截图显示为带有细微边框的扁平卡片
  • 不要使用多种强调色——截图显示紫色作为唯一的强调色
  • 不要为标题使用装饰性字体——截图显示为干净的几何无衬线字体
  • 不要使用低对比度文本——截图保持了文字与背景之间的高对比度
  • 不要使用杂乱的背景——截图显示为干净的白色背景，装饰极少
  • 避免: 过于随意的语言
  • 避免: 未经解释的行话
  • 避免: 缺乏证据的夸张宣称

10

包内真实截图

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

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

11

System Prompt

这是一个专业的开发者工具SaaS平台，具有干净、高对比度的黑白基础。设计使用2px圆角、几何无衬线标题字体（PPNeueMontreal）和人文主义无衬线正文字体。关键十六进制颜色包括：墨黑色#0D0D0D、背景白色#FFFFFF、紫色强调色#8A05FF和边框灰色#E3E3E3。关键禁忌：不要在主按钮上使用圆角，不要给卡片添加投影，不要使用多种强调色，不要使用装饰性字体，不要使用低对比度文本，不要使用杂乱背景。布局特点是不对称双栏首屏，配有技术仪表盘插图，强调生产就绪的基础设施。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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