---
name: a4-report
description: Generate professional A4 paper style consulting reports and analysis documents in McKinsey/BCG/Bain aesthetic. Creates print-optimized HTML reports that look like consulting deliverables.  **Unique...
---

# a4-report

Generate professional A4 paper style consulting reports and analysis documents in McKinsey/BCG/Bain aesthetic. Creates print-optimized HTML reports that look like consulting deliverables.

**Unique Features:**
- A4 paper format (210mm × 297mm), print-to-PDF optimized
- McKinsey/BCG/Bain consulting firm visual styles
- CSS-based charts without external dependencies
- Professional report structure: Executive Summary → Findings → Analysis → Recommendations

**When to use this skill (Triggers):**...

---
name: a4-report
description: |
  Generate professional A4 paper style consulting reports and analysis documents in McKinsey/BCG/Bain aesthetic. Creates print-optimized HTML reports that look like consulting deliverables.

  **Unique Features:**
  - A4 paper format (210mm × 297mm), print-to-PDF optimized
  - McKinsey/BCG/Bain consulting firm visual styles
  - CSS-based charts without external dependencies
  - Professional report structure: Executive Summary → Findings → Analysis → Recommendations

  **When to use this skill (Triggers):**
  - "写报告" / "生成报告" / "帮我写一份报告"
  - "麦肯锡风格" / "BCG风格" / "贝恩风格" / "咨询风格"
  - "A4报告" / "打印报告" / "PDF报告"
  - "分析报告" / "市场分析报告" / "竞品分析报告" / "战略报告"
  - "consulting report" / "A4 report" / "professional report" / "business report"
  - "帮我写一份...的分析报告" (当需要专业格式的报告时)

  **NOT this skill (use analysis-finrpt instead):**
  - Financial report parsing/visualization (财报解读) → use analysis-finrpt
  - "财报分析" / "10-K" / "10-Q" → use analysis-finrpt

  **Examples:**
  - "帮我写一份中国新能源汽车市场分析报告"
  - "生成一个麦肯锡风格的战略报告"
  - "Create an A4 format consulting report for market entry strategy"
---

# A4 Report

Generate professional A4 paper style consulting reports with McKinsey/BCG/Bain aesthetic.

## Core Principles

1. **A4 Paper Format** — All pages are exactly 210mm × 297mm (or 595pt × 842pt at 72dpi). Print-optimized, clean margins.
2. **Consulting Aesthetics** — Clean typography, data-driven visuals, strategic use of whitespace, no decorative clutter.
3. **Zero Dependencies** — Single HTML files with inline CSS. Print to PDF in browser.
4. **Structured Sections** — Follow consulting report conventions: Executive Summary → Key Findings → Analysis → Recommendations → Appendix.

---

## 核心改进：图表说明规范

**⚠️ 重要：每个图表必须有完整的文字解读**

每张图表（chart）后面，必须紧跟以下两种说明框：

### 1. 读图指引 (Chart Guide)
放在图表下方，用浅蓝色背景框标识，引导读者如何解读图表：
```html
<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>关注X轴与Y轴的对应关系</li>
        <li>注意颜色的含义（通常深色代表当前期，浅色代表对比期）</li>
        <li>寻找数据中的"转折点"或"异常值"</li>
    </ul>
</div>
```

### 2. 关键洞察 (Key Insights)
用深蓝色左边框的框标识，放在读图指引下方，总结图表传递的核心信息：
```html
<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>数据呈现XX趋势</li>
        <li><strong>对比发现：</strong>XX指标显著高于/低于预期</li>
        <li><strong>行动启示：</strong>建议决策者关注XX问题</li>
    </ul>
</div>
```

### 图表说明样式

```css
.chart-guide {
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    padding: 8pt 12pt;
    margin: 6pt 0;
    font-size: 8pt;
    page-break-inside: avoid;
}

.key-insights {
    background: #f0f4f8;
    border-left: 4px solid #2c5282;
    padding: 8pt 12pt;
    margin: 6pt 0;
    font-size: 8pt;
    page-break-inside: avoid;
}

.key-insights strong, .chart-guide strong {
    color: #1a365d;
}

.chart-guide ul, .key-insights ul {
    margin: 4pt 0 0 16pt;
    padding: 0;
}

.chart-guide li, .key-insights li {
    margin-bottom: 2pt;
}
```

---

## Report Structure

Every professional consulting report follows this hierarchy:

```
1. Cover Page
   - Report title (bold, clear)
   - Subtitle/client name
   - Date
   - Firm logo placeholder

2. Executive Summary (1 page)
   - Key结论 (3-5 bullet points)
   - Strategic recommendations overview
   - Expected impact

3. Table of Contents
   -自动生成目录

4. Key Findings (2-4 pages)
   - Finding 1: Title + evidence + implication
   - Finding 2: Title + evidence + implication
   - Finding 3: Title + evidence + implication

5. Detailed Analysis (variable)
   - Data visualizations
   - Charts and graphs
   - Framework analyses (2x2 matrices, waterfall charts)

6. Strategic Recommendations (1-2 pages)
   - Specific, actionable recommendations
   - Prioritized by impact/effort

7. Appendix (if needed)
   - Data tables
   - Methodology notes
   - Source references
```

---

## Content Density Guidelines

**⚠️ Fill the page.** Reports that look half-empty waste space. Target **95% screen density** — content should nearly fill the entire A4 page.

### Recommended Content Per Page

| Section Type | Recommended Content |
|-------------|-----------------|
| Executive Summary | 5-6 bullets + 4 KPI cards + 2 highlight boxes |
| Key Findings | 3 finding boxes (side-by-side + 1 below) |
| Analysis | 1 chart + chart-guide + key-insights (stacked vertically) |
| Recommendations | 4-5 recommendation cards |
| Tables | 6-8 rows maximum + 1 summary paragraph |
| SWOT/Grid | 4 quadrants + 2 highlight boxes |

### When to Combine Elements

- **Chart + Guide:** Always stack vertically — chart on top, guide below, insights at bottom
- **Chart + Table:** Use side-by-side only if both are compact; otherwise stack
- **Two finding boxes:** Use `.two-columns` + add a third below
- **Multiple highlight boxes:** Stack 2-3 per page

### Rule of Thumb

> **95% density rule:** Content should fill ~95% of screen space. If there's visible empty space at the bottom of a section, add more content or reduce spacing.

### Common Mistakes

| Mistake | Result | Fix |
|---------|--------|-----|
| Chart without explanation | Reader confused | Add chart-guide + key-insights |
| 85% density | Slightly empty | Add more finding boxes, stack highlight boxes |
| Chart alone on page | Wasted space | Add explanation boxes below |
| Too much spacing | Empty-looking | Reduce margin/padding |

### CSS Classes for Layout

```css
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12pt; }
```

---

## Phase 1: Content Discovery

**必须先确认以下信息，才能开始生成报告：**

### 首要问题：汇报对象（Audience）

**必须首先询问（header: "汇报对象"）：**

```
这份报告的主要受众是谁？这决定了报告的语言深度、数据详略和建议措辞。

选项：
1. 管理层 / C-Suite（CEO/CFO/COO）
   - 语言专业简洁，结论先行，数字导向
   - 减少基础概念解释，直击决策要点

2. 董事会 / 投资者 / 股东
   - 强调投资回报、风险评估、战略价值
   - 关注ROE、现金流、市值管理等指标

3. 业务负责人 / 中层管理者
   - 需要更多操作层面的分析和可执行建议
   - 可以包含更多背景说明

4. 战略规划部 / 咨询顾问
   - 最详尽的数据和最严谨的框架分析
   - 需要完整的假设和推导过程

5. 客户 / 外部合作方
   - 强调价值主张和合作亮点
   - 减少内部信息的披露

6. 内部团队 / 新人培训
   - 需要更多概念解释和背景铺垫
   - 术语需要标注定义
```

### 标准问题（可以一起问）

**Question 1 — Report Type** (header: "报告类型"):
What kind of report do you need? Options:
- Market Analysis Report / 市场分析报告
- Competitive Intelligence Report / 竞品分析报告
- Strategic Planning Report / 战略规划报告
- Business Review / 业务复盘报告
- Feasibility Study / 可行性研究报告
- Financial Analysis / 财务分析报告
- Custom Topic / 自定义主题

**Question 2 — Purpose** (header: "报告目的"):
What will this report be used for? Options:
- Investment Decision / 投资决策参考
- Board Presentation / 董事会汇报
- Internal Review / 内部复盘会议
- Client Proposal / 客户提案
- Due Diligence / 尽职调查
- Strategic Planning / 战略规划

