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 变量实现深色/浅色双主题切换：

/* 深色主题（默认） */
[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 切换只需一条：

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 链接：

# 用 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

发布检查清单：

✅ 所有外部资源内联（图片可外链，CSS必须内联）
✅ file:// 打开正常（无跨域请求）
✅ 双主题都测试了（切换主题无样式断裂）
✅ 手机上预览了（无横向滚动）
✅ 图片全部可加载（loading="lazy" + onerror 兜底）
✅ CTA/联系入口可点击（链接不写死用 href="#"+ 引导语）
✅ 用 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 发布引擎

五、快速启动模板

<!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 才算完成

SKILL.md 7.2 KB Permalink Lịch sử Raw