精选 · 开放 · 免费
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
2px实心黑色边框，采用略显不规则的手绘风格。
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