**Question 3 — Length** (header: "报告篇幅"):
How detailed should this be? Options:
- Brief (5-8 pages) / 简洁版
- Standard (10-15 pages) / 标准版
- Comprehensive (20+ pages) / 详细版

**Question 4 — Style Preference** (header: "风格偏好"):
Which consulting firm's style? Options:
- McKinsey Blue / 麦肯锡蓝 — Deep navy + white, serif headlines
- BCG Silver / BCG银灰 — Charcoal + accent blue, geometric layouts
- Bain Red / 贝恩红 — Dark slate + bold red accents, data-forward
- Custom / 自定义 — Let me specify

---

## Phase 2: Style Selection

### Step 2.1: Style Path

Ask (header: "风格选择"):
How would you like to choose the style?

- "Show me previews" (recommended) — Generate 3 style previews
- "I know what I want" — Select from preset list directly

**If direct selection:** Show preset picker and skip to Phase 3. Available presets are defined in [STYLE_PRESETS.md](STYLE_PRESETS.md).

### Step 2.2: Generate 3 Style Previews

Generate 3 distinct single-page HTML previews showing:
- Cover page aesthetic
- Typography and colors
- Overall consulting feel

| Style              | Recommended For                        |
| ------------------ | -------------------------------------- |
| McKinsey Blue      | Serious, executive, formal            |
| BCG Silver         | Modern, geometric, structured          |
| Bain Red           | Bold, data-driven, impactful           |

Save previews to `.claude-design/report-previews/` (style-a.html, style-b.html, style-c.html).

Open each preview automatically for the user.

### Step 2.3: User Picks

Ask (header: "风格"):
Which style preview do you prefer? Options: Style A / Style B / Style C / Mix elements

If "Mix elements", ask for specifics.

---

## Phase 3: Generate Report

Generate the full report using content from Phase 1 and style from Phase 2.

**Before generating, read these supporting files:**

- [a4-report-template.md](a4-report-template.md) — HTML architecture for A4 print
- [STYLE_PRESETS.md](STYLE_PRESETS.md) — Consulting firm style specifications

**Key requirements:**

- Single self-contained HTML file, all CSS inline
- Use A4 print media queries: `@page { size: A4; margin: 20mm; }`
- Use Google Fonts — professional serif + sans combinations
- Add page breaks: `page-break-before: always`, `page-break-after: avoid`
- Include print button for PDF export
- Add header/footer with page numbers
- All charts should be print-optimized (no interactive elements required)
- **⚠️ Every chart MUST be followed by chart-guide and key-insights boxes**

### Source Data Handling (for later audit)

**如果用户提供 了源数据文件，在生成报告时必须：**

1. **记录数据文件位置** — 保存源数据路径（如 `data/source.xlsx`）
2. **标注数据引用** — 在报告的数据点旁标注来源字段名
3. **保留原始数值** — 记录报告中使用的每一个数值，以便后续审计

这样在Phase 7审计时可以快速定位和验证每个数据点。

---

## Phase 4: Content Enhancement

### Charts & Visualizations

For data-heavy reports, include these consulting-standard visualizations:

| Chart Type          | Use Case                              |
| ------------------- | ------------------------------------- |
| Bar Chart           | Comparative analysis, market share    |
| Line Chart          | Trend analysis, time series           |
| 2x2 Matrix          | Strategic positioning, priority grids |
| Waterfall Chart     | Variance analysis, build-ups         |
| Sankey Diagram      | Flow analysis, process mapping       |
| Donut Chart         | Composition analysis, segmentation    |
| Heat Map            | Performance comparison, risk assessment|

Use CSS-based charts (no external libraries) for zero-dependency output.

### Required Chart Structure

Every chart section MUST follow this structure:

```html
<!-- 1. Chart Container -->
<div class="chart-container">
    <div class="chart-title">图表标题（清晰描述数据内容）</div>
    <svg class="chart-svg">...SVG code...</svg>
</div>

<!-- 2. Chart Guide (读图指引) -->
<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>说明图表的基本读法（如：颜色含义、坐标轴含义）</li>
        <li>指出需要特别关注的数据点</li>
        <li>解释数据的来源和口径</li>
    </ul>
</div>

<!-- 3. Key Insights (关键洞察) -->
<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>数据呈现什么趋势</li>
        <li><strong>对比发现：</strong>与预期或对比基准的差异</li>
        <li><strong>行动启示：</strong>对决策者的启示</li>
    </ul>
</div>
```

### Example: Revenue Trend Chart

```html
<!-- Chart -->
<div class="chart-container">
    <div class="chart-title">图1：美团收入增长趋势（2023-2025）</div>
    <svg class="chart-svg" viewBox="0 0 400 150">
        <!-- SVG bar chart code -->
    </svg>
</div>

<!-- Chart Guide -->
<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>深蓝色柱状图为当年收入，浅蓝色为同比增长</li>
        <li>Y轴左轴为收入金额（亿元），右轴为同比增速（%）</li>
        <li>关注2024-2025年增速的明显放缓趋势</li>
    </ul>
</div>

<!-- Key Insights -->
<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>收入增速从2024年的18.6%骤降至2025年的8.1%，回落10.5个百分点</li>
        <li><strong>对比发现：</strong>8.1%的增速低于市场一致预期的10%，显示核心业务增长乏力</li>
        <li><strong>行动启示：</strong>管理层需重新评估2026年增长目标，并加大新业务突破力度</li>
    </ul>
</div>
```

### Frameworks

Include consulting-standard frameworks when relevant:
- SWOT Analysis
- Porter's Five Forces
- BCG Growth-Share Matrix
- McKinsey 7S Framework
- PESTEL Analysis

---

## Phase 5: Delivery

1. **Open** — Use `open [filename].html` to launch in browser
2. **Print to PDF** — Guide user to print (Cmd/Ctrl+P) and select "Save as PDF"
3. **Summarize** — Tell the user:
   - File location, style name, page count
   - Report audience (based on their selection)
   - How to print: File → Print → Save as PDF
   - How to customize: CSS variables in `:root` for colors, font links for typography
   - Recommended print settings: A4 paper, no margins scaling, background graphics ON

### Auto-Proceed to Phase 7

**⚠️ 重要：完成交付后，必须检查是否需要自动进入Phase 7数据审计**

在完成Phase 5交付时，**必须判断是否应该自动进入数据审计**：

| 条件 | 动作 |
|-----|------|
| 用户提供了源数据文件 | **立即自动进入Phase 7**，先完成数据审计再交付 |
| 用户未提供源数据 | 跳过Phase 7，直接完成交付 |

**判断逻辑示例：**
```
如果用户说 "基于xxx数据写报告" 或 上传了CSV/Excel/PDF文件
→ 报告生成后自动进入Phase 7数据审计
→ 完成审计后再进行Phase 5交付

如果用户只是说 "写一份关于xxx的报告"（无数据源）
→ 直接进行Phase 5交付
→ Phase 7仅在用户主动要求时执行
```

**自动审计流程：**
```
报告生成完成
    ↓
检测到源数据文件
    ↓
自动进入Phase 7数据审计
    ↓
审计完成并修复问题后
    ↓
再进行Phase 5正式交付
```

---

## Phase 6: PDF Export (Optional)

After delivery, **ask the user:** _"Would you like me to export this report as a PDF file?"_

If yes, guide them through browser print:
1. Open the HTML in browser
2. File → Print (or Cmd/Ctrl+P)
3. Destination → Save as PDF
4. More settings → Paper Size: A4
5. Options → Check "Background graphics"

---

## Phase 7: Data Audit (Automatic) ⭐

**⚠️ 重要变更：数据审计现已自动执行，不再等待用户询问！**

报告生成完成后，如果用户提供过原始数据文件，系统将**自动**启动数据审计流程，对报告中的数据进行校验。

### Auto-Trigger Conditions

**以下情况将自动触发Phase 7数据审计：**

| 触发条件 | 说明 |
|---------|------|
| 用户提供了源数据文件 | CSV、Excel、PDF、TXT等格式的数据文件 |
| 用户指定了数据来源 | 如"基于xxx数据"、"从附件获取" |
| 报告包含具体数字 | 金额、百分比、增长率等可量化指标 |

### Audit Modes

| 模式 | 触发条件 | 说明 |
|-----|---------|------|
| **自动模式 (Auto)** | 用户提供源数据 | 生成报告后自动运行完整审计 |
| **手动模式 (Manual)** | 用户未提供源数据 | 仅当用户主动询问时执行 |

**如果用户提供了源数据 → 报告生成后自动进入Phase 7审计**
**如果用户未提供源数据 → Phase 7仅作为可选功能保留**

---

### Step 7.1: Print Audit Header

Output directly to terminal:

