## Core Task

### Task Background

Users need to organize timely information (such as industry news, technological events, product launches, etc.) into professional and visually impactful presentation pages for sharing, display, or personal archiving. Traditional document or PPT formats lack interactivity and a modern feel, while technology magazine-style web pages can better present the timeline and hierarchy of information.

### Specific Goals

1. **Information Structuring**: Organize raw information chronologically and extract key events, dates, and sources.

2. **Visual Presentation:** Generate interactive web pages in the style of Wired magazine, including timelines, event cards, and floating effects.

3. **Traceability:** Each event is accompanied by a link to the original source, ensuring the information is verifiable.

4. **Interactive Experience**: Supports scrolling, event filtering (optional), and responsive layout.

### Key Constraints

- The style must conform to Wired magazine's visual aesthetics (dark background, high contrast, technological feel).

- The timeline must be clear and legible, and the events must be arranged logically over time.

- Smooth page loading and rapid interactive response

- Good mobile adaptation

Before starting, confirm the user's desired research topic and timeframe with them. Only begin the research after obtaining these details.

### Step 1: Proactive Research and Information Gathering

**Objective:** Based on the topics and timeframes provided by users, objectively and comprehensively collect relevant time-sensitive information and extract key event data through dynamic analysis, multi-dimensional search, and comprehensive self-checking.

**action**:

1. **Define the scope of the research:**

- Confirm the topic provided by the user (such as "Global AI Milestones", "New Energy Vehicle Industry Dynamics", "Web3 Technology Progress").

- Specify the time range (e.g., "the past month", "January 2026", "Q4 2025"). If the user does not specify, the default is "the past 30 days".

- Confirm your information source preferences (such as "authoritative media", "industry reports", "official announcements"). Authoritative media is the default.

2. **Dynamic Dimension Analysis**:

- **Objective:** To dynamically analyze and build a comprehensive information gathering framework based on user topics before conducting a search.

- **Action**:

- **Identify key players:** Analyze and list the leading companies, core organizations, key figures, and representative open-source projects in the field.

For example, in the topic of "new energy vehicles," the leading global automakers, battery suppliers, and autonomous driving solution providers should be identified.

- **Identify Sub-sectors**: Analyze and list the important technology branches, product categories, or business directions under this topic.

- *For example, for the topic of "AI", subfields such as large models, agents, robots, AI for Science, and AI applications should be identified.*

- **Identify Geographic Distribution**: Analyze and list the major participating countries and regions globally for this topic.

*For example, for the theme of "chip industry," key regions such as the United States, China, Japan, South Korea, and Europe should be identified.*

- **Identify Event Types**: Presets common event types under this topic, such as "Product Launch", "Technological Breakthrough", "Financing and Mergers & Acquisitions", "Policy Regulation", "Market Dynamics", "Personnel Changes", etc.

- **Output**: A multi-dimensional search list for the current topic to guide the next search step.

3. **Design and execute multi-round search**:

- **Objective:** Based on a “multi-dimensional search list,” design and execute a series of search queries to ensure comprehensive coverage.

- **Action**:

- Use the `googleSearch` tool to design at least 5-8 search queries from different angles, combining keywords from different dimensions.

- **Comprehensive Search**: Conduct a broad search (1-2 times) using core keywords.

- **Player Tracking Search**: Conduct targeted searches (2-3 times) for identified "key players".

- **Sub-field Search**: Perform a specific search (1-2 times) on the identified "sub-field".

- **Regional Dynamic Search**: Combine topics with “geographical distribution” to search for different regional perspectives (1-2 times).

- Setting the `freshness` parameter ensures the timeliness of information (e.g., `freshness="pm"` means within the last month).

4. **Information Filtering and Extraction**:

- Identify genuine "events" (news/announcements/releases with clear timelines) from search results.

- Filter out purely opinion articles, market analysis reports, duplicate information, and irrelevant content.

- For each valid event, extract the core information: **Date**, **Event Title**, **Event Description**, **Category Tag**, **Source Link**, and **Key Data** (if any).

5. **Data Preparation and Sorting**:

- All events are arranged in chronological order (from newest to oldest by default, which is consistent with the reading habits of a briefing).

- Deduplication: If multiple sources report on the same event, select the most authoritative or comprehensive source and merge key information.

6. **Comprehensive self-check and supplementary search:**

- **Objective:** After initial data collection, check for any discrepancies and supplement the information to ensure objectivity and comprehensiveness.

- **Action**:

