|
|
@@ -0,0 +1,205 @@
|
|
|
+---
|
|
|
+name: skill-report-html
|
|
|
+description: 系统级。咨询师级HTML长页报告排版+发布SOP，搭配skill-storage发s3.fmode.cn。
|
|
|
+schema_version: 0.1.0
|
|
|
+level: system
|
|
|
+category: publishing
|
|
|
+keywords:
|
|
|
+ - html-report
|
|
|
+ - long-page
|
|
|
+ - proposal
|
|
|
+ - landing-page
|
|
|
+ - publishing
|
|
|
+ - s3-cdn
|
|
|
+depends_on:
|
|
|
+ - skill-storage
|
|
|
+platforms:
|
|
|
+ - hermes-agent
|
|
|
+ - fmode-agent
|
|
|
+tags:
|
|
|
+ - hermes-agent
|
|
|
+ - fmode-agent
|
|
|
+ - consultant
|
|
|
+---
|
|
|
+
|
|
|
+# 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 | Hermes 技能 `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 才算完成
|
|
|
+```
|
