精选 · 开放 · 免费

Webstudio

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

designnocode
Webstudio 网站截图
↓ 下载设计系统包 (44 MB)在 OpenDesign 中打开

原站: https://webstudio.is

📦 浏览包内文件 →

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

正文使用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

组件

09

文案语气与禁用清单

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko