手账卡片风Scrapbook Journal
你可能会说
想要收藏手账的感觉：暖纸底色、有点衬线的大标题、卡片微微歪着贴，像自己记的。
手账卡片风是把「个人收藏」的物质感搬进网页：纸色底、衬线展示字、微旋转卡片和胶带式点缀它和图鉴气质天然契合——站点本来就叫「术语图鉴」「收藏手账」，视觉上也该像收藏的东西：不追求严丝合缝的网格秩序，允许 ±2° 的旋转、不等高的卡片、一处手绘感的强调色。克制点在装饰用量：整页只保留一种装饰语汇，多一种就从「手账」滑向「贴纸大战」。
也常被叫作收藏手账风Scrapbook纸感设计
设计原则 · Principles
- 纸色底（#F5EFE2 一带）替代纯白，白卡片在其上才有「贴在纸上」的层次
- 展示标题用衬线或圆体大字，正文维持无衬线保证可读
- 卡片微旋转 ±1–2°、阴影用 2px 硬投影，像贴上去而不像浮起来
- 装饰语汇只选一种：胶带、回形针、印章，三者不同框
- 重点内容用「贴便签」强调：局部黄色块，而不是全站换主色
- 夜纸模式换材质不换布局：纸面转黑卡纸、胶带降饱和、高光由米黄转暗金，胶带与便签在深色下仍可辨认
容易混淆？这样区分
手账卡片风≠杂志编辑风
编辑风靠严格网格和栏距建立秩序；手账风故意破坏一点秩序（旋转、错落）换人情味。方向相反，都成立。
手账卡片风≠有机设计
有机风走大地色和圆润形状，强调「自然」；手账风强调「被手工整理过」，纸、胶带、印章这些人工痕迹是主角。
AI 提示词 · Prompt
把这个内容站改成手账卡片风：页面底色 #F5EFE2 纸色，卡片 #FFFDF7 配 1px 实线浅棕描边和 2px 硬投影，奇偶卡片分别旋转 -1.2° 与 0.8°；大标题换成衬线展示字并配一条手绘感下划线色块；收藏星标用琥珀色；正文、按钮和现有交互 demo 的布局一律不动，只改表面材质。同时给出夜纸模式的深色色板（底 #211D16、卡片 #2A251C、墨色 #ECE5D3、胶带降饱和），布局与倾斜角度保持不变。
典型使用场景
收藏墙 · 胶带与卡片
左右滑动查看完整示例
我的收藏 · 第 12 页2026.09
Lucide 图标
图标库
★09.18
Linear 的克制
任务管理
★09.18
Buffer 工作流
社媒运营
★09.18
虚构示例 · 图标为各产品真实 logo
词条阅读 · 高光与便签
左右滑动查看完整示例
设计风格
手账卡片风
界面像一页手账：卡片微歪、胶带固定、关键句用荧光笔标出来。
好的工具产品允许你慢一点，也没关系，效率不是唯一目标。
FigmaTODO：卡片圆角统一 8px
我的收藏 · 星标贴纸层
左右滑动查看完整示例
我的收藏 · 星标层4 星标 · 2 归档
★
Cursor
Cursor本周常用
★
Raycast
Raycast待研究
★
Appllama
AppllamaPRO 参考
★
Linear
设计参考
★
Buffer
已归档
★
Serenona
Serenona想抄一抄
纸面双态 · 日与夜
左右滑动查看完整示例
Buffer
社媒运营
Figma
图标库
日纸 · 米黄高光
Buffer
社媒运营
Figma
图标库
夜纸 · 暗金高光
换的是材质不是布局：纸面 #F4EEE1→黑卡纸 #211D16，胶带降饱和，高光 #FBE8B0→#6B5518 衬 #FFE27A 字
延伸阅读 · 权威出处