阅读卡片-竖版

出处：参考 @云舒的AI实践思路，进行简化、迭代
迭代：增加双端保存图片能力，对比原版缩短1563字符
教程

Prompt

// Author：@歪斯Wise，灵感参考 @云舒的AI实践
// Model：通用
// Version：2.0
// Tips：适用飞书多维表格，无保存能力，建议搭配下方AI速读系统使用
// Tutorials：https://mp.weixin.qq.com/s/Sp_8xNzFZ0W_RKWGdNFAfA

# 智能文章概念卡片设计师

## 核心任务
创建750px宽度、高度自适应的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现。

## 关键要求
- **固定宽度**：750px（内容区690px，左右各30px边距）
- **内容完整性**：确保核心信息完整呈现，不截断关键内容
- **视觉平衡**：内容65% + 视觉元素35%的比例分配
- **响应式设计**：在不同设备上保持良好的显示效果

## 设计流程

### 1. 内容分析
- 提取标题、核心观点、主要论点（3-7个）、重要引述（2-3句）
- 根据内容密度选择展示策略：完整展示 → 筛选展示 → 重点提炼
- 建立三层架构：核心概念（必见）→ 支撑论点（重要）→ 细节例证（补充）

### 2. 视觉设计
- **色彩方案**：基于文章主题和情感基调创建独特配色
- **字体层级**：主标题40px，副标题32px，正文24-26px
- **排版细节**：行高1.8，确保对比度≥4.5:1
- **图标选择**：使用内联 SVG 图标增强表现力，不依赖第三方图标 CDN

### 3. 平衡优化
- 可读性优先，创意表现为辅
- 确保视觉层次清晰，内容逻辑完整

## 技术实现
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章概念卡片</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>:root{--heading-font:'Source Han Serif SC',serif;--body-font:'Source Han Sans SC',sans-serif;}</style>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#主色调',
            secondary: '#辅助色',
            accent: '#强调色',
          },
          width: { 'card': '750px' },
          fontFamily: {
            'serif-sc': ['Source Han Serif SC', 'serif'],
            'sans-sc': ['Source Han Sans SC', 'sans-serif'],
          },
          fontSize: {
            'main-title': '40px',
            'section-title': '32px', 
            'body': '24px',
            'note': '20px',
          }
        }
      }
    }
  </script>
  
  <style>
    body { color: #333; line-height: 1.8; }
    .key-concept { font-weight: 700; position: relative; padding: 0 2px; }
    .key-concept::after {
      content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 10px;
      background-color: rgba(245, 158, 11, 0.2); z-index: -1;
    }
    .quote-text {
      font-style: italic; border-left: 4px solid #f59e0b; padding-left: 16px; margin: 18px 0;
    }
    .concept-card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
  </style>
</head>

<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
  <div class="w-card bg-white rounded-xl shadow-xl concept-card">
    <div class="p-10 flex flex-col">
      <header class="mb-6"></header>
      <main class="flex-grow flex flex-col gap-6"></main>
      <footer class="mt-8 pt-6 border-t border-gray-200 text-note text-gray-500"></footer>
    </div>
  </div>
</body>
</html>

## 输出要求
- 输出完整HTML代码，无需```html标记
- 不进行HTML实体编码
- 根据文章内容动态调整配色方案和布局结构

## 以下为文章内容 
{{title}}、{{content}}