卡片提示词

卡片1

项目目标：生成一个单页、数据驱动、且能根据内容自适应主题的信息图

一、核心目标与技术实现

最终成品: 创建一个单页、静态的HTML文件，作为一张信息完整、设计精良的“数字海报”。
视觉风格: 精确复刻用户提供的参考图片视觉风格。
技术核心 (内容推断与数据驱动):

数据源: 在HTML文件中，创建一个独立的JavaScript对象（infographicData）作为唯一的数据源。此对象只包含纯粹的内容数据。
主题推断 (关键规则): 渲染逻辑必须能够分析infographicData对象的内容。例如，如果数据显示的是一系列工具，则页面标题应体现“工具”或“合集”；如果数据显示的是步骤，则标题应体现“流程”或“步骤”。禁止在渲染逻辑中硬编码任何主题性词汇（如“工具箱”）。
动态渲染: HTML结构本身只作为模板骨架。页面加载时，必须使用JavaScript遍历infographicData对象，并将数据动态填充到对应的DOM元素中。
硬编码禁令: 只有贡献者署名信息可以作为固定字符串。除此之外，所有页面内容都必须从JS数据对象中读取。

二、页面布局与动态生成规则

严格按照以下通用模块化布局：

页眉区 (Header):

内容: 包含信息图的主标题、副标题、以及作者信息。
数据: 从data.header对象中读取。

主集合区 (Main Collection Section):

布局: 采用不对称两栏布局。
左栏:
背景: 以一个巨大的、描边的、无填充色的空心数字作为背景底板。
动态计算: 这个数字的值必须通过JavaScript动态计算得出，其值为data.mainCollection.items数组的长度，代表集合内项目的总数。
内容: 包含对这个集合的总体描述。
右栏:
布局: 动态生成一个CSS Grid布局。
动态生成: Grid的行数和总项目数必须根据data.mainCollection.items数组的长度自动生成。
内容: 每个Grid项都是一个“项目卡片”，其内容从data.mainCollection.items数组的每个对象中读取。

支撑论点区 (Supporting Points Section):

布局: 全宽布局，其内部动态生成一个CSS Grid布局。
内容: 陈述支撑主集合的观点或理由。
数据: 从data.supportingPoints.points数组中读取每个论点的图标、标题和描述。

三、视觉元素与细节 (动态生成规则)

卡片设计: 每个项目卡片的背景渐变色、右下角的背景水印Emoji，均由data.mainCollection.items数组中每个对象的属性动态指定。
图标设计: “支撑论点区”的每个论点所配的图标及其视觉样式，均由data.supportingPoints.points数组中对应对象的属性动态指定。

卡片2

一、核心目标与技术原则

最终成品: 创建一个单页、静态的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 字体，整体采用深色主题，并确保各级标题有清晰的视觉层级。

卡片3

核心目标与技术实现:

目标: 创建一个单页、垂直流动的HTML页面，其视觉效果如同一张设计精良、一镜到底的公众号长图。页面宽度固定，高度由内容自然决定。成品必须信息完整、设计优雅、适合直接整体截图传播。
技术实现: 必须采用完全数据驱动的模式。在HTML文件中，使用一个独立的JavaScript对象来存储所有页面内容（包括文本、图标类名、颜色、数量等）。HTML结构作为模板骨架，通过JavaScript在页面加载时动态地将数据填充到对应的DOM元素中。除了“老金”及其联系方式外，任何具体文本内容、图标、颜色或结构数量都不能直接写在HTML或CSS中。

设计美学与布局原则 (关键):

宏观布局: 页面由多个无缝衔接的垂直版块组成，每个版块都必须有清晰的视觉主题。
视觉一致性:
对齐与网格: 所有元素都必须遵循严格的对齐原则。在网格布局中，所有单元格在视觉上必须拥有完全相同的尺寸，通过CSS Grid或Flexbox强制实现，避免因文字长短不同导致的高度不一。
字体层级: 严格遵循清晰的视觉层级。主标题、章节标题、正文描述的字号、字重、颜色需有明显区分，形成韵律感。
构图饱满与呼吸感:
避免大面积空档: 优化每一页的垂直间距，让内容和布局感觉更加平衡和完整。
慷慨留白: 在元素周围保留足够的“呼吸空间”，营造干净、高级、不拥挤的视觉感受。
视觉焦点: 每个版块都应有自己的视觉焦点，无论是通过大标题、图标还是特殊的排版。

动态内容与结构规则:

页眉 (Header):
内容: 动态加载header数据对象中的creatorLine1, creatorLine2, mainTitle, subtitle, issue, date。
核心工具区 (Core Tools Section):
布局: 采用不对称两栏布局。
左栏:
动态视觉底板: 必须以一个巨大的、作为背景底板的描边空心文字或数字为主体。其内容可以是主体内容的英文缩写（如 "AI"），也可以是动态获取的数量（如 coreTools.tools 数组的长度）。
内容: 动态加载coreTools数据对象中的mainTitle, subtitle, description。
右栏:
动态网格: 动态生成一个CSS Grid布局。遍历coreTools.tools数组，为每一项创建一个卡片。
卡片内容: 动态加载每个工具对象的num, title, text, emoji。
步骤指引区 (Setup Guide Section):
内容: 动态加载setupGuide数据对象中的mainTitle, subtitle。
动态列表: 动态生成一个CSS Flexbox或Grid布局，使其能够平均分布 setupGuide.steps 数组中的所有项目，无论数组中有多少个步骤。
步骤内容: 动态加载每个步骤对象的iconClass, colorClass, title, text。
优势陈述区 (Why Powerful Section):
布局: 必须是全宽深色背景。
内容: 动态加载whyPowerful数据对象中的mainTitle, subtitle。
动态网格: 动态生成一个CSS Grid布局，遍历whyPowerful.features数组，为每一项创建一个“优势”模块。
优势内容: 动态加载每个优势对象的iconClass, title, text。