---
name: skill-report-html
description: 系统级。咨询师级HTML长页报告排版+发布SOP，配合 fmode-storage 发布为公网链接。
schema_version: 0.1.0
version: 1.1.0
author: Yuyang001 (FmodeAgent)
license: MPL-2.0
copyright: "Copyright (c) 2026 未来飞马 Fmode"
level: system
category: publishing
keywords:
  - html-report
  - long-page
  - proposal
  - landing-page
  - publishing
  - s3-cdn
depends_on:
  - fmode-storage
platforms:
  - fmode-agent
  - fmode-code
tags:
  - 未来飞马
  - 智能体技能
  - 超级技能
  - 系统级
  - 内容创作
  - FmodeAgent
  - Hermes Agent
  - FmodeCode
  - FmodeCode / Claude Code
  - consultant
  - html-report
  - publishing
---

# skill-report-html — 咨询师级 HTML 长页报告工程

> **系统级技能** · 提供从零到发布 s3.fmode.cn 的完整报告制作方法论 + 排版规范 + 资源库

## 一、定位与边界

### 你不用这个技能的场景
- 内部复盘、会议纪要、数据分析 → 用 `deliverable-detector` 或 `html-report-delivery`
- 课程宣传单页 → 用 `course-landing-craft`
- 客户对外方案（商务化叙事） → 用 `client-proposal-craft`

### 你该用这个技能的场景
- **给外部看的方案/报告**，需要精美长页+简洁深度+强方法论
- 报告要发到 CDN（s3.fmode.cn）方便分享传播
- 需要「咨询师级排版」但不想用外部大框架
- **零构建工具**，单 HTML 自包含，`file://` 就能直接预览

## 二、核心设计方法论

### 2.1 主题体系（双主题·139个CSS变量）

参考 `skill-present/lib/theme/tokens.css`，使用 CSS 变量实现深色/浅色双主题切换：

```css
/* 深色主题（默认） */
[data-theme="dark"] {
  --bg-0: #0B1017;
  --bg-1: #111925;
  --bg-2: #171F2B;
  --text-1: #FBFAF7;
  --text-2: #C1C4CB;
  --brand-1: #D5B254;    /* 暗金色 */
  --brand-2: #AF8AE8;    /* 浅紫色 */
  --gradient-hero: radial-gradient(ellipse...);
}

/* 浅色主题（未来飞马） */
[data-theme="light"] {
  --bg-0: #FAFBFC;
  --bg-1: #FFFFFF;
  --text-1: #1A1D23;
  --brand-1: #6366F1;    /* 靛蓝色 */
  --brand-2: #8B5CF6;    /* 紫色 */
}
```

**主题切换原理**：用 HTML 属性 `[data-theme="dark/light"]` 控制全部 CSS 变量取值。JS 切换只需一条：

```js
document.documentElement.dataset.theme = 
  current === 'dark' ? 'light' : 'dark';
```

### 2.2 章节体系（13段式交替）

```
Hero 区（logo + 标题 + 副标题 + CTA）      → 全屏视差渐变背景
Section 01（问题/痛点叙述）                 → 数据卡片
Section 02（方法论/解决方案）               → 编号栅格
Section 03-06（层层递进的论证）             → 图+文交替排列
Section 07（技术架构/全景图）               → 大图满屏
Section 08（案例/数据验证）                → 对比卡
Section 09-12（深入展开）                  → 图+文交替
CTA 区（行动号召）                        → 品牌渐变背景
Footer                                    → 极简，品牌色
```

**交替规则**：奇数 section 加 `class="block"`，偶数加 `class="block alt"` 实现背景色交替（`--bg-1`/`--bg-2`），提升阅读节奏感。

### 2.3 排版铁律

| 规则 | 说明 |
|------|------|
| 零外部依赖 | 所有资源自己带，包括字体（system-ui stack）、图标（纯字符）、CSS（内联）|
| 响应式优先 | 用 CSS clamp() 和 max-width 做流式布局，手机上4列→2列→1列 |
| 毛玻璃分割 | 用 `--glass-blur` + `backdrop-filter:blur()` 做章节之间的视觉过渡 |
| 字号阶梯 | `--fs-micro:0.75rem` → `--fs-body:1rem` → `--fs-h3:2rem` → `--fs-hero:clamp(2.5rem,5vw,4rem)` |
| 卡片阴影 | `--shadow-float:0 8px 30px rgba(0,0,0,.45)` 提升层次感 |
| 数据可读 | 关键数字：大、粗、品牌色；单位/说明/来源：小、浅色 |
| 图片性能 | `<img loading="lazy">` + `object-fit:cover` + 明确宽高比 |

