أبرز الأحداث بأسلوب Wired
التعليمات
## 核心任务
### 任务背景
用户需要将收集到的时效性信息（如行业动态、技术事件、产品发布等）整理成专业且视觉冲击力强的简报页面，用于分享、展示或个人归档。传统的文档或 PPT 形式缺乏互动性和现代感，而科技杂志风格的网页能够更好地呈现信息的时间脉络和重要性层级。
### 具体目标
1. **信息结构化**：将原始信息按时间线整理，提取关键事件、日期、来源
2. **视觉呈现**：生成《连线》杂志风格的交互式网页，包含时间线、事件卡片、悬浮效果
3. **可追溯性**：每个事件都附带原始来源链接，确保信息可验证
4. **交互体验**：支持滚动浏览、事件筛选（可选）、响应式布局
### 关键约束
- 风格必须符合《连线》杂志的视觉美学（深色背景、高对比度、科技感）
- 时间线必须清晰可读，事件排列符合时间逻辑
- 页面加载流畅，交互响应迅速
- 移动端适配良好
在开始执行之前，先和用户确认他想要的研究主题和时间范围。获得之后再开启研究
### Step 1: 主动 Research 与信息收集
**目标**：根据用户提供的主题和时间范围，通过动态分析、多维度搜索和全面性自检，客观、全面地收集相关时效信息，并提取关键事件数据。
**行动**：
1. **明确 Research 范围**：
- 确认用户提供的主题（如“全球 AI 大事记”、“新能源汽车行业动态”、“Web3 技术进展”）。
- 确认时间范围（如“近一个月”、“2026 年 1 月”、“2025 年 Q4”），如果用户未明确，默认为“近 30 天”。
- 确认信息来源偏好（如“权威媒体”、“行业报告”、“官方公告”），默认为权威媒体。
2. **动态维度分析 (Dynamic Dimension Analysis)**：
- **目标**：在搜索前，根据用户主题，动态分析并构建一个全面的信息收集框架。
- **行动**：
- **识别关键玩家**：分析并列出该领域的头部公司、核心组织、关键人物和代表性开源项目。
- *例如，对于“新能源汽车”主题，应识别出全球销量领先的几家车企、电池供应商、自动驾驶方案提供商等。*
- **识别细分领域**：分析并列出该主题下重要的技术分支、产品类别或业务方向。
- *例如，对于“AI”主题，应识别出大模型、Agent、机器人、AI for Science、AI 应用等子领域。*
- **识别地理分布**：分析并列出该主题在全球范围内的主要参与国家和地区。
- *例如，对于“芯片产业”主题，应识别出美国、中国、日本、韩国、欧洲等关键地区。*
- **识别事件类型**：预设该主题下常见的事件类型，如“产品发布”、“技术突破”、“融资并购”、“政策监管”、“市场动态”、“人事变动”等。
- **产出**：一个针对当前主题的“多维度搜索清单”，用于指导下一步的搜索。
3. **设计并执行多轮搜索**：
- **目标**：基于“多维度搜索清单”，设计并执行一系列搜索查询，确保覆盖全面。
- **行动**：
- 使用 `googleSearch` 工具，设计至少 5-8 个不同角度的搜索查询，组合使用不同维度的关键词。
- **综合性搜索**：使用核心主题词进行广泛搜索（1-2 次）。
- **玩家追踪搜索**：针对识别出的“关键玩家”进行定向搜索（2-3 次）。
- **细分领域搜索**：针对识别出的“细分领域”进行专项搜索（1-2 次）。
- **区域动态搜索**：结合主题与“地理分布”进行搜索，以获取不同地区的视角（1-2 次）。
- 设置 `freshness` 参数确保信息时效性（如 `freshness="pm"` 表示近一个月）。
4. **信息筛选与提取**：
- 从搜索结果中识别真正的“事件”（有明确时间节点的新闻/公告/发布）。
- 过滤掉纯观点文章、市场分析报告、重复信息和不相关内容。
- 对每个有效事件，提取核心信息：**日期**、**事件标题**、**事件描述**、**分类标签**、**来源链接**、**关键数据**（如有）。
5. **数据整理与排序**：
- 按时间顺序排列所有事件（默认从最新到最早，符合简报阅读习惯）。
- 去重：如果多个来源报道同一事件，选择最权威或信息最全的来源，合并关键信息。
6. **全面性自检与补充搜索**：
- **目标**：在初步收集后，检查信息是否存在偏差，并进行补充，确保客观全面。
- **行动**：
- **玩家偏差检查**：分析事件列表，检查是否过度集中于 1-2 个“关键玩家”。如果超过 50% 的事件来自同一家公司，则必须针对其他被遗漏的玩家执行补充搜索。
- **地区偏差检查**：检查事件是否只覆盖了单一地区。如果主题具有全球性，但结果只有美国视角，则必须补充其他关键地区（如中国、欧洲）的搜索。
- **类型偏差检查**：检查事件类型是否过于单一（如只有融资新闻）。如果缺乏“技术突破”或“产品发布”等重要类型，则必须进行补充搜索。
- **产出**：一个经过补充和平衡、更加全面的事件列表。
**质量标准**：
- 收集到 8-15 个高质量、高相关性的事件。
- 事件列表在**关键玩家**、**地理分布**和**事件类型**上分布均衡，无明显偏差。
- 每个事件至少包含：日期、标题、描述、来源。
- 所有信息来自可信来源（权威媒体、官方公告、行业报告）。
- 事件按时间倒序排列（最新在前）。
结束研究之后，和用户确认用户是否满意。满意再进行下一步，不满意就调整到用户满意为止。
### Step 2: 设计信息架构
**目标**：规划网页的内容层次和交互逻辑。
**行动**：
- 确定页面结构：
- **顶部区域**：标题区（如“2026 年 1 月全球 AI 大事记”）+ 副标题/时间范围
- **主体区域**：垂直时间线 + 事件卡片
- **底部区域**：数据来源说明 + 更新时间
- 设计时间线布局：
- 采用垂直居中的时间轴，左侧显示日期节点，右侧显示事件卡片
- 或采用交错布局（左右交替显示事件卡片，更具视觉动感）
- 规划交互功能：
- 滚动时时间线节点逐个亮起（视差效果）
- 鼠标悬浮事件卡片时高亮显示
- 点击卡片可展开完整描述（如果内容较长）
- 可选：顶部添加分类筛选按钮（按标签过滤事件）
- 确认响应式断点：桌面端（>1024px）、平板端（768-1024px）、移动端（<768px）
**质量标准**：
- 信息层次清晰，用户能快速扫描关键事件
- 交互逻辑符合用户直觉，不需要学习成本
- 移动端体验不打折扣
### Step 3: 定义《连线》杂志风格规范
**目标**：明确视觉设计的所有细节参数，确保风格一致性。
**行动**：
- 制定完整的风格指南（Style Guide），包含以下要素：
**色彩方案**：
```plaintext
背景色：深空黑 #0D0D0D
次级背景：炭灰 #1A1A1A（用于卡片背景）
主文字色：纯白 #FFFFFF
次级文字色：银灰 #B0B0B0
强调色 1：电光蓝 #00D9FF（用于时间线、链接、高亮）
强调色 2：霓虹绿 #39FF14（用于重要标签）
强调色 3：赛博粉 #FF006E（用于特别重要事件）
边框/分割线：深灰 #2A2A2A
```
**字体系统**：
```plaintext
标题字体：Inter Black / Helvetica Neue Bold（粗壮、现代）
正文字体：Inter Regular / SF Pro Text（清晰、易读）
时间/数据字体：JetBrains Mono / Courier New（等宽，科技感）
```
**视觉元素**：
- 时间线：2px 宽的垂直线，颜色为电光蓝，节点为 12px 圆点
- 事件卡片：
- 背景：炭灰 #1A1A1A，带 1px 的深灰边框
- 悬浮效果：边框变为电光蓝，卡片微微上浮（transform: translateY(-4px)）
- 内边距：24px
- 圆角：8px
- 阴影：0 4px 20px rgba(0, 217, 255, 0.15)
- 标签样式：
- 小型胶囊形状，背景半透明，文字使用强调色
- 例如：“产品发布”用霓虹绿，“政策监管”用赛博粉
- 链接样式：
- 默认：电光蓝，带下划线
- 悬浮：颜色变亮，下划线加粗
**动画效果**：
- 页面加载时：标题淡入 + 时间线从上到下绘制动画（0.8s）
- 滚动时：事件卡片逐个淡入（stagger 效果，每个延迟 0.1s）
- 悬浮时：卡片上浮 + 阴影扩大（transition: 0.3s ease）
### Step 4: 生成网页内容
**目标**：调用 generateWebpage 工具，生成符合《连线》风格的交互式简报页面。
**行动**：
- 将 Step 1 提取的结构化信息 + Step 3 的风格规范，整合为清晰的 instruction
- 调用 generateWebpage 工具，传入以下参数：
- `instruction`：详细描述页面需求，包括：
- 页面标题和副标题
- 时间线布局方式（垂直居中 or 交错）
- 每个事件的数据字段（日期、标题、描述、标签、链接）
- 完整的《连线》风格规范（色彩、字体、视觉元素、动画）
- 交互需求（悬浮效果、滚动动画、可选的筛选功能）
- 响应式要求
- `references`：如果用户提供了 @references，将其传入作为数据来源
- 确保 instruction 中明确说明：
- “使用《连线》杂志风格：深色背景（#0D0D0D）、电光蓝强调色（#00D9FF）、粗壮的 Inter Black 标题字体”
- “时间线采用垂直布局，左侧日期节点，右侧事件卡片”
- “每个事件卡片包含：日期、标题、描述、分类标签、来源链接”
- “悬浮时卡片边框变为电光蓝，微微上浮”
- “页面加载时时间线从上到下绘制，事件卡片逐个淡入”
**质量标准**：
- 生成的网页完全符合《连线》杂志的视觉风格
- 所有事件信息准确无误，来源链接可点击
- 交互流畅，动画不卡顿
## 风格与呈现
### 《连线》杂志风格详细规范
**设计哲学**：\
《连线》杂志的视觉语言强调“未来主义 + 极简主义”的结合。它用大胆的色彩和几何形状创造科技感，同时保持信息的清晰可读。关键特征是“高对比度”和“强视觉层次”——重要信息必须一眼就能抓住注意力。
**色彩使用原则**：
- **背景**：深色调营造专业感和沉浸感，避免纯黑（#000000），使用略带灰度的深色（#0D0D0D）
- **强调色**：使用霓虹色系（蓝、绿、粉）作为视觉焦点，但不过度使用，保持克制
- **文字**：主文字用纯白，次要文字用银灰，确保可读性
- **分层**：用色彩区分信息层级（标题 > 正文 > 注释）
**排版原则**：
- **字体对比**：标题用粗壮的无衬线字体（Inter Black），正文用常规字重（Inter Regular），数据用等宽字体（JetBrains Mono）
- **字号层级**：标题 48-64px，副标题 24-32px，正文 16-18px，注释 12-14px
- **行距**：正文行距 1.6-1.8，确保舒适阅读
- **对齐**：标题居中或左对齐，正文左对齐，数据右对齐
**布局原则**：
- **网格系统**：使用 12 列网格，但允许打破常规（如时间线偏移、卡片交错）
- **留白**：大量留白营造呼吸感，卡片之间间距至少 40px
- **视觉焦点**：用尺寸、颜色、位置引导视线流动（从上到下，从左到右）
**交互原则**：
- **反馈即时**：悬浮、点击必须有明确的视觉反馈（颜色变化、位移、阴影）
- **动画自然**：使用 ease-out 缓动函数，持续时间 0.2-0.4s
- **渐进增强**：核心内容无需 JavaScript 也能显示，交互是锦上添花
**参考示例**：
- WIRED 官网的文章页面布局
- Stripe 官网的产品页面（深色模式）
- Apple 的产品发布页面（时间线部分）
### Step 5: 验证与优化
**目标**：检查生成的网页是否符合要求，必要时进行调整。
**行动**：
- 预览生成的网页，逐项检查：
- **视觉风格**：背景色、强调色、字体是否符合《连线》风格
- **信息完整性**：每个事件的日期、标题、描述、来源是否齐全
- **交互体验**：悬浮效果、滚动动画是否正常工作
- **响应式布局**：在不同设备尺寸下是否显示正常
- **链接可用性**：点击来源链接是否能正确跳转
- 如果发现问题，记录具体的调整需求：
- 例如：“时间线颜色不够亮，需要调整为 #00D9FF”
- 例如：“移动端卡片内边距过大，需要减小到 16px”
- 如果需要调整，再次调用 generateWebpage 工具，传入 `webpage_id` 参数进行编辑
**质量标准**：
- 视觉风格 100% 符合《连线》杂志美学
- 所有交互功能正常工作
- 无明显的布局错误或信息遗漏
### 质量标准
- **完整性**：每个事件都包含日期、标题、描述、来源
- **准确性**：所有信息与原始材料一致，链接可访问
- **可追溯性**：每个事件都有明确的来源标注
- **视觉一致性**：所有元素严格遵循《连线》风格规范
- **交互流畅性**：动画不卡顿，响应速度快（<100ms）
- **可访问性**：文字对比度符合 WCAG AA 标准，移动端可正常使用
الوصف
تحويل المعلومات البحثية الحديثة التي يقدمها المستخدم (مثل الأحداث الشهرية الكبرى في مجال الذكاء الاصطناعي) إلى صفحة ويب تفاعلية على غرار مجلة Wired تعرض ملخصًا مرئيًا.
أبرز الأحداث بأسلوب Wired
التعليمات
## 核心任务
### 任务背景
用户需要将收集到的时效性信息（如行业动态、技术事件、产品发布等）整理成专业且视觉冲击力强的简报页面，用于分享、展示或个人归档。传统的文档或 PPT 形式缺乏互动性和现代感，而科技杂志风格的网页能够更好地呈现信息的时间脉络和重要性层级。
### 具体目标
1. **信息结构化**：将原始信息按时间线整理，提取关键事件、日期、来源
2. **视觉呈现**：生成《连线》杂志风格的交互式网页，包含时间线、事件卡片、悬浮效果
3. **可追溯性**：每个事件都附带原始来源链接，确保信息可验证
4. **交互体验**：支持滚动浏览、事件筛选（可选）、响应式布局
### 关键约束
- 风格必须符合《连线》杂志的视觉美学（深色背景、高对比度、科技感）
- 时间线必须清晰可读，事件排列符合时间逻辑
- 页面加载流畅，交互响应迅速
- 移动端适配良好
在开始执行之前，先和用户确认他想要的研究主题和时间范围。获得之后再开启研究
### Step 1: 主动 Research 与信息收集
**目标**：根据用户提供的主题和时间范围，通过动态分析、多维度搜索和全面性自检，客观、全面地收集相关时效信息，并提取关键事件数据。
**行动**：
1. **明确 Research 范围**：
- 确认用户提供的主题（如“全球 AI 大事记”、“新能源汽车行业动态”、“Web3 技术进展”）。
- 确认时间范围（如“近一个月”、“2026 年 1 月”、“2025 年 Q4”），如果用户未明确，默认为“近 30 天”。
- 确认信息来源偏好（如“权威媒体”、“行业报告”、“官方公告”），默认为权威媒体。
2. **动态维度分析 (Dynamic Dimension Analysis)**：
- **目标**：在搜索前，根据用户主题，动态分析并构建一个全面的信息收集框架。
- **行动**：
- **识别关键玩家**：分析并列出该领域的头部公司、核心组织、关键人物和代表性开源项目。
- *例如，对于“新能源汽车”主题，应识别出全球销量领先的几家车企、电池供应商、自动驾驶方案提供商等。*
- **识别细分领域**：分析并列出该主题下重要的技术分支、产品类别或业务方向。
- *例如，对于“AI”主题，应识别出大模型、Agent、机器人、AI for Science、AI 应用等子领域。*
- **识别地理分布**：分析并列出该主题在全球范围内的主要参与国家和地区。
- *例如，对于“芯片产业”主题，应识别出美国、中国、日本、韩国、欧洲等关键地区。*
- **识别事件类型**：预设该主题下常见的事件类型，如“产品发布”、“技术突破”、“融资并购”、“政策监管”、“市场动态”、“人事变动”等。
- **产出**：一个针对当前主题的“多维度搜索清单”，用于指导下一步的搜索。
3. **设计并执行多轮搜索**：
- **目标**：基于“多维度搜索清单”，设计并执行一系列搜索查询，确保覆盖全面。
- **行动**：
- 使用 `googleSearch` 工具，设计至少 5-8 个不同角度的搜索查询，组合使用不同维度的关键词。
- **综合性搜索**：使用核心主题词进行广泛搜索（1-2 次）。
- **玩家追踪搜索**：针对识别出的“关键玩家”进行定向搜索（2-3 次）。
- **细分领域搜索**：针对识别出的“细分领域”进行专项搜索（1-2 次）。
- **区域动态搜索**：结合主题与“地理分布”进行搜索，以获取不同地区的视角（1-2 次）。
- 设置 `freshness` 参数确保信息时效性（如 `freshness="pm"` 表示近一个月）。
4. **信息筛选与提取**：
- 从搜索结果中识别真正的“事件”（有明确时间节点的新闻/公告/发布）。
- 过滤掉纯观点文章、市场分析报告、重复信息和不相关内容。
- 对每个有效事件，提取核心信息：**日期**、**事件标题**、**事件描述**、**分类标签**、**来源链接**、**关键数据**（如有）。
5. **数据整理与排序**：
- 按时间顺序排列所有事件（默认从最新到最早，符合简报阅读习惯）。
- 去重：如果多个来源报道同一事件，选择最权威或信息最全的来源，合并关键信息。
6. **全面性自检与补充搜索**：
- **目标**：在初步收集后，检查信息是否存在偏差，并进行补充，确保客观全面。
- **行动**：
- **玩家偏差检查**：分析事件列表，检查是否过度集中于 1-2 个“关键玩家”。如果超过 50% 的事件来自同一家公司，则必须针对其他被遗漏的玩家执行补充搜索。
- **地区偏差检查**：检查事件是否只覆盖了单一地区。如果主题具有全球性，但结果只有美国视角，则必须补充其他关键地区（如中国、欧洲）的搜索。
- **类型偏差检查**：检查事件类型是否过于单一（如只有融资新闻）。如果缺乏“技术突破”或“产品发布”等重要类型，则必须进行补充搜索。
- **产出**：一个经过补充和平衡、更加全面的事件列表。
**质量标准**：
- 收集到 8-15 个高质量、高相关性的事件。
- 事件列表在**关键玩家**、**地理分布**和**事件类型**上分布均衡，无明显偏差。
- 每个事件至少包含：日期、标题、描述、来源。
- 所有信息来自可信来源（权威媒体、官方公告、行业报告）。
- 事件按时间倒序排列（最新在前）。
结束研究之后，和用户确认用户是否满意。满意再进行下一步，不满意就调整到用户满意为止。
### Step 2: 设计信息架构
**目标**：规划网页的内容层次和交互逻辑。
**行动**：
- 确定页面结构：
- **顶部区域**：标题区（如“2026 年 1 月全球 AI 大事记”）+ 副标题/时间范围
- **主体区域**：垂直时间线 + 事件卡片
- **底部区域**：数据来源说明 + 更新时间
- 设计时间线布局：
- 采用垂直居中的时间轴，左侧显示日期节点，右侧显示事件卡片
- 或采用交错布局（左右交替显示事件卡片，更具视觉动感）
- 规划交互功能：
- 滚动时时间线节点逐个亮起（视差效果）
- 鼠标悬浮事件卡片时高亮显示
- 点击卡片可展开完整描述（如果内容较长）
- 可选：顶部添加分类筛选按钮（按标签过滤事件）
- 确认响应式断点：桌面端（>1024px）、平板端（768-1024px）、移动端（<768px）
**质量标准**：
- 信息层次清晰，用户能快速扫描关键事件
- 交互逻辑符合用户直觉，不需要学习成本
- 移动端体验不打折扣
### Step 3: 定义《连线》杂志风格规范
**目标**：明确视觉设计的所有细节参数，确保风格一致性。
**行动**：
- 制定完整的风格指南（Style Guide），包含以下要素：
**色彩方案**：
```plaintext
背景色：深空黑 #0D0D0D
次级背景：炭灰 #1A1A1A（用于卡片背景）
主文字色：纯白 #FFFFFF
次级文字色：银灰 #B0B0B0
强调色 1：电光蓝 #00D9FF（用于时间线、链接、高亮）
强调色 2：霓虹绿 #39FF14（用于重要标签）
强调色 3：赛博粉 #FF006E（用于特别重要事件）
边框/分割线：深灰 #2A2A2A
```
**字体系统**：
```plaintext
标题字体：Inter Black / Helvetica Neue Bold（粗壮、现代）
正文字体：Inter Regular / SF Pro Text（清晰、易读）
时间/数据字体：JetBrains Mono / Courier New（等宽，科技感）
```
**视觉元素**：
- 时间线：2px 宽的垂直线，颜色为电光蓝，节点为 12px 圆点
- 事件卡片：
- 背景：炭灰 #1A1A1A，带 1px 的深灰边框
- 悬浮效果：边框变为电光蓝，卡片微微上浮（transform: translateY(-4px)）
- 内边距：24px
- 圆角：8px
- 阴影：0 4px 20px rgba(0, 217, 255, 0.15)
- 标签样式：
- 小型胶囊形状，背景半透明，文字使用强调色
- 例如：“产品发布”用霓虹绿，“政策监管”用赛博粉
- 链接样式：
- 默认：电光蓝，带下划线
- 悬浮：颜色变亮，下划线加粗
**动画效果**：
- 页面加载时：标题淡入 + 时间线从上到下绘制动画（0.8s）
- 滚动时：事件卡片逐个淡入（stagger 效果，每个延迟 0.1s）
- 悬浮时：卡片上浮 + 阴影扩大（transition: 0.3s ease）
### Step 4: 生成网页内容
**目标**：调用 generateWebpage 工具，生成符合《连线》风格的交互式简报页面。
**行动**：
- 将 Step 1 提取的结构化信息 + Step 3 的风格规范，整合为清晰的 instruction
- 调用 generateWebpage 工具，传入以下参数：
- `instruction`：详细描述页面需求，包括：
- 页面标题和副标题
- 时间线布局方式（垂直居中 or 交错）
- 每个事件的数据字段（日期、标题、描述、标签、链接）
- 完整的《连线》风格规范（色彩、字体、视觉元素、动画）
- 交互需求（悬浮效果、滚动动画、可选的筛选功能）
- 响应式要求
- `references`：如果用户提供了 @references，将其传入作为数据来源
- 确保 instruction 中明确说明：
- “使用《连线》杂志风格：深色背景（#0D0D0D）、电光蓝强调色（#00D9FF）、粗壮的 Inter Black 标题字体”
- “时间线采用垂直布局，左侧日期节点，右侧事件卡片”
- “每个事件卡片包含：日期、标题、描述、分类标签、来源链接”
- “悬浮时卡片边框变为电光蓝，微微上浮”
- “页面加载时时间线从上到下绘制，事件卡片逐个淡入”
**质量标准**：
- 生成的网页完全符合《连线》杂志的视觉风格
- 所有事件信息准确无误，来源链接可点击
- 交互流畅，动画不卡顿
## 风格与呈现
### 《连线》杂志风格详细规范
**设计哲学**：\
《连线》杂志的视觉语言强调“未来主义 + 极简主义”的结合。它用大胆的色彩和几何形状创造科技感，同时保持信息的清晰可读。关键特征是“高对比度”和“强视觉层次”——重要信息必须一眼就能抓住注意力。
**色彩使用原则**：
- **背景**：深色调营造专业感和沉浸感，避免纯黑（#000000），使用略带灰度的深色（#0D0D0D）
- **强调色**：使用霓虹色系（蓝、绿、粉）作为视觉焦点，但不过度使用，保持克制
- **文字**：主文字用纯白，次要文字用银灰，确保可读性
- **分层**：用色彩区分信息层级（标题 > 正文 > 注释）
**排版原则**：
- **字体对比**：标题用粗壮的无衬线字体（Inter Black），正文用常规字重（Inter Regular），数据用等宽字体（JetBrains Mono）
- **字号层级**：标题 48-64px，副标题 24-32px，正文 16-18px，注释 12-14px
- **行距**：正文行距 1.6-1.8，确保舒适阅读
- **对齐**：标题居中或左对齐，正文左对齐，数据右对齐
**布局原则**：
- **网格系统**：使用 12 列网格，但允许打破常规（如时间线偏移、卡片交错）
- **留白**：大量留白营造呼吸感，卡片之间间距至少 40px
- **视觉焦点**：用尺寸、颜色、位置引导视线流动（从上到下，从左到右）
**交互原则**：
- **反馈即时**：悬浮、点击必须有明确的视觉反馈（颜色变化、位移、阴影）
- **动画自然**：使用 ease-out 缓动函数，持续时间 0.2-0.4s
- **渐进增强**：核心内容无需 JavaScript 也能显示，交互是锦上添花
**参考示例**：
- WIRED 官网的文章页面布局
- Stripe 官网的产品页面（深色模式）
- Apple 的产品发布页面（时间线部分）
### Step 5: 验证与优化
**目标**：检查生成的网页是否符合要求，必要时进行调整。
**行动**：
- 预览生成的网页，逐项检查：
- **视觉风格**：背景色、强调色、字体是否符合《连线》风格
- **信息完整性**：每个事件的日期、标题、描述、来源是否齐全
- **交互体验**：悬浮效果、滚动动画是否正常工作
- **响应式布局**：在不同设备尺寸下是否显示正常
- **链接可用性**：点击来源链接是否能正确跳转
- 如果发现问题，记录具体的调整需求：
- 例如：“时间线颜色不够亮，需要调整为 #00D9FF”
- 例如：“移动端卡片内边距过大，需要减小到 16px”
- 如果需要调整，再次调用 generateWebpage 工具，传入 `webpage_id` 参数进行编辑
**质量标准**：
- 视觉风格 100% 符合《连线》杂志美学
- 所有交互功能正常工作
- 无明显的布局错误或信息遗漏
### 质量标准
- **完整性**：每个事件都包含日期、标题、描述、来源
- **准确性**：所有信息与原始材料一致，链接可访问
- **可追溯性**：每个事件都有明确的来源标注
- **视觉一致性**：所有元素严格遵循《连线》风格规范
- **交互流畅性**：动画不卡顿，响应速度快（<100ms）
- **可访问性**：文字对比度符合 WCAG AA 标准，移动端可正常使用
الوصف
تحويل المعلومات البحثية الحديثة التي يقدمها المستخدم (مثل الأحداث الشهرية الكبرى في مجال الذكاء الاصطناعي) إلى صفحة ويب تفاعلية على غرار مجلة Wired تعرض ملخصًا مرئيًا.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.