精選 · 開放 · 免費
Driesbos
一個為創意開發者設計的、以文字為主的極簡作品集。
DeveloperPortfolioMonochromeCleanCuration
01
設計氣質 DNA
創意開發者獲獎肯定設計公司夥伴
光線充足的工作室中，一個組織嚴謹的工具箱。
02
色彩
#050200Ink
#E8E7E3BG
#9E9C97Muted
rgba(5,2,0,1.0)Line
高對比的單色調，搭配溫暖的紙質感背景，並絕對聚焦於排版。
03
字型
grotesque-sans
使用自訂的無襯線字體作為識別 · 維持嚴格的單一字重 400 · 使用 25px 內距以建立一致的區塊節奏
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於格線，固定 25px 內距創造一致的視覺節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
實心 1px 黑線定義區塊與表格，首頁橫幅（hero）則具有獨特的 3D 線框效果。
06
版面
1000container
4columns
768breakpoints
單欄、區塊式的佈局，專案列表採用類似表格的呈現方式。
07
動效與互動
220msmicro
330mssmall
700msmedium
cubic-bezier(0.77, 0, 0.28, 1)easing
水平跑馬燈捲軸 · 文字與背景的流暢 330ms 過渡效果 · 複雜變形的 700ms cubic-bezier easing
細微的 330ms 顏色與背景過渡效果。 · 極簡的視覺反饋，主要依賴過渡時間。
08
組件
- button 極簡的文字連結，搭配自訂的箭頭圖示。
- card 作為主要焦點的 3D 線框外框首頁橫幅容器。
- input 目前檢視中不適用。
- hero 一個透視繪製的線框方框，包含網站名稱與介紹文字。
09
文案語氣與禁用清單
- 語氣 直接、專業且簡潔。
- 標題風格 簡短、有力的短語，以破折號分隔。
- 按鈕文案 透過箭頭圖示與重複的跑馬燈捲軸暗示。
- 不要使用圓角 — 螢幕截圖顯示所有容器與卡片均為銳利的 0px 圓角。
- 不要使用厚重陰影 — 螢幕截圖僅使用平坦的 1px 實線邊框來定義。
- 不要使用裝飾性圖片 — 螢幕截圖顯示嚴格以文字為基礎的線框美學。
- 不要使用粗體字重 — 螢幕截圖顯示全站使用統一的字重 400。
- 不要使用鮮豔的強調色 — 螢幕截圖嚴格使用單色調，僅包含黑色與溫暖的米白色。
- 不要使用複雜的多欄格線 — 螢幕截圖顯示嚴格的單欄、區塊式垂直流程。
- 避免: 避免使用厚重的陰影或柔和的模糊效果
- 避免: 避免主要容器使用圓角
- 避免: 避免主要內容使用多欄佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為創意開發者設計的極簡作品集網站。它使用溫暖的米白色背景（#E8E7E3）和深棕黑色文字（#050200），搭配自訂的 grotesque-sans 字體（字重 400）。佈局為單欄、區塊式，由銳利的 1px 實線邊框定義。一個獨特的 3D 線框方框構成了首頁橫幅區域。關鍵禁忌：避免圓角、避免陰影、避免使用粗體字重，並避免使用任何鮮豔的強調色。設計依賴 330ms 的過渡效果處理所有狀態變化，並使用重複的跑馬燈捲軸進行互動。
en · zh-CN · zh-TW · ja · ko