精選 · 開放 · 免費

Remix

為開發者打造的現代、高效能網頁框架。

devtoolsframework

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

原站: https://remix.run

📦 瀏覽包內檔案 →

設計氣質 DNA

開發者框架效能現代

專為網頁開發打造的高速賽道

色彩

#3facf9Accent

#ffffffInk

#dee2e6Ink soft

#000000BG

#1e2226BG soft

rgba(255, 255, 255, 0.12)Line

高對比深色模式，搭配鮮明、充滿活力的點綴色。

字型

geometric-sans · humanist-sans · monospace

display84px · 700
heading56px · 700
body16px · 400
caption13px · 400

導覽和 UI 標籤使用大寫字母與等寬字體。 · 醒目標題使用粗體、緊湊字距的幾何無襯線字體。 · 內文使用簡潔的人文主義無襯線字體。

間距

4px

8px

16px

24px

32px

48px

64px

96px

120px

主要內容區塊之間保留寬裕的垂直內距 (120px)。

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 8px

lg · 24px

pill · 999px

1px solid rgba(255, 255, 255, 0.12)

rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全寬度深色首頁區塊，中央放置內容區，過渡為雙欄功能展示佈局。

動效與互動

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

細微的背景粒子動畫與發光光軌。 · UI 元素的平滑透明度過渡效果。

互動元素的顏色過渡效果。 · 按鈕和連結使用指標游標。

組件

button 簡約的文字按鈕，常為大寫等寬字體標籤。
card 深色背景搭配語法高亮的程式碼區塊，或帶有細微邊框的玻璃擬態面板。
chip 大寫等寬字體的導覽標籤（例如：[G] GITHUB）。
input 命令列風格，使用等寬字體（例如：npx remix@next new）。
hero 超大尺寸、緊湊字距的醒目字體，置於動態深色粒子場背景之上。

文案語氣與禁用清單

語氣自信、技術性、賦予力量。
標題風格 大膽、直接的陳述，強調強大功能與 versatility。
按鈕文案 直接的指示，常包含命令列程式碼片段。

勿使用淺色模式或柔和背景色——截圖顯示為深色、高對比環境。
勿使用襯線或手寫字體作為標題——截圖顯示為粗體、緊湊字距的幾何無襯線字體。
勿在元件上使用厚重粗邊框——截圖顯示為細微、纖細、低不透明度的邊框。
勿在導覽中使用標準句首大寫——截圖顯示為大寫等寬字體標籤。
勿使用靜態、扁平的背景——截圖顯示為動態、具動畫效果的粒子場與發光光軌。
勿使用狹窄、擁擠的間距——截圖顯示區塊之間保留寬裕的垂直內距。
避免: 過於複雜的技術術語，卻未清楚說明其效益。
避免: 被動或猶豫的語氣。
避免: 明亮或柔和的色彩調色盤。

包內真實截圖

Remix — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

擷取自真實頁面 · 真 computed styles

System Prompt

Remix 是一個高效能網頁框架網站，採用深色、以開發者為導向的美學。設計使用純黑 (#000000) 與米白 (#ffffff, #dee2e6) 為主調色盤，搭配鮮明的藍色點綴 (#3facf9) 與充滿活力的光軌。字體結合粗體幾何無襯線字體用於大型醒目標題、人文主義無襯線字體用於內文，以及等寬字體用於程式碼和 UI 標籤。關鍵特徵包括緊湊字距的標題、寬裕的垂直間距 (120px)，以及細微、發光的互動元素。重要禁忌：避免淺色主題、避免使用襯線字體作為標題、避免厚重邊框。網站設計需營造快速、現代、技術性的感覺。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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