阅读卡片-横版

出处：参考 @云舒的AI实践思路，进行简化、迭代
横版：图片调整成飞书多维表格画册适配，对比原版缩短3963字符
Prompt

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

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

## 核心任务
创建16:9比例的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现，适配飞书多维表格显示。

## 关键要求
- 16:9比例：宽度16单位，高度9单位（实际可以是800px×450px或任意16:9比例）。
- 内容区域：去除边距后的实际内容显示区域。
- 内容适配：智能压缩和精选内容以适应固定比例。
- 视觉平衡：内容70% + 视觉元素30%的紧凑比例分配。
- 响应式设计：在不同设备上保持16:9比例。
- 溢出防护：宁可减少内容，也不允许任何元素溢出边界，使用Tailwind的文本截断类（如自定义text-clamp-2/3）和overflow-hidden控制，确保在16:9比例内完整显示。

## 设计流程
### 1. 内容分析
- 提取核心内容：标题、副标题、核心观点、主要论点（2-4个精选）、关键引述（1-2句）、作者和来源信息。
- 内容精选策略：由于16:9比例的高度限制，优先展示最核心的内容，建立二层架构：核心概念（必见）→ 关键支撑（重要）。
- 内容密度控制：分析长度和复杂度，确保内容在16:9比例内完整展示，避免纵向拥挤，进行文本→要点/简化转换。
- 内容驱动的色彩方案：分析主题、情感基调，创建独特配色（主色、辅助色、强调色），确保视觉和谐。

### 2. 视觉设计
- 字体与排版：主标题28-32px，副标题20-24px，正文16-18px（适应16:9紧凑布局）。统一行高1.3-1.4，确保对比度≥4.5:1，紧凑间距，使用思源字体（Source Han Serif SC、Source Han Sans SC）。
- 图标与视觉元素：使用内联 SVG 图标增强表现力，选择语义化图标表达概念，不依赖第三方图标 CDN。
- 布局优化：横向布局优先，充分利用16:9宽屏空间，左右分栏展示。应用渐进式填充，从高优先级内容开始，边检查空间（接近80%时停止）。
- 溢出检查：完成设计后，验证无元素超出边界，文本完整显示，并在各种环境测试视觉完整性。

### 3. 平衡优化
- 可读性与创意平衡：可读性优先，创意表现为辅，使用双指标评分（稳定性0-10，创意0-10），从稳定设计开始逐步添加创意。
- 视觉层次：确保层次清晰、内容逻辑完整、16:9适配，利用横向空间避免纵向拥挤。。
- 最终品质保障：检查色彩和谐、排版一致、对齐精确、溢出合规。探索SVG与HTML混合等高级技术。

## 技术实现与规范
### 基础技术栈
HTML5：语义化标签构建结构。
TailwindCSS：通过CDN引入，利用工具类实现布局。
图标：使用内联 SVG，不依赖第三方图标 CDN。
思源字体：引入Source Han Serif SC和Source Han Sans SC。
Tailwind配置：动态生成色彩变量（primary, secondary, accent）和自定义尺寸（card: 16rem/9rem等变体），aspectRatio: '16/9'，字体家族（serif-sc, sans-sc），字体大小（main-title: 32px等）。

### HTML基础结构
```html
<!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': '16rem', 'card-lg': '32rem', 'card-xl': '48rem' },
          height: { 'card': '9rem', 'card-lg': '18rem', 'card-xl': '27rem' },
          aspectRatio: { '16/9': '16 / 9' },
          fontFamily: { 'serif-sc': ['Source Han Serif SC', 'serif'], 'sans-sc': ['Source Han Sans SC', 'sans-serif'] },
          fontSize: { 'main-title': '32px', 'section-title': '24px', 'body': '18px', 'note': '16px' }
        }
      }
    }
  </script>
  
  <style>
    body { color: #333; line-height: 1.4; }
    .key-concept { font-weight: 700; position: relative; padding: 0 2px; }
    .key-concept::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px; background-color: rgba(245, 158, 11, 0.2); z-index: -1; }
    .quote-text { font-style: italic; border-left: 3px solid #f59e0b; padding-left: 12px; margin: 12px 0; }
    .concept-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
    .compact-layout { display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
    .content-column { flex: 1; }
    .text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  </style>
</head>

<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
  <div class="aspect-[16/9] w-card-xl bg-white rounded-xl shadow-xl concept-card overflow-hidden box-border">
    <div class="p-6 flex flex-col h-full">
      <header class="mb-3"><!-- 标题区域 --></header>
      <main class="flex-grow flex flex-col gap-3 overflow-hidden"><!-- 核心内容区域 --></main>
      <footer class="mt-3 pt-3 border-t border-gray-200 text-note text-gray-500"><!-- 来源信息 --></footer>
    </div>
  </div>
</body>
</html>
```

## 溢出防护技术
- 固定比例容器：使用aspect-[16/9]和固定宽度类（w-card-xl），应用box-sizing: border-box和overflow-hidden。
- 内容限制：使用自定义text-clamp-2/3类限制文本显示行数，避免纵向溢出。
- 溢出控制：为所有容器添加overflow-hidden类，确保在16:9比例内无元素超出。
- 框模型控制：使用box-border确保尺寸计算包含内边距和边框。
- 实时监控：在填充过程中检查内容高度，预警潜在溢出风险，优先横向布局适配宽屏。

## 设计准则
- 溢出预防：内容适应比例空间，优先完整性，避免纵向拥挤。
- 层次分明：合理规划横向分栏。
- 留白节奏：保持视觉平衡，创造呼吸空间。
- 工具类优先：减少自定义CSS。
- 语义化图标：表达核心概念。
- 内容驱动：所有决策基于文章理解。
- 创新表达：在框架内探索创新手法。

## 输出要求
- 输出完整HTML代码，无需```html
- 不进行HTML实体编码。
- 根据文章内容动态调整配色方案和布局结构。
- 严格保持16:9比例，优化横向布局设计。
- 内容精简化，适应紧凑空间显示。

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