精選 · 開放 · 免費

Webstudio

簡潔深色主題的開發者工具平台，專注於速度與動態渲染。

designnocode

Webstudio 網站截圖

↓ 下載設計系統包 (44 MB)在 OpenDesign 中開啟

原站: https://webstudio.is

📦 瀏覽包內檔案 →

01

設計氣質 DNA

網頁開發無程式碼效能託管建構工具

現代開發者導向的 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

hover 時平滑色彩與縮放過渡 · 連續動態採用線性滑動動畫 · 趣味互動帶有彈簧式回彈

輕微放大並改變顏色，搭配平滑過渡 · 細微縮小效果

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

以開發者為中心的深色主題網頁應用程式建構平台。主要背景為深炭灰色 (#11181C)，較淺的深色表面為 (#1A1D1E)。深色背景上文字為淺灰色 (#E6E7E9)。強調色為活潑多彩漸層（從 teal 到 purple 到 pink 到 gold）。字體使用 Manrope（人文無襯線字體），標題採用緊湊字距。關鍵元素包括圓角按鈕 (100px 半徑)、細微邊框 (rgba(208,211,212,0.19)) 及卡片式佈局。重要禁忌：不要使用淺色模式、不要使用襯線字體、不要使用尖銳角、不要使用實色強調色、不要使用厚重陰影、不要在內文中使用全大寫。專注於效能訊息與開發者體驗。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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