精選 · 開放 · 免費
Soulwire
為創意程式碼編寫者與工程師設計的極簡、等寬字型作品集。
DeveloperPortfolioDark ModeMonospaceClean
01
設計氣質 DNA
創意程式碼編寫者生成式設計互動式極簡
類似終端機的個人作品集
02
色彩
#E2E6E8Ink
#16191BBG
rgba(226,230,232,1.0)Line
嚴格的單色調配色方案，使用接近黑色的背景與淺灰色文字
03
字型
monospace
所有文字使用等寬字型 · 全程使用輕量字重（300） · 章節標籤使用大寫字母與字距調整
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
線性且可預測，章節之間留有寬裕的留白空間
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
無可見邊框
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬深色背景上的置中內容欄位
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing
元素出現時的透明度過渡效果
互動元素上顯示指標游標 · 標準瀏覽器行為
08
組件
- button 簡潔的等寬字型文字連結，搭配指標游標
- card 無
- chip 無
- input 無
- hero 簡潔的左對齊文字區塊，包含大型標題與簡短個人簡介
09
文案語氣與禁用清單
- 語氣 專業、直接且極簡
- 標題風格 簡潔、對話式且大型
- 按鈕文案 Plain 等寬字型文字連結
- 不要使用襯線字型——截圖中僅顯示等寬字型
- 不要使用明亮或飽和的顏色——截圖中顯示嚴格的灰階配色方案
- 不要添加陰影或深度——截圖中顯示完全平坦的表面
- 不要在元素上使用圓角——截圖中顯示尖角或無圓角
- 不要使用傳統導航列——截圖中顯示整合於佈局中的連結
- 不要使用置中文字對齊——截圖中顯示左對齊的內容區塊
- 避免: 行銷術語
- 避免: 過度裝飾
- 避免: 對話填充詞
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為創意程式碼編寫者設計的極簡開發者作品集，採用深色、單色調配色方案（背景色 #16191B，墨色 #E2E6E8）與嚴格的等寬字型排版系統（Roboto Mono）。佈局為置中單欄結構，留有寬裕的留白空間，無邊框或陰影。關鍵禁止事項：不要引入任何襯線或無襯線字型，不要使用任何飽和或高色度強調色，不要為元素添加任何三維深度或圓角。
en · zh-CN · zh-TW · ja · ko