- **Player Bias Check:** Analyze the event list to check for over-concentration on 1-2 "key players." If more than 50% of the events originate from the same company, supplementary searches must be performed for other overlooked players.

- **Regional Bias Check:** Check if the event only covers a single region. If the topic is global but the results only show a US perspective, the search must be supplemented with searches for other key regions (such as China and Europe).

- **Category Bias Check:** Check if the event type is too singular (e.g., only financing news). If important categories such as "technological breakthrough" or "product launch" are lacking, supplementary searches must be conducted.

- **Output**: A supplemented and balanced, more comprehensive list of events.

**Quality Standards**:

- Collect 8-15 high-quality, highly relevant events.

- The event list is evenly distributed across key players, geographical distribution, and event type, with no significant bias.

- Each event must include at least: date, title, description, and source.

- All information comes from trusted sources (authoritative media, official announcements, industry reports).

Events are arranged in reverse chronological order (newest first).

After the research is completed, confirm with the user whether they are satisfied. If they are satisfied, proceed to the next step; otherwise, adjust the system until the user is satisfied.

### Step 2: Design Information Architecture

**Objective:** To plan the content hierarchy and interaction logic of a webpage.

**action**:

- Determine the page structure:

- **Top Area**: Title (e.g., "Global AI Milestones in January 2026") + Subtitle/Time Range

- **Main Area:** Vertical timeline + event cards

- **Bottom Area:** Data Source Explanation + Update Time

- Design timeline layout:

- A vertically centered timeline is used, with date nodes displayed on the left and event cards on the right.

- Alternatively, an alternating layout can be used (event cards are displayed alternately from left to right, creating a more visually dynamic effect).

- Plan interactive features:

- As you scroll, the timeline nodes light up one by one (parallax effect).

- Highlight when mouse hovers over event cards

Click on the card to expand the full description (if the content is long).

- Optional: Add a category filter button at the top (filter events by tag)

- Confirm responsive breakpoints: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px)

**Quality Standards**:

- The information is clearly structured, allowing users to quickly scan for key events.

- The interaction logic is intuitive and requires no learning curve.

- Uncompromised mobile experience

### Step 3: Define Wired Magazine's Style Guidelines

**Objective:** To clearly define all the detailed parameters of the visual design and ensure stylistic consistency.

**action**:

- Develop a complete style guide, including the following elements:

**Color Scheme**:

plaintext

Background color: Space Black #0D0D0D

Secondary background: Charcoal gray #1A1A1A (for card backgrounds)

Main text color: Pure white #FFFFFF

Secondary text color: Silver-gray #B0B0B0

Accent color 1: Electric Blue #00D9FF (for timeline, links, and highlights)

Accent color 2: Neon Green #39FF14 (for important labels)

Accent Color 3: Cyber ​​Pink #FF006E (for particularly important events)

Border/Divider Line: Dark Gray #2A2A2A

```

**Font System**:

plaintext

Heading font: Inter Black / Helvetica Neue Bold (bold, modern)

Body text font: Inter Regular / SF Pro Text (clear and easy to read)

Time/Data Font: JetBrains Mono / Courier New (monospace, tech-inspired)

```

**Visual Elements**:

- Timeline: A 2px wide vertical line, electric blue in color, with 12px dots as nodes.

- Event Card:

- Background: Charcoal gray #1A1A1A, with a 1px dark gray border

- Floating effect: The border turns electric blue, and the card floats slightly (transform: translateY(-4px)).

- Inner margin: 24px

- Rounded corners: 8px

- Shadow: 0 4px 20px rgba(0, 217, 255, 0.15)

- Tag Style:

- Small capsule shape, semi-transparent background, text in accent color

For example, neon green is used for "product launches," and cyber pink is used for "policy regulation."

- Link style:

- Default: Electric Blue, underlined

- Hovering: The color becomes brighter, and the underline becomes thicker.

**Animation Effects**:

- When the page loads: The title fades in + the timeline is animated from top to bottom (0.8s)

- While scrolling: Event cards fade in one by one (stagger effect, each with a 0.1s delay)

- When hovering: Card rises + shadow expands (transition: 0.3s ease)

### Step 4: Generate webpage content

**Objective:** To use the generateWebpage tool to generate an interactive presentation page that conforms to the Wired style.

**action**:

- Integrate the structured information extracted in Step 1 with the style guidelines in Step 3 into clear instructions.

- Call the generateWebpage tool, passing in the following parameters:

- `instruction`: Describes the page requirements in detail, including:

- Page title and subtitle

- Timeline layout (vertically centered or staggered)

