精選 · 開放 · 免費

Render

直覺的雲端基礎架構，用於部署與擴展應用程式。

devtoolsinfra
Render 網站截圖
↓ 下載設計系統包 (9 MB)在 OpenDesign 中開啟

原站: https://render.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

基礎架構雲端平台部署開發者生產環境

一個用於管理複雜基礎架構的乾淨、專業的工作空間

02

色彩

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

以高對比的黑與白為基底，搭配 vibrant 紫色強調色，用於互動元素與品牌識別。

03

字型

geometric-sans · humanist-sans · monospace

展示型字型採用緊湊的字距與行高，以營造視覺衝擊力 · 內文字型保持舒適的閱讀體驗，並採用充裕的行高 · 等寬字型用於程式碼片段與終端機指令 · 限制字型粗細變化，以維持設計的乾淨與可讀性

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

組件

09

文案語氣與禁用清單

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個專業的開發者工具 SaaS 平台，具備乾淨、高對比的黑與白基底。設計採用銳利的 2px radius 圓角、幾何無襯線字型標題（PPNeueMontreal）以及人文主義無襯線字型內文。關鍵色碼包括：墨色 #0D0D0D、背景色 #FFFFFF、紫色強調色 #8A05FF，以及邊框色 #E3E3E3。關鍵禁忌：不要在主要操作按鈕上使用圓角、不要在卡片上添加陰影、不要使用多種強調色、不要使用裝飾性字型、不要使用低對比的文字、不要使用繁雜的背景。佈局採用非對稱雙欄主視覺，搭配技術性儀表板插圖，強調生產環境就緒的基礎架構。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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