精選 · 開放 · 免費
Kevin Tw
一個活潑、手繪風格的個人作品集網站，模擬實體筆記本的質感。
PlayfulPortfolioExpressiveMobile UI
01
設計氣質 DNA
手繪筆記本素描風格個人化活潑
一本手繪、互動式的實體筆記本，用作個人化的連結導覽頁。
02
色彩
#D93025Accent
#000000Ink
#FFFFFFBG
#ECECECBG soft
rgba(0,0,0,1.0)Line
高對比、單色調的素描風格，搭配極簡且刻意的色彩點綴。
03
字型
humanist-sans
- display
50px · 700 - body
20px · 600
文字採用標準系統字型，但透過加寬字距與加粗字重，模擬粗體麥克筆的筆觸。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
100px
版面受限於嚴格的垂直連結堆疊，並均勻分隔。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 50px
0px 2px 9px 0px rgba(82, 79, 79, 0.15) · 15px 15px 33px 0px rgba(27, 27, 27, 0.1)
06
版面
1280container
1columns
24pxgutter
768 / 1024breakpoints
單一居中的垂直互動元素欄位，置於類似橫線紙張的背景上。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動連結按鈕在 hover 時的平滑過渡效果。
手繪連結按鈕上的細膩視覺回饋，可能是輕微的顏色變化或位移。 · 標準的連結導覽行為。
08
組件
- button 手繪矩形輪廓，搭配粗黑邊框與白色/淺灰色填充，內含左對齊的素描風格圖示與置中文字。
- card 整張筆記本頁面作為一個大型卡片，帶有細膩的紙張浮起陰影效果。
- chip 無可見元素。
- input 無可見元素。
- hero 簡潔版面，包含一個圓形手繪頭像與一個大而粗體、手寫風格的名稱。
09
文案語氣與禁用清單
- 語氣 活潑、個人化且平易近人。
- 標題風格 粗體、手寫且富有表現力。
- 按鈕文案 輕鬆且口語化，以簡潔連結形式呈現。
- 不要使用完美筆直、幾何感的線條——截圖顯示的是略帶搖晃的手繪邊框。
- 不要使用企業級、精緻的字體排版——截圖顯示的是粗體、手寫風格的標題。
- 不要使用複雜的色盤——截圖以單色調為主，僅有極簡的紅/藍色點綴。
- 不要使用沉重、逼真的投影——截圖展現的是細膩的紙張浮起效果。
- 不要使用標準化、統一的圖示——截圖採用自訂、素描風格的手繪圖示。
- 不要使用標準的圓角 UI 元件——截圖呈現的是不規則、素描感的矩形。
- 避免: 正式的企業語言
- 避免: 過於複雜的 UI 模式
- 避免: 嚴格的網格佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個活潑的個人作品集網站，採用手繪筆記本的美學風格。設計基於嚴格的單色調色盤，使用亮白色背景（#FFFFFF）與深黑色墨水（#000000），並以單一紅色（#D93025）作為旗標圖示的點綴。字體排版採用粗體 humanist-sans 字型，運用厚重字重與寬鬆字距，模擬粗麥克筆的筆觸。版面為簡潔的居中垂直欄位，佈滿素描風格的連結按鈕。關鍵約束：避免筆直的幾何線條，改用略帶搖晃的手繪邊框；避免精緻、企業級的 UI 元素；避免複雜的色彩漸層；避免逼真的 3D 效果，改用細膩的紙張陰影；避免完美統一的圖示；避免正式、僵化的網格佈局。
en · zh-CN · zh-TW · ja · ko