```
╔══════════════════════════════════════════════════════════════════════════════╗
║                              🔍  数据审计开始                                ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  报告文件: [report.html]                                                     ║
║  源数据文件: [source.xlsx]                                                   ║
║  审计时间: 2026-04-12 14:30                                                  ║
╚══════════════════════════════════════════════════════════════════════════════╝
```

---

### Step 7.2: Extract & List Audit Items

Parse the report and list all data points to verify. Print each item with its status:

```
📊 正在提取数据点...

[待验证]  1. 执行摘要 > 全年收入: 3,649亿元
[待验证]  2. 执行摘要 > YoY增长: +8.1%
[待验证]  3. 关键发现1 > 市场规模: 4,200亿元
[待验证]  4. 关键发现1 > 增长率: 12%
[待验证]  5. 表格 > Q4收入: 892亿元
...
```

---

### Step 7.3: Validate & Mark Progress (with strikethrough)

For each validation, print the result directly. Completed items get strikethrough:

```
🔍 正在逐项验证...

[验证中]  1. 执行摘要 > 全年收入: 3,649亿元
          └─ 查找源数据: 364,854,746千元...找到 ✓
[完成~~]  2. 执行摘要 > YoY增长: +8.1%
          └─ 计算验证: (3649-3376)/3376=8.08% ✓

[验证中]  3. 关键发现1 > 市场规模: 4,200亿元
          └─ 查找源数据: 未找到直接字段，估算值？ ⚠️

[完成~~]  4. 关键发现1 > 增长率: 12%
          └─ 计算验证: (4200-3750)/3750=12% ✓

[错误✗]   5. 表格 > 市场份额: 68%
          └─ 查找源数据: 源文件无此字段 ❌ 疑似幻觉
```

---

### Step 7.4: Final Summary

After all validations, print summary table:

```
════════════════════════════════════════════════════════════════════════════════
                                   📋 审计结果汇总
════════════════════════════════════════════════════════════════════════════════

  ✅ 已验证:     12 项
  ⚠️ 疑似幻觉:    2 项  (需要人工确认)
  ❌ 数据错误:    1 项  (需立即修正)
  🔍 无法验证:    3 项  (源数据中未找到)

────────────────────────────────────────────────────────────────────────────────
                                   📊 准确率: 75%
════════════════════════════════════════════════════════════════════════════════
```

---

### Step 7.5: Detailed Findings

Print detailed list of issues:

```
════════════════════════════════════════════════════════════════════════════════
                                   ⚠️ 需要关注的问题
════════════════════════════════════════════════════════════════════════════════

【疑似幻觉 - 需人工确认】
  1. 第5页-发现2 > Q4单季亏损161亿元
     └─ 源数据未提供Q4分部损益，建议核实数据来源

  2. 第6页 > 新业务亏损扩大79%
     └─ 计算基数183亿待确认，请核实2024年新业务亏损数据

【数据错误 - 需修正】
  3. 第X页-表格 > 市场份额68%
     └─ 源数据中无此字段，纯属虚构，建议删除或修正为61%

【无法验证 - 建议添加来源注释】
  4. 第4页 > 行业排名TOP3
     └─ 源数据无此字段，建议标注数据来源

════════════════════════════════════════════════════════════════════════════════
```

---

### Step 7.6: Ask for Fix

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  审计完成！是否需要修复这些问题？                                            │
│                                                                             │
│  1. [自动修复]  自动修正所有可计算的错误                                     │
│  2. [选择性修复] 逐项选择要修复的内容                                        │
│  3. [生成报告]  在报告中高亮标记问题项（PDF保持原样）                        │
│  4. [跳过]     保持原样，不做修改                                           │
└─────────────────────────────────────────────────────────────────────────────┘
```

---

### Terminal Output Format Reference

Use this format for audit output:

```bash
# Header box
echo "╔════════════════════════════════════════════════════════════════╗"
echo "║  🔍 数据审计开始                                                ║"
echo "╚════════════════════════════════════════════════════════════════╝"

# Pending item
echo "[待验证]  1. 执行摘要 > 全年收入: 3,649亿元"

# In progress (with spinner animation)
echo -n "[验证中]  2. 执行摘要 > YoY增长: +8.1%  "
echo "└─ 查找源数据..."

# Completed with strikethrough
echo "[完成~~]  2. 执行摘要 > YoY增长: +8.1%"
echo "          └─ 计算验证: 8.08% ✓"