### 2.4 CSS 变量核心命名

```
--bg-0/1/2/3     → 背景色层级（更深→更浅）
--text-1/2/3/4   → 文字层级（主→辅→说明→占位）
--brand-1/2/3    → 品牌色（主/辅/强调）
--border-*       → 边框（subtle/strong/focus/danger/ok）
--shadow-*       → 阴影（card/float/glow）
--radius-*       → 圆角（sm/md/lg/card/pill）
--gradient-*     → 渐变（brand/text/hero）
--fs-*           → 字号（micro/body/h1-h3/hero）
--space-*        → 间距（xs/sm/md/lg/xl/section）
--glass-*        → 毛玻璃（blur/bg/border）
--anim-*         → 动画（fast/normal/slow/ease）
```

## 三、搭配 skill-storage 发布

每个报告完成后，必须上传到 s3.fmode.cn 获得公开 CDN 链接：

```bash
# 用 skill-storage 上传
cd /opt/data/skills/skill-storage/scripts
node uploader.mjs put /path/to/report.html \
  --key user/{USER_OID}/report-name/index.html \
  --acl public-read
```

**发布检查清单**：
1. ✅ 所有外部资源内联（图片可外链，CSS必须内联）
2. ✅ `file://` 打开正常（无跨域请求）
3. ✅ 双主题都测试了（切换主题无样式断裂）
4. ✅ 手机上预览了（无横向滚动）
5. ✅ 图片全部可加载（`loading="lazy"` + `onerror` 兜底）
6. ✅ CTA/联系入口可点击（链接不写死用 `href="#"`+ 引导语）
7. ✅ 用 obsutil 上传后 `curl -I` 验证 200

## 四、参考资源

| 资源 | 位置 | 说明 |
|------|------|------|
| tokens.css (权威源) | `skill-present/lib/theme/tokens.css` | 139个CSS变量双主题系统 |
| day2am.css | `skill-present/lesson/hundun-aiceo/course/day2/day2am.css` | day2 课件设计体系 |
| RSI v2 报告 (参考) | `skill-present/lesson/harness-evolution/landing/index.html` | 66KB 最佳实践 |
| 七层架构图 | `storage/archive/demo/theme1/theme1-explode-7layer.png` | 标准架构图 |
| client-proposal-craft | 本地技能 `communication/client-proposal-craft` | 客户方案方法论 |
| skill-storage | `/opt/data/skills/skill-storage/` | CDN 发布引擎 |

## 五、快速启动模板

```html
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>报告标题 · Fmode</title>
  <style>
    /* 1. 主题变量 */
    :root, [data-theme="dark"] { /* ... */ }
    [data-theme="light"] { /* ... */ }
    
    /* 2. 重置+基础 */
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:system-ui,-apple-system,sans-serif; }
    
    /* 3. 布局 */
    .block { ... }
    .block.alt { ... }
    
    /* 4. 卡片组件 */
    .card { ... }
    
    /* 5. 响应式 */
    @media (max-width:768px) { ... }
  </style>
</head>
<body>
  <!-- Hero 区 -->
  <!-- Sections... -->
  <!-- CTA 区 -->
  <!-- Footer -->
  <script>/* 主题切换 + 滚动监听 */</script>
</body>
</html>
```

## 六、CC 执行指引

派发 CC 做报告时，在任务书中写明：

```
1. 在 skill-present 项目根目录启动（读到 CLAUDE.md + tokens.css）
2. 主题用 lib/theme/tokens.css 的 CSS 变量体系
3. 13段交替结构（hero + 10个section + cta + footer）
4. 双主题（dark/light）必须实现并验证
5. 图片用 <img loading="lazy">
6. 做完后 node 方式上传到 s3（参考 uploader 用法）
7. curl 验证 200 才算完成
```