OpenDesign·你的设计资产库

网页参考

Webstudio

一个专注于速度与动态渲染、采用深色主题的开发者工具平台。

DesignNocode
Webstudio 网站截图

历史页面片段，非最新首页；规范与授权仍需分别核实。

01

设计气质 DNA

Web开发无代码性能托管构建器

一个面向现代开发者的IDE界面

02

色彩

linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)Accent
#E6E7E9Ink
#D0D3D4Ink soft
#11181CBG
#1A1D1EBG soft
rgba(255,255,255,0.05)BG quiet
#A6A9ABMuted
rgba(208,211,212,0.19)Line

深色背景上的高对比度墨色文字，辅以微妙的边框

03

字体

humanist-sans · monospace

  • display36px · 600

正文使用400字重 · 强调部分和UI元素使用600字重 · 大号展示型文字应用紧凑的字间距（-1.5px）

04

间距

4px
9px
18px
27px
36px
72px
144px

以4.5px为基础单位，垂直节奏按其倍数递增

05

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

sm · 4px
md · 9px
lg · 18px
pill · 100000px

1px solid rgba(208,211,212,0.19)

0 2px 3px rgba(0,0,0,0.13) · 0 0 32px rgba(74,78,250,0.5)

06

布局

1200container
12columns
27pxgutter
768 / 1024breakpoints

内容居中，垂直内边距充裕

07

动效与交互

150msmicro
250mssmall
1500msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

悬停时平滑的颜色和缩放过渡 · 连续运动采用线性滑动动画 · 趣味交互采用弹簧式回弹

轻微放大并平滑变色 · 细微的缩放效果

08

组件

  • button 圆角胶囊形按钮，带有微妙边框或渐变背景
  • card 深色卡片，边框细腻，圆角（9px）
  • chip 小巧的圆角标签，带有微妙边框
  • input 深色输入框，边框细腻，圆角
  • hero 居中的大号标题，配有渐变点缀和浮动的UI元素

09

文案语气与禁用清单

  • 语气 专业而亲切
  • 标题风格 关于性能的简洁有力陈述
  • 按钮文案 直接的行动号召，搭配渐变背景
  • 不要使用浅色背景——截图主要展示深色模式
  • 不要使用衬线字体——截图中仅使用人文无衬线体
  • 不要使用高饱和度的纯色强调色——截图使用渐变
  • 不要使用尖锐的直角——截图中显示的是圆角元素（9px+）
  • 不要使用厚重的盒子阴影——截图使用微妙的层次感或光晕
  • 不要在正文中使用全大写——截图中使用句子首字母大写
  • 避免: 营销术语
  • 避免: 未经解释的过于技术化的语言
  • 避免: 侵略性的紧迫感

10

包内真实截图

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

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

11

System Prompt

一个面向开发者的深色主题Web应用构建平台。主背景为深炭色（#11181C），层次较浅的深色表面（#1A1D1E）。文字在深色背景上呈现浅灰色（#E6E7E9）。强调色是鲜艳的多色渐变（青绿、紫、粉、金）。字体使用Manrope（人文无衬线体），标题字间距紧凑。关键元素包括圆角按钮（100px半径）、微妙的边框（rgba(208,211,212,0.19)）和卡片式布局。关键禁忌：不要使用浅色模式，不要使用衬线字体，不要使用尖锐直角，不要使用纯色强调色，不要使用厚重阴影，不要在正文中使用全大写。聚焦于性能信息传递和开发者体验。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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