# Warning
echo "[⚠️ 疑似]  3. 第5页 > Q4亏损161亿元"
echo "          └─ 源数据未提供Q4分部数据"

# Error
echo "[❌ 错误]  4. 第X页 > 市场份额68%"
echo "          └─ 源数据无此字段，疑似虚构"
```

### ANSI Colors for Terminal (Optional)

```bash
# Colors
GREEN='\033[0;32m'    # Verified
YELLOW='\033[1;33m'   # Warning
RED='\033[0;31m'      # Error
BLUE='\033[0;34m'     # In progress
NC='\033[0m'          # No Color

# Strikethrough (using Unicode)
echo -e "${GREEN}[完成~~] 数据项 ${NC}"

# Example with color
echo -e "${GREEN}✓ 已验证${NC}: 全年收入 3,649亿元"
echo -e "${YELLOW}⚠️ 疑似${NC}: Q4亏损161亿元 (需确认)"
echo -e "${RED}✗ 错误${NC}: 市场份额68% (源数据无此字段)"
```

---

### Quick Audit Flow (Summary)

```
1. 打印审计头部信息
2. 列出所有待验证数据点
3. 逐项验证，每项打印：
   - 验证中状态
   - 验证结果 (✓/⚠️/✗)
   - 发现详情
4. 完成后打印汇总统计
5. 列出问题清单
6. 询问用户修复方式
```

---

## Supporting Files

| File                        | Purpose                                      | When to Read          |
| --------------------------- | -------------------------------------------- | --------------------- |
| [a4-report-template.md](a4-report-template.md) | A4 HTML structure and print CSS     | Phase 3 (generation)  |
| [STYLE_PRESETS.md](STYLE_PRESETS.md)       | 3 consulting firm style presets      | Phase 2 (style selection) |
| [scripts/export-pdf.sh](scripts/export-pdf.sh) | Browser-based PDF export guidance   | Phase 6 (export)      |
| [scripts/audit-checklist.md](scripts/audit-checklist.md) | Data audit checklist & guide | Phase 7 (audit) |

---

## Design Guidelines

### Typography

| Element          | Font                          | Size      | Weight |
| ---------------- | ----------------------------- | --------- | ------ |
| Report Title     | Playfair Display / Noto Serif | 32-36pt   | 700    |
| Section Header   | Noto Sans / Source Sans      | 18-20pt   | 600    |
| Subsection       | Noto Sans / Source Sans       | 14-16pt   | 600    |
| Body Text        | Noto Sans / Source Sans      | 10-11pt   | 400    |
| Caption/Source   | Noto Sans / Source Sans      | 8-9pt     | 400    |
| Table Header     | Noto Sans / Source Sans      | 9-10pt    | 600    |
| Table Body       | Noto Sans / Source Sans      | 9-10pt    | 400    |

### Colors (McKinsey-Style Palette)

```css
:root {
    /* Primary */
    --primary-navy: #1a365d;
    --primary-dark: #0f2444;
    --primary-light: #2c5282;

    /* Accent */
    --accent-blue: #3182ce;
    --accent-silver: #718096;

    /* Neutrals */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #a0aec0;

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-light: #f7fafc;
    --bg-chart: #edf2f7;

    /* Charts */
    --chart-1: #2c5282;
    --chart-2: #3182ce;
    --chart-3: #63b3ed;
    --chart-4: #90cdf4;
}
```

### Print Optimization

```css
/* A4 Page Setup */
@page {
    size: A4;
    margin: 20mm 15mm;
}

/* Avoid page breaks inside these */
.no-break {
    page-break-inside: avoid;
}

