你是一位优秀的网页和营销视觉设计师,具有丰富的 UI/UX 设计经验,曾为众多知名品牌打造过引人注目的营销视觉,擅长将现代设计趋势与实用营销策略完美融合.现在需要为我创建一张专业级小红书封面.请使用 HTML,CSS 和 Javascript 代码实现以下要求:

## 基本要求

**尺寸与基础结构**
 - 比例严格为 3:4 (宽:高)
 - 设计一个边框为 0 的 div 作为画布,确保生成图片无边界
 - 最外面的卡片需要为直角
 - 将我提供的文案提炼为 30-40 字以内的中文精华内容
 - 文字必须成为视觉主体,占据页面至少 70%的空间
 - 运用 3-4 种不同自豪创造层次感,关键词使用最大字号
 - 主标题字号需要比副标题和介绍大三倍以上
 - 主标题提取 2-3 个关键词,使用特殊处理(如描边,高亮,不同颜色)
 
**技术实现**
 - 使用现代 CSS 技术(如 flex/grid 布局,变量,渐变)
 - 确保代码简洁高效,无冗余元素
 - 添加一个不影响设计的保存按钮
 - 使用 HTML2canvas 实现一键保存为图片的功能
 - 保存的图片应只包含封面设计,不含边界元素
 - 使用 Google Fonts 或者其他 CDN 加载适合的现代字体
 - 可引用在线图标资源(如 Font Awesome)

**专业排版技巧**
 - 运用是和及时常用的"反白空间"技巧创造焦点
 - 文字与装饰元素间保持和谐的比例关系
 - 确保视觉流向清晰,引导读者目光移动
 - 使用微妙的阴影或光效增加层次感
 
## 设计风格

- **黑红白三色系统**: 以黑白强烈对比为基调,点缀醒目红色形成视觉冲击力
- **网格化精准排版**: 严谨的网格系统控制整体构图,传达专业设计感
- **学术实验美学**: 融合学术研究与实验性设计的双重特质
- **日式现代注意**: 汲取日本设计美学,注重留白与紧凑并存的张力
- **教学图解风格**: 设计元素同时承载教育功能,如轴线系统的可视化呈现
- **多层次信息构建**: 通过色块,线条和排版创造清晰的视觉层次
- **设计史反思性**: 将历史元素与当代设计语言结合,形成对话关系

## 文字排版风格
- **中英双语对照**: 专业设计术语同时以中英文呈现，增强学术性
- **极端对比字阶**: 超大号标题与小号解释文字形成强烈视觉节奏
- **多向文字排布**: 结合横排、竖排和径向排列的文字方向实验
- **标点符号设计化**: 将问号、括号等符号放大或突出作为视觉元素
- **注释系统完备**: 学术化的引用、说明和注解系统，增强专业可信度
- **数字图形化处理**: "100"等数字被设计为具有视觉冲击力的图形元素
- **专业术语突显**: 关键设计概念通过排版手段强调，如"一根轴"、"构图"等

## 视觉元素风格
- **红线贯穿引导**: 红色线条作为视觉引导和强调，贯穿整体设计
- **几何形符号系统**: 三角形、圆点等几何符号作为辅助设计语言
- **教学指示标记**: 箭头、下划线等元素具有明确的指向性和教育性
- **区块分明信息区**: 内容被清晰划分为不同信息区块，层次分明
- **历史与现代并置**: 传统元素与现代设计手法并置，形成时间跨度的视觉对话
- **签名式认证标记**: 作者标识、成为设计的权威来源认证
- **微妙纹理变化**: 背景中若隐若现的纹理增添设计深度，避免平面化

无解分享了他是如何使用 vitepress 做笔记和在线博客的,这样非常方便在有任何想法的时候都会以简单的以纯文本的形式将它添加到博客文档里.

- 账号名称: [无解的游戏]