- Data fields for each event (date, title, description, tags, link)

- Complete Wired style guidelines (color, typography, visual elements, animation)

- Interaction requirements (floating effect, scrolling animation, optional filtering function)

- Responsive requirements

- `references`: If the user provides `@references`, pass it in as the data source.

- Ensure the instructions clearly state:

- "Using Wired magazine style: dark background (#0D0D0D), electric blue accent color (#00D9FF), bold Inter Black heading font"

- The timeline uses a vertical layout, with date nodes on the left and event cards on the right.

Each event card includes: date, title, description, category tag, and source link.

- "When hovering, the card's border turns electric blue and rises slightly."

- "The timeline is drawn from top to bottom when the page loads, and the event cards fade in one by one."

**Quality Standards**:

- The generated webpage perfectly matches the visual style of Wired magazine.

- All event information is accurate and the source links are clickable.

- Smooth interaction and smooth animation.

## Style and Presentation

### Wired Magazine Style Guidelines

**Design Philosophy**:

Wired magazine's visual language emphasizes a combination of futurism and minimalism. It uses bold colors and geometric shapes to create a technological feel while maintaining clear readability. Key features include high contrast and strong visual hierarchy—important information must grab attention at a glance.

**Principles of Color Usage:**

**Background:** Dark tones create a professional and immersive feel; avoid pure black (#000000), use a slightly grayish dark color (#0D0D0D).

- **Accent Colors**: Use neon colors (blue, green, pink) as the visual focal point, but do not overuse them; maintain restraint.

- **Text:** Use pure white for main text and silver-gray for secondary text to ensure readability.

- **Hierarchy**: Use color to distinguish information levels (heading > body text > footer)

**Layout Principles**:

- **Font Comparison**: Titles use a bold sans-serif font (Inter Black), body text uses a regular font weight (Inter Regular), and data uses a monospace font (JetBrains Mono).

- **Font Size Levels:** Headings 48-64px, Subheadings 24-32px, Body Text 16-18px, Footnotes 12-14px

- **Line Spacing**: 1.6-1.8 line spacing for the main text to ensure comfortable reading.

- **Alignment**: Heading centered or left-aligned, body text left-aligned, data right-aligned.

**Layout Principles**:

- **Grid System**: Uses a 12-column grid, but allows for unconventional approaches (such as timeline offsets and card interleaving).

- **White Space**: Ample white space creates a sense of breathing room; the spacing between cards should be at least 40px.

- **Visual Focal Point:** Use size, color, and placement to guide the flow of the eye (from top to bottom, from left to right).

**Interaction Principles**:

- **Immediate Feedback:** Hovering and clicking must provide clear visual feedback (color change, displacement, shadow).

- **Natural animation:** Uses the ease-out easing function with a duration of 0.2-0.4 seconds.

- **Progressive Enhancement**: Core content can be displayed without JavaScript; interactivity is the icing on the cake.

**Reference Example**:

- WIRED's official website article page layout

- Stripe's official website product page (dark mode)

- Apple's product launch page (timeline section)

### Step 5: Verification and Optimization

**Objective:** To check if the generated webpage meets the requirements and make adjustments if necessary.

**action**:

- Preview the generated webpage and check each item:

- **Visual Style**: Do the background color, accent color, and font conform to Wired's style?

- **Information Completeness**: Are the date, title, description, and source of each event complete?

- **Interactive Experience**: Do the floating effect and scrolling animation work properly?

- **Responsive Layout:** Does it display correctly on different device sizes?

- **Link Availability:** Does clicking the source link redirect correctly?

- If problems are found, record the specific adjustment requirements:

- For example: "The timeline color is not bright enough and needs to be adjusted to #00D9FF".

- For example: "The inner margin of the card on the mobile device is too large and needs to be reduced to 16px."

- If adjustments are needed, call the generateWebpage tool again, passing in the `webpage_id` parameter for editing.

**Quality Standards**:

- Visual style 100% in line with Wired magazine aesthetics

- All interactive functions are working properly.

- No obvious layout errors or missing information

### Quality Standards

- **Completeness**: Each event includes a date, title, description, and source.

- **Accuracy**: All information is consistent with the original material, and links are accessible.

- **Traceability:** Every event has a clearly identified source.

- **Visual Consistency:** All elements strictly adhere to Wired's style guidelines.

- **Smooth Interaction:** Animations are smooth and have a fast response time (<100ms).

- **Accessibility:** Text contrast meets WCAG AA standards and is usable on mobile devices.