SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmarket-research-html

market-research-html

Writing & research

View repository

Updated 10-15 17:17

About this skill

Market Research Report (HTML Version)

Overview

This skill is designed to generate50+ page professional-grade market research reports, with the output format being HTML/CSS. This format not only maintains the professional visual rigor of consulting firms such as McKinsey and BCG, but also greatly simplifies the process of AI editing, partial updating, and content appending for long documents.

Core Features:

  • AI-Friendly Format: The HTML structure is clear and supports targeted section updates via ID, avoiding the common LaTeX compilation errors.
  • Professional Consulting Style: Achieves top-tier typography, color schemes, and interactive table of contents through built-in CSS.
  • Comprehensive Analysis: Covers core frameworks such as TAM/SAM/SOM, Porter's Five Forces, PESTLE, SWOT, and the BCG Matrix.
  • One-Click PDF Conversion: By using the browser's "Print" function together with print-optimized CSS, a perfect paper version of the report can be obtained.

Output Format: HTML5 + CSS3 (including print styles), with optional JS for interaction enhancements.

Visual Enhancement Requirements

Each report should generate 6 basic visual assets at the beginning, using thegenerate 6 basic visual assets at the beginning, using scientific-schematics and generate-image tools.

Methods for Embedding Visual Content

In HTML, use the <img> tag to embed generated images:

<div class="figure">
    <img src="figures/01_market_growth.png" alt="市场增长轨迹">
    <div class="caption"><b>图 2.1：</b> 市场增长轨迹预测 (2024-2034)</div>
</div>

Workflow (HTML-First)

Phase 1: Initialization and Environment Setup

  1. Create the project folder.
  2. Copy assets/style.css and assets/template.html。
  3. Create the figures/ folder for storing visual assets.

Phase 2: Research and Data Collection

Use research-lookup to collect key data:

  • Market size, CAGR, and share of each market segment.
  • Top 10 competitors and their shares.
  • Regulatory policies and technology trends.

Phase 3: Batch Visual Generation

Use a Python script to generate all required charts:

python scripts/generate_market_visuals.py --topic "[市场名称]" --output-dir figures/

Phase 4: Report Writing (AI Editing Logic)

  1. Initialize the Skeleton: Based on template.html to create the first draft.
  2. Block-by-Block Filling: The AI fills in content chapter by chapter. Because HTML tags are simple to close, the AI can easily handle long texts of 50+ pages.
  3. Local Optimization: Use id(such as #chapter-4) to precisely locate the parts that need deeper analysis.

Phase 5: Preview and Export

  1. Open the HTML file in a browser for instant preview.
  2. Check whether the CSS styles are loaded correctly.
  3. Use the browser's "Print -> Save as PDF" function, ensuring that "Print backgrounds" is checked.

Professional Component Reference

During the writing process, use the following HTML classes to implement consulting-grade components:

Component Name HTML Code Example Purpose
Insight Box <div class="insight-box box">...</div> Highlight key findings and deep insights
Data Frame <div class="data-box box">...</div> Display core statistics and metrics
Risk Frame <div class="risk-box box">...</div> List potential threats and challenges
Recommendation Frame <div class="recommendation-box box">...</div> Provide actionable strategic recommendations
Chart Container <div class="figure">...</div> Wrap images and add professional captions

50+ page verification checklist

  • Includes standard cover and hero visualization.
  • Interactive table of contents (sidebar or sticky).
  • Executive summary (including Snapshot frame and investment thesis).
  • 11 core analysis chapters complete (each chapter has a corresponding section tag).
  • Includes at least 6 core charts (TAM/SAM/SOM, Five Forces, risk matrix, etc.).
  • All data points are marked with sources in the HTML.
  • Appendix includes research methodology and detailed data tables.
  • In print preview, each chapter automatically starts on a new page (CSS pagination control).

Resources

  • assets/style.css: Defines all visual specifications.
  • assets/template.html: Starting template.
  • references/: Detailed text guide containing all analysis frameworks.
  • scripts/: Includes Python automated charting tools.