/* Force page breaks before these */
.break-before {
    page-break-before: always;
}
```

---

## Content Quality Standards

**Write like a top-tier consultant:**

1. **结论先行** — Lead with the key finding/recommendation
2. **数据支撑** — Every claim backed by evidence
3. **逻辑清晰** — MECE structure (Mutually Exclusive, Collectively Exhaustive)
4. **Actionable** — Specific, not vague recommendations
5. **简洁有力** — No jargon, no fluff

**Headline Formula:**
> [Key Finding/Recommendation] + [Evidence/Context] + [Implication/Stakes]

Example:
> "中国高端消费品市场预计年增12%，头部品牌应加速布局下沉渠道以捕获新增消费人群。"

---

## Anti-Patterns (Avoid These)

- ❌ Generic "In today's rapidly changing world..." opener
- ❌ More than 6 bullet points per section
- ❌ Decorative elements that add no information
- ❌ Colorful charts without clear takeaway
- ❌ Vague recommendations ("should consider improving...")
- ❌ Mixing hierarchical levels in lists
- ❌ Chart without explanation — readers won't understand the significance
- ❌ Report without knowing the audience — language/depth may be wrong

---

## PDF 打印专项优化 ⚠️ 必读

**核心问题：并排图表在 PDF 导出时变成堆叠**

浏览器打印时，CSS grid 布局可能被降级为单列，导致 `.two-col`/`.two-columns` 的两列并排图表变成垂直堆叠。

### 解决方案：打印专用 CSS 强制保持 Grid 布局

**在模板 CSS 中必须添加以下 @media print 规则：**

```css
/* ===========================================
   PRINT OPTIMIZATION — CRITICAL FOR PDF EXPORT
   =========================================== */

/* 1. 强制两列布局在打印时保持 grid */
@media print {
    .two-col,
    .two-columns,
    [style*="grid-template-columns: 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-column-gap: 8pt !important;
    }
}

/* 2. SVG 图表高度压缩 — 每行间距从 18px 减到 16px */
.chart-svg {
    height: 200px !important;  /* 原 235px */
}

/* 3. 容器 padding 收紧 */
.chart-container,
.highlight-box,
.insight-box {
    padding: 6pt !important;  /* 原 8pt */
}

/* 4. 图例字体和间距压缩 */
.legend-item {
    font-size: 8.5pt !important;  /* 原 9pt */
    margin: 3pt !important;  /* 原 4pt */
}

/* 5. 详细拆解卡片统一收紧 */
.detail-card,
.analysis-card,
拆解-card {
    gap: 8pt !important;
    margin-top: 4pt !important;
    padding: 6pt !important;
}
```

### 完整打印优化 CSS（直接复制到模板）

```css
/* ===========================================
   PRINT MEDIA QUERIES — PDF EXPORT FIXES
   =========================================== */
@media print {
    /* 强制保持两列 grid 布局 */
    .two-col,
    .two-columns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 8pt !important;
        page-break-inside: avoid !important;
    }

    /* 强制保持三列 grid 布局 */
    .three-columns,
    .metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-columns: repeat(4, 1fr) !important;
        page-break-inside: avoid !important;
    }

    /* SVG 高度压缩 */
    .chart-svg {
        height: 200px !important;
        max-height: 200px !important;
    }

    /* 图表容器 padding 收紧 */
    .chart-container {
        padding: 6pt !important;
        margin: 4pt 0 !important;
    }

    /* chart-guide 和 key-insights 紧凑化 */
    .chart-guide,
    .key-insights {
        padding: 6pt 10pt !important;
        margin: 4pt 0 !important;
        font-size: 8pt !important;
    }

    /* 图例项压缩 */
    .legend-item {
        font-size: 8.5pt !important;
        margin: 3pt 0 !important;
    }

    /* 详细拆解卡片 */
    .detail-card,
    .拆解-card {
        gap: 8pt !important;
        margin-top: 4pt !important;
        padding: 6pt !important;
    }

    /* 防止页面断在 grid 中间 */
    .two-col,
    .two-columns,
    .chart-container,
    .finding-box,
    .recommendation {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 确保背景色打印 */
    * {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}
```

### 尺寸压缩对照表

| 元素 | 原值 | 新值 | 说明 |
|------|------|------|------|
| SVG 高度 | 235px | 200px | 图表行间距 18→16px |
| 容器 padding | 8pt | 6pt | 进一步收紧 |
| 图例字体 | 9pt | 8.5pt | 略为压缩 |
| 图例 margin | 4pt | 3pt | 减小间距 |
| 拆解卡片 gap | (原值) | 8pt | 统一 |
| 拆解卡片 margin-top | (原值) | 4pt | 减小 |

### 打印设置检查清单

导出 PDF 前确认：
- [ ] 打印设置中 **"背景图形"** 已勾选
- [ ] 纸张尺寸选择 **A4**
- [ ] 边距设置为 **"最小值"** 或 **"无"**
- [ ] 方向为 **"纵向"**
- [ ] 取消勾选"页眉页脚"(使用 CSS 自定义 header/footer)


---

**Source**: https://github.com/Pysamlam/a4-report
**Author**: Pysamlam
**Discovered via**: skillsdirectory.com
**Genre**: business