OpenDesign·你的设计资产库

网页参考

Deno

面向现代网络的、简化的 JavaScript 运行时。

Developer ToolsRuntime
Deno 网站截图

01

设计气质 DNA

开发者运行时javascript简化现代

为现代网络开发者准备的、组织有序的工具箱。

02

色彩

#70ffafAccent
#0a0e1cInk
#1f2328Ink soft
#ffffffBG
#ecf3fdBG soft
#f5f5f5BG quiet
#868789Muted
rgba(229, 234, 234, 1)Line

纯净的白色背景搭配用于主要操作的独特薄荷绿色点缀。

03

字体

grotesque-sans · humanist-sans · monospace

  • display44px · 700
  • headline18px · 700
  • body16px · 400
  • small13px · 400

04

间距

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

标准的 4px 网格，基于行高建立一致的垂直节奏。

05

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

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

1px solid #e5eaea

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉区域分为两栏，在移动设备上过渡为单栏。

07

动效与交互

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

淡入过渡 · 流畅的悬停状态变化

交互元素上微妙的背景颜色或透明度变化。 · 通过微交互提供即时的视觉反馈。

08

组件

  • button 胶囊形主要按钮，采用实心薄荷绿色背景和深色文字；次要按钮采用深色背景和白色文字。
  • card 带有柔和阴影、白色背景和微圆角的容器。
  • chip 用于标签或交互式标签的小型圆角胶囊形元素。
  • input 圆角搜索框，带有微妙边框和集成的搜索图标。
  • hero 大型不对称分栏布局，左侧为醒目的标题，右侧为圆角插图。

09

文案语气与禁用清单

  • 语气 专业、平易近人且自信。
  • 标题风格 直接、行动导向且大胆。
  • 按钮文案 简单清晰，聚焦于‘文档’和‘GitHub’等核心操作。
  • 不要使用复杂的渐变色——截图显示为纯色平面背景。
  • 不要使用装饰性衬线字体——截图显示为干净的无衬线字体排版。
  • 不要使用刺眼的霓虹色——截图使用特定的柔和薄荷绿色作为点缀。
  • 不要使用杂乱、有多个竞争焦点的布局——截图使用了充足的留白。
  • 不要在主要元素上使用尖锐、方正的角——截图使用了圆角和胶囊形角。
  • 不要将深色模式作为主要主题——截图显示了一个以浅色、白色为主的界面。
  • 避免: 不必要的术语
  • 避免: 激进的营销语言
  • 避免: 过于正式的语气

10

包内真实截图

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

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

11

System Prompt

这是 Deno 的网站，一个开源的 JavaScript 运行时。设计简洁、现代且以开发者为中心。关键颜色包括白色背景（#ffffff）、用于柔和区块的极浅蓝灰色（#ecf3fd）、用于文字的深墨色（#0a0e1c），以及用于行动号召的独特薄荷绿色（#70ffaf）点缀色。排版使用粗体无衬线字体作为标题，人文主义无衬线字体用于正文，代码片段使用等宽字体。关键禁忌：避免复杂的深色背景，不要使用装饰性衬线字体，并保持充足的留白而非杂乱的布局。整体系统冷静、精致，专注于简化开发者工具。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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