卡片提示词2

项目目标：生成一个单页、数据驱动、高保真、布局精密的AI产品信息图

一、核心目标与技术原则

最终成品: 创建一个单页、静态的HTML文件。成品应为一张信息完整、设计精良、无需滚动、适合直接截图传播的“数字海报”。
技术核心 (数据驱动):

唯一数据源: 在HTML文件中，必须创建一个名为 infographicData 的独立JavaScript对象作为页面所有内容的唯一来源。
动态渲染: HTML结构本身仅作为模板骨架。页面加载时，必须使用JavaScript遍历 infographicData 对象，并将数据动态填充到对应的DOM元素中。
严格禁止硬编码: 除了贡献者署名信息（例如“老金”及其联系方式）外，任何页面上可见的文本内容、图标、颜色、项目数量、URL等，都必须从 infographicData 对象中读取。

二、数据结构详细规范

infographicData 对象必须遵循以下精确的层级结构：

{
  // 1. 页眉数据
  header: {
    title: "主标题",
    subtitle: "英文副标题",
    author: { name: "作者名", wechat: "联系方式" },
    qrCodeUrl: "二维码图片URL"
  },

  // 2. 主内容区数据
  mainContent: {
    title: "左栏标题",
    subtitle: "左栏英文副标题",
    description: "左栏的详细说明文字（支持HTML标签）",
    // 包含多个板块的数组
    sections: [
      {
        sectionTitle: "板块标题 (例如 A. 文本生成)",
        icon: "板块对应的Emoji图标",
        // 每个板块下的分类数组
        categories: [
          {
            id: "分类ID (例如 A1)",
            name: "分类名称 (例如 知识问答)",
            emoji: "卡片右下角的背景Emoji",
            // 产品列表，每个产品都是一个对象
            products: [
              {
                name: "产品名称及标注 (例如 ChatGPT-o3 (付费))",
                recommended: true // 可选，为true时高亮显示
              },
              // ...更多产品
            ]
          },
          // ...更多分类
        ]
      },
      // ...更多板块
    ]
  },

  // 3. 推荐理由区数据
  rationale: {
    title: "推荐理由区的中文标题",
    subtitle: "推荐理由区的英文副标题",
    // 推荐理由列表
    points: [
      {
        icon: "SVG路径字符串",
        title: "推荐理由的标题",
        description: "推荐理由的描述文字",
        gradientClass: "Tailwind CSS的渐变色类名"
      },
      // ...更多推荐理由
    ]
  }
}

三、布局与动态渲染规则

宏观布局: 页面由三个主要部分垂直排列构成：页眉区、主内容区、推荐理由区。
页眉区: 在页面顶部，左侧显示标题和作者信息，右侧显示二维码。
主内容区 (非对称布局):

左栏:
背景: 必须有一个巨大的、描边的、无填充色的空心数字作为背景。这个数字的值必须通过JavaScript动态计算得出，其值为所有 categories 的总数 (data.mainContent.sections.flatMap(s => s.categories).length)。
内容: 显示 mainContent 中的 title, subtitle 和 description。
右栏:
结构: 此区域不是一个单一的网格。它必须由 mainContent.sections 数组动态生成多个垂直堆叠的板块。
板块渲染: 每个板块都必须有自己的标题（由 sectionTitle 和 icon 构成），其下方是一个两列的CSS Grid布局，用于展示该板块包含的所有 categories 卡片。

推荐理由区:

视觉分割: 此区域必须拥有一个独立的、贯穿页面左右的全宽背景，并带有顶部边框，以在视觉上与主内容区明确分开。
内容: 内部包含标题和副标题，下方是一个两列的CSS Grid布局，用于展示 rationale.points 数组中的所有推荐理由。

四、视觉元素与UI细节

整体背景: 页面 <body> 必须有一个动态的、由CSS动画驱动的抽象波纹或辉光效果作为背景，以增加视觉深度和科技感。
主容器: 整体内容必须包裹在一个带有圆角、边框、半透明模糊背景 (backdrop-filter) 的容器中。
卡片设计:

每个产品分类卡片必须有圆角、边框和半透明背景。
卡片右下角必须有一个由 emoji 字段驱动的、巨大的、低透明度的Emoji作为背景水印。

高亮与排序:

在渲染产品列表时，products 数组中 recommended: true 的产品，其名称必须使用醒目的红色字体显示。
在每个卡片内部，产品列表必须经过排序，将所有标红的推荐产品置于列表顶部。

图标设计:

“推荐理由区”的每个理由卡片，其左侧的图标必须由 icon 字段的SVG路径驱动，并放置在一个由 gradientClass 驱动的渐变色背景容器中。

字体与排版: 必须使用 Noto Sans SC 字体，整体采用深色主题，并确保各级标题有清晰的视觉层级。