| name | infocard-scrapbook-style |
| description | 手账拼贴风信息卡主题。用于把资料封面、教程手册、课程介绍、工具指南做成 scrapbook / bullet journal 风格：暖米白纸感背景、横线或网格纹理、左侧便签式卖点、右侧资料预览、手绘箭头与贴纸装饰、黑色刷笔标题和红绿黄高亮。
触发条件：用户提到手账拼贴、bullet journal、scrapbook、sticky note、washi tape、spiral notebook、贴纸海报、资料封面、手册、教程、指南。
|
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| metadata | {"hermes":{"tags":["infocard","style","scrapbook","bullet-journal","notebook","sticky-note","editorial","hand-drawn","promo"],"related_skills":["any2card","infocard-style-man-skill","infocard-pub-publisher"]}} |
infocard-scrapbook-style
Overview
infocard-scrapbook-style 是一套面向资料封面、教程手册和课程介绍的“手账拼贴风 / 数字笔记本风”信息卡主题。
它的核心不是极简、不是冷静手册页，而是把内容做成一张像实体笔记本里剪贴出来的资料封面：
- 暖米白纸感底色
- 左侧或边缘的活页 / 螺旋装订视觉
- 彩色 sticky notes
- 手绘箭头、星星、爱心、纸夹、图钉、胶带
- 黑色手写 / 刷笔主标题
- 红、黄、绿、蓝、粉的清晰分区
- “先看什么、能学到什么、怎么上手”三段式信息组织
这套主题适合把“复杂但实用”的内容包装成容易收藏、容易分享、容易继续读的资料页。
Use Cases
适合
- 资料封面
- 教程手册 / 课程封面
- AI 工具资料包
- 快速上手清单
- 工具使用路线图
- 章节目录预览
- 资料价值说明页
- “不只是入门，进阶也实用”类宣传图
不适合
- 法务 / 财务 / 合规类正式报告
- 冷感企业 dashboard
- 纯数据密集表格
- 严肃学术论文摘要页
- 强品牌官网首页
典型触发词
- 手账
- 拼贴
- 便签
- 贴纸
- 课程封面
- 资料包
- 实用手册
- bullet journal
- scrapbook
- notebook paper
- sticky note
- washi tape
Design DNA
核心气质
- 资料感强，但不冷
- 像“可以直接收藏”的学习卡，而不是“只能看完就算”的宣传图
- 画面里应该同时看到：标题钩子、卖点、目录预览、实操预览、结尾 CTA
- 视觉语言像手账：允许轻微错位、轻微倾斜、贴纸感、纸张重叠感
- 所有装饰都为“可读性”和“收藏欲”服务，不做纯装饰噪音
视觉原则
- 先像资料封面，再像内容页：首屏必须先抓住人，再展开信息。
- 标题要强：手写 / 刷笔大标题必须有明显视觉重量。
- 卖点要分块：每个 sticky note 只承载一个明确观点。
- 预览要真实：右侧预览块要像真的内容预览，而不是空装饰。
- 底部要有 CTA：底部横幅负责收束价值主张。
- 装饰要克制：星星、箭头、纸夹、回形针、云朵可以多，但不能抢正文。
- 手作感优先于几何完美：边缘、便签、贴纸可以不完全对齐，但阅读顺序必须稳定。
- 亮色只做重点：红色抓注意力，绿色做路径/结构，黄色做提示/收藏感。
Color Tokens
:root {
--bg: #f5f1e8;
--paper: #fffaf0;
--ink: #1f1a16;
--muted: #6d645a;
--line: #2a241f;
--accent-red: #e24b3b;
--accent-green: #77bf52;
--accent-yellow: #f4d35e;
--accent-blue: #9fc7ef;
--accent-pink: #f5b7cd;
--note: #fff1c9;
}
使用规则
--bg：纸张底色，必须暖，不许纯白--paper：主要卡片底--ink：正文与标题主色--muted：说明文字--line：边框、装订线、图钉轮廓--accent-red：主标题强调、CTA、爆点标签--accent-green：目录、路径、完成感--accent-yellow：收藏提示、核心观点、贴纸高亮--accent-blue：预览、说明、结构标签--accent-pink：补充信息、轻松感标签--note：便签底
色彩约束
- 整体色彩应明亮但不荧光
- 不能把颜色做成霓虹海报
- 红色只负责“抓人”，不能铺满全页
- 绿色只负责“路径 / 目录 / 完成”，不能替代正文
- 文字必须始终清晰，不能因为纸感而变浅到难读
Typography
字体策略
- 主标题：手写感 / 刷笔感 / 粗重标题字
- 副标题：可读性强的清晰无衬线或圆润黑体
- 正文：清楚、稳、密度适中
- 标签 / 便签：更像贴纸上的短句
层级建议
- Hero title: 30–58px
- Subtitle: 13–16px
- Section title: 18–24px
- Body: 12.8–14.8px
- Tag / label / note: 10.8–12.5px
- 最小字号底线：11.2px
字体表现
- 黑色刷笔标题可略带毛边感，但不能影响识别
- 便签文字允许更轻松，但不能太小
- 右侧预览中的代码片段应使用等宽字体，强调“真实资料预览”感
Layout Skeleton
推荐的默认骨架：
page / paper background
header hook
- main title
- subtitle banner
- small sticker / badge
main grid
- left sticky-note feature stack
- right preview / sample snippets
supporting row
- what you'll learn / benefits / chapters preview
footer CTA
- strong summary banner
- small doodle / icon / callout
版式偏好
- 竖版海报优先：适合 3:4、4:5、手机长图
- 双栏拼贴：左边卖点，右边内容预览，是核心结构
- 手账感边缘：允许螺旋装订、回形针、纸条重叠
- 底部横幅：用来收束“直接拿来用”“先搞懂入口，再开始实战”这种总结句
- 内容组织顺序：先入口，再价值，再目录，再实战，不要上来就堆正文
Component Rules
1. Sticky note
- 必备组件
- 每个便签只讲一个观点
- 颜色可区分层级或主题
- 便签边缘可略有撕纸 / 圆角 / 贴纸感
2. Brush banner
- 用于主标题下的核心补充句
- 黑底白字、绿底白字、红底白字都可
- 形状应像刷笔划过，不要像规整矩形条
3. Doodle icon
- 灯泡、机器人、云朵、书本、地图、放大镜、火箭、拼图、对话气泡都很适合
- 图标必须像“手绘资料页上的小插图”，而不是工业化图标库
4. Preview box
- 右侧内容预览必须像真实章节摘录
- 可包含目录、代码片段、步骤列表、问答片段
- 预览框背景建议偏白或浅米白，增强“纸上贴纸”感
5. Checklist
- 绿色 check mark 很重要
- 适合“你会看到什么”“你能收获什么”“适合谁”这类块
- 列表要短、清晰、强承诺
6. Footer CTA
- 底部必须有一句收束全卡的价值主张
- 语气可轻松，但要有“拿去就能用”的确定性
- 建议使用高对比色横幅
Mobile Rules
720px 以下
- 双栏必须退化为单栏堆叠
- sticky notes 改为上下排列
- 预览框字号要抬高，避免变成缩小截图
- 装饰元素减少，但保留核心贴纸感
- 底部 CTA 仍要明显，不可被压缩成普通脚注
390px 验收重点
- 标题不能断裂成难读碎片
- 便签文字必须完整可读
- 预览中的代码片段不能太小
- 不允许横向溢出
- 纸夹、回形针、图钉等装饰不能压正文
- 页面不能像桌面稿缩小后直接塞进手机
移动端退化原则
- 先减装饰，再减结构
- 先保留标题和卖点，再压缩预览
- 便签可变单列，但不能变成纯列表
- 预览可以折叠，但不能消失
- 右侧内容在移动端应变成第二段阅读内容，而不是附录
Anti-patterns
- 不要做成极简黑白手册
- 不要把所有元素都做成规整方块
- 不要把颜色做成霓虹海报
- 不要让贴纸和星星过量，喧宾夺主
- 不要让预览内容变成装饰假文本
- 不要把正文做得太细太浅，失去收藏页的可读性
- 不要把图标统一成冷感线性系统图标，必须有手作感
- 不要让页面像企业培训幻灯片
Acceptance Checklist
Naming / Aliases
- 英文名：
infocard-scrapbook-style
- 中文名：手账拼贴风 / 数字笔记本风
- 常用别名：scrapbook-style、notebook-style、bullet-journal style
- 触发词：手账、拼贴、便签、课程封面、资料包、实用手册
- 对应主题 slug：
scrapbook
Implementation Notes
- 这套主题的关键不是“装饰多”，而是“像真的资料封面”
- 目录 / 预览 / 收获 / 适合谁 / CTA 五类信息最好都能在首屏附近找到
- 标题建议采用黑刷笔 + 红强调字的组合，形成强入口
- 图标尽量用“可爱但不幼稚”的手绘感插图
- 内容组织优先顺序：入口钩子 → 你会获得什么 → 目录预览 → 实战预览 → 底部总结
- 若后续要落成 live theme，应同步
_themes.yaml 与 themes.html
References
references/scrapbook-visual-language-note.md：当前主题的视觉拆解笔记，记录 scrapbook / bullet journal / sticky-note 语言。references/scrapbook-mobile-rules.md：移动端单栏退化和 390px 可读性检查要点。
Acceptance Summary
