Article To Html

Name: Article To Html
Author: ceeon

ceeon/openclaw-article-to-image

7 installs
43 repo stars
Updated March 19, 2026
ceeon/openclaw-article-to-image

Converts an article or notes into a mobile-readable HTML infographic with content-matched visual style, then post-processes and screenshots it for delivery.

About

Transforms articles into self-contained HTML infographics by extracting the core argument, freely designing a mobile-first visual style, then running a mandatory post-process script before screenshot delivery. A developer uses it to turn writing into shareable single-image visuals.

Content-driven visual design with 9 style-inspiration references
Mandatory post-process script plus Chrome DevTools screenshot flow

Article To Html by the numbers

7 all-time installs (skills.sh)
Ranked #1,085 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Jul 30, 2026 (Skillselion catalog sync)

npx skills add https://github.com/ceeon/openclaw-article-to-image --skill article-to-html

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/ceeon/openclaw-article-to-image/article-to-html.svg)](https://skillselion.com/skills/ceeon/openclaw-article-to-image/article-to-html)

Installs	7
repo stars	★ 43
Last updated	March 19, 2026
Repository	ceeon/openclaw-article-to-image ↗

What it does

Converts an article or notes into a mobile-readable HTML infographic with content-matched visual style, then post-processes and screenshots it for delivery.

Files

SKILL.mdMarkdownGitHub ↗

文章转 HTML 信息图

文章 → 提炼核心信息 → 生成 HTML 信息图 → 后处理 → 截图交付。

设计理念

你是设计师，不是模板填充机。 根据文章内容自由设计视觉风格，不要每次都用同一个模板。

内容决定形式 — 严肃分析用深色/衬线，轻松科普用手账/波普，技术教程用终端/蓝图
信息精炼 — 一张图讲清一个核心论点 + 3-4 个支撑模块，不是把文章全文塞进去
手机第一 — 图片在手机上缩放 3 倍，字号必须够大（详见 rules/01-技术底线.md）
每次不同 — 配色、字体、布局每次都应该有变化，避免千篇一律

工作流程

用户给文章
    ↓
① 内容分析 — 提取核心论点、关键数据、对比维度、避坑要点、金句
    ↓
② 自由设计 — 根据内容调性，自主决定视觉风格、配色、布局
              （可参考 rules/03-风格灵感.md 和 templates/ 获取灵感）
    ↓
③ 生成 HTML — 自包含 HTML，必须遵守 rules/01-技术底线.md
    ↓
④ 后处理 — 生成后立即执行：
              bash ~/.openclaw/skills/article-to-html/scripts/post-process.sh <html文件>
    ↓
⑤ 截图交付 — 按 rules/02-截图流程.md 执行

步骤④ 是强制的。 无论你对自己生成的 HTML 多有信心，都必须跑后处理脚本。

目录结构

目录/文件	地位	说明
`rules/01-技术底线.md`	必读	字号、宽度、overflow 等硬性约束
`rules/02-截图流程.md`	必读	Chrome DevTools 截图 5 步流程
`rules/03-风格灵感.md`	参考	9 种风格的配色/字体/特征，用于激发灵感
`templates/`	参考	9 个 HTML 模板，可浏览获取灵感，不要照抄
`scripts/post-process.sh`	工具	一键后处理（fix CSS + 注入字号兜底）
`scripts/fix-html.js`	工具	CSS 修复脚本（被 post-process.sh 调用）

<!-- input: 无 output: 用户理解如何使用此 skill pos: 新用户首读文档

架构守护者：一旦我被修改，请同步更新： 1. 本文件的头部注释 2. SKILL.md 索引 -->

快速开始

使用方法

直接给 openclaw 发消息：

把这篇文章转成小红书信息图：

[粘贴文章内容]

或者：

帮我把这段笔记做成信息图 HTML：

[粘贴笔记内容]

输出

生成一个自包含的 HTML 文件，保存在当前对话的工作目录下。

文件名格式：infographic-{主题简称}.html
所有样式内嵌，无外部依赖
浏览器打开即可预览

截图方法

方法 1：浏览器截图

1. 用浏览器打开生成的 HTML 文件 2. 使用浏览器开发者工具调整视口为 1080×1440 3. 截图保存

方法 2：命令行截图（推荐）

如果配置了 Chrome DevTools MCP：

帮我截图这个 HTML

openclaw 会自动调用 Chrome 打开并截图。

自定义

生成后如果需要微调：

改文字: 直接编辑 HTML 中的文本
改颜色: 搜索色值替换（见设计规范）
改布局: 调整 CSS grid 或 flex 属性
改尺寸: 修改 .container 的 width/height

<!-- input: 无 output: 设计规范参考 pos: 生成 HTML 时的视觉标准

架构守护者：一旦我被修改，请同步更新： 1. 本文件的头部注释 2. SKILL.md 索引 -->

设计规范

核心美学：实验室精密手册 × 波普实验

像一本高精度的实验室操作手册，但注入了波普艺术的张力。

关键词: 精密、高密度、坐标感、数据驱动、工业美学

色彩系统

主色板

角色	色值	用途	面积占比
背景	`#F2F2F2`	灰白底/蓝图网格	60%
功能块	`#B8D8BE`	信息模块背景	20%
警告/最佳	`#E91E63`	仅用于最重要的 1-2 处	3%
关键词	`#FFF200`	荧光笔标记效果	5%
线条	`#2D2926`	网格、坐标、分隔线	5%
辅助	`#3A7BD5`	次要数据、链接	7%

色彩规则

荧光粉（#E91E63）严格限制使用，仅用于「避坑」「最佳选择」「关键警告」
不允许出现色板以外的颜色
绿色块和黄色标记可以叠加使用

网格系统

┌─────────────────────────────────┐
│  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊   │  ← 极细网格线 0.5px #E0E0E0
│  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊   │
│  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊   │
│──┊──┊──┊──┊──┊──┊──┊──┊──┊───│  ← 主网格线 1px #D0D0D0
│  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊   │
│  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊  ┊   │
└─────────────────────────────────┘

背景使用 CSS 绘制的蓝图网格（repeating-linear-gradient）
小网格间距 20px，大网格间距 100px
网格线颜色 #E0E0E0（小）/ #D0D0D0（大）

坐标标签

每个模块左上角必须有坐标标签：

<span class="coord">A-01</span>

样式：

字体: monospace, 10px
颜色: #999
位置: 模块内左上角
格式: {字母}-{两位数字}（A-01, B-05, C-12）

模块卡片

.module {
  background: rgba(184, 216, 190, 0.3);  /* 半透明绿 */
  border: 1px solid #2D2926;
  border-radius: 2px;                     /* 极小圆角 */
  padding: 16px;
  position: relative;
}

排版层级

层级	字号	字重	用途
H1	36-48px	900	主标题，一页只有一个
H2	20-24px	700	模块标题
数据	28-36px	800	关键数字
正文	14-16px	400	说明文字
标注	10-12px	400	坐标、脚注、元数据

特殊元素

荧光笔标记

.highlight {
  background: linear-gradient(transparent 60%, #FFF200 60%);
  padding: 0 2px;
}

避坑警告块

.warning {
  background: #1a1a1a;
  color: #E91E63;
  border-left: 4px solid #E91E63;
  padding: 12px;
  font-weight: 700;
}

数据强调

.data-point {
  font-size: 32px;
  font-weight: 800;
  color: #3A7BD5;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

Article-to-HTML

OpenClaw Skill：将文章/推文转化为手机可读的 HTML 信息图，自动匹配视觉风格，截图即用。

效果

给 bot 发一个链接或一段文字，自动生成信息图：

文生图 https://x.com/xxx/status/xxx

特点

AI 自由设计 — 不套模板，根据内容调性自动选择视觉方向
手机适配 — 1080px 画布，字号 ×3 设计，手机上清晰可读
后处理兜底 — 自动修复 CSS 边距、溢出、字号等常见问题
9 种灵感方向 — 商务简报、暗色科技、杂志编辑、手账笔记、报纸新闻等

文件结构

├── SKILL.md                 # 入口：工作流 + 设计理念
├── rules/
│   ├── 01-技术底线.md        # 字号、宽度、overflow 硬约束
│   ├── 02-截图流程.md        # Chrome DevTools 截图步骤
│   └── 03-风格灵感.md        # 9 种视觉方向灵感参考
├── scripts/
│   ├── fix-html.js          # CSS 后处理修复
│   └── post-process.sh      # 一键后处理（fix + 字号兜底）
├── templates/               # 9 个 HTML 模板（灵感参考）
└── docs/                    # 快速开始、设计规范

安装

复制到 OpenClaw skills 目录：

cp -r . ~/.openclaw/skills/article-to-html

技术底线

生成的 HTML 必须遵守：

规则	值
容器宽度	`width: 1080px`（不用 max-width）
容器高度	`min-height: 1440px`（不用 height）
H1 字号	≥ 72px
正文字号	≥ 30px
最大栏数	2 栏
overflow	禁止 hidden

详见 rules/01-技术底线.md。

License

MIT

<!-- input: 无 output: HTML 生成时的技术硬约束 pos: 核心规则，每次生成 HTML 前必读

架构守护者：一旦我被修改，请同步更新： 1. 本文件的头部注释 2. SKILL.md 的目录结构表 -->

技术底线

以下是经过实际测试验证的硬性要求。设计可以自由发挥，但技术底线不可突破。

必须包含的 CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 0; padding: 0; }

.container {
  width: 1080px;        /* 固定宽度，不用 max-width */
  min-height: 1440px;   /* 用 min-height，不用 height */
  padding: 48px;        /* 不超过 60px */
  margin: 0;            /* 不用 margin: 0 auto */
}

字号（1080px 画布，手机缩放 ~3x）

元素	最小	推荐
H1 主标题	72px	80px
H2 模块标题	44px	48px
正文	30px	32-34px
关键数据	64px	72px
标签/脚注	24px	26px

布局

最多 2 栏，禁止 3 栏以上
单栏优先，双栏仅用于并列对比
4-5 个模块，不超过 6 个
模块间距 gap ≥ 24px

禁止

写法	后果
`body { padding: 40px }`	四周大白边
`container { max-width: 800px; margin: 0 auto }`	两侧空白
`overflow: hidden`	底部内容被截
`height: 1440px`（固定）	内容溢出被切
`display: flex` 在 body 上	container 不贴边
CSS columns	手机上栏太窄
正文 < 30px	手机上看不清

<!-- input: 生成的 HTML 文件路径 output: PNG 截图文件 pos: 截图交付流程

架构守护者：一旦我被修改，请同步更新： 1. 本文件的头部注释 2. SKILL.md 的目录结构表 -->

截图流程

方案 A：HTTP 服务 + Chrome DevTools（推荐）

不要用 `file://` 协议，会被浏览器安全策略拦截。必须通过 HTTP 服务打开。

□ 0. 启动临时 HTTP 服务（如果没有在跑的）
   在 HTML 所在目录启动：
   python3 -m http.server 8899 --directory <html所在目录> &

   然后用 http://localhost:8899/文件名.html 打开

□ 1. 打开页面
   mcp: new_page → url: http://localhost:8899/xxx.html

□ 2. 清除背景和边距
   mcp: evaluate_script →
   () => {
     document.body.style.cssText = 'background:transparent;padding:0;margin:0;display:block;min-height:auto';
     const c = document.querySelector('.container');
     if (c) c.style.margin = '0';
     return 'done';
   }

□ 3. 读取尺寸 + 设置视口
   mcp: evaluate_script →
   () => {
     const c = document.querySelector('.container');
     if (c) return { width: c.scrollWidth, height: c.scrollHeight };
     return { width: 1080, height: 1440 };
   }
   → mcp: resize_page(width, height)

□ 4. 截图（用 PNG 不用 JPG）
   mcp: take_screenshot → fullPage: true, format: "png", filePath: 输出路径.png

□ 5. 关闭页面
   mcp: close_page

常见坑

问题	原因	解法
`file://` 被拦截	浏览器安全策略	用 HTTP 服务（步骤 0）
device signature invalid	CLI 与 gateway 签名不匹配	不用管，走 gateway 内置 browser tool
截图是 JPG 模糊	默认格式不对	指定 `format: "png"`
字体没加载	Google Fonts 需要时间	截图前等 2 秒
残留进程报错	上次没关干净	`pkill -f "chrome-devtools-mcp"`

方案 B：手动截图

1. 浏览器打开 HTML
2. F12 → 设备模拟 → 自定义 1080 × {高度}
3. Cmd+Shift+P → "Capture full size screenshot"

<!-- input: 文章内容/调性 output: 视觉设计灵感 pos: 灵感参考，不是必须照抄的模板

架构守护者：一旦我被修改，请同步更新： 1. 本文件的头部注释 2. SKILL.md 的目录结构表 -->

风格灵感库

这不是模板清单。 是 9 种经过测试的视觉方向，用于激发灵感。

你可以混搭、变形、创造全新风格。唯一约束是 01-技术底线.md。

调性 → 方向映射

文章调性	适合的视觉方向
技术/编程	深色底 + 等宽字体 + 霓虹色数据
行业分析	衬线标题 + 大留白 + 克制配色
B端决策	蓝色系 + KPI卡片 + 进度条
学习笔记	暖色 + 手写感 + 卡片/清单
年轻活泼	撞色 + 粗边框 + 几何装饰
极客趣味	复古终端 + 像素感 + 仪表盘

9 种参考方向

商务简报

深蓝 header、编号 section、KPI 卡片、蓝色进度条。DM Sans + Noto Sans SC。

暗色科技

深色底 #0A0A0F、霓虹绿 #00FFB2、扫描线、终端美学。IBM Plex Mono。

手账笔记

纸色底、彩色便签卡片、横线纹理、胶带装饰、微旋转。ZCOOL KuaiLe。

实验室蓝图

灰白网格底、鼠尾草绿色块、荧光粉警告、monospace 标注。

杂志编辑

暖白底、衬线大标题、大留白、红色下划线强调、引号金句区。Playfair Display。

孟菲斯波普

明黄+珊瑚红+电蓝撞色、粗黑边框 3px+、硬阴影偏移、几何装饰。Rubik。

报纸新闻

纸色底、纯黑+极少红、衬线标题、粗细规则线、三线表。Playfair + Lora。

极简北欧

暖白底、苔绿+赤陶+浅木自然色、大留白、圆角卡片、1px 细线。Outfit。

复古未来

深棕底、琥珀色+绿磷光、CRT 扫描线、圆角面板、LED 指示灯。Space Mono。

templates/ 目录

每种方向有一个完整 HTML 文件可供浏览：

templates/style-business.html
templates/style-dark-tech.html
templates/style-journal.html
templates/style-lab-blueprint.html
templates/style-magazine.html
templates/style-memphis.html
templates/style-newspaper.html
templates/style-nordic.html
templates/style-retro-future.html

用法：浏览这些文件获取 CSS 技巧和布局灵感，然后根据当前文章内容自由创作。

#!/usr/bin/env node
/**
 * 信息图 HTML 后处理脚本
 * 修复模型生成时常见的 CSS 问题：大边距、坐标可见、字号太小、overflow 截断
 *
 * 用法：node fix-html.js <html文件路径>
 * 或：  node fix-html.js <目录>  （批量修复目录下所有 .html）
 */

const fs = require('fs');
const path = require('path');

function fixHTML(filePath) {
  let html = fs.readFileSync(filePath, 'utf-8');
  let fixes = [];

  // 1. 强制 body 无边距
  if (html.includes('<body')) {
    // 移除 body 上的 padding/margin 样式
    html = html.replace(
      /body\s*\{([^}]*)\}/g,
      (match, content) => {
        let fixed = content
          .replace(/padding\s*:\s*[^;]+;?/g, 'padding:0;')
          .replace(/margin\s*:\s*[^;]+;?/g, 'margin:0;')
          .replace(/display\s*:\s*flex\s*;?/g, '')
          .replace(/justify-content\s*:\s*center\s*;?/g, '')
          .replace(/align-items\s*:\s*[^;]+;?/g, '')
          .replace(/min-height\s*:\s*100vh\s*;?/g, '');
        fixes.push('body: 清除 padding/margin/flex');
        return `body{${fixed}background:transparent;margin:0;padding:0;}`;
      }
    );
  }

  // 2. 强制 .coord 隐藏
  if (!html.includes('.coord') || !html.includes('display: none') && !html.includes('display:none')) {
    html = html.replace(
      '</style>',
      '.coord{display:none!important;}\n</style>'
    );
    fixes.push('.coord: 强制 display:none');
  }
  // 确保已有的 .coord 规则是 display:none
  html = html.replace(
    /\.coord\s*\{([^}]*)\}/g,
    '.coord{display:none!important;}'
  );

  // 3. container: 强制 width:1080px, 移除 max-width, 移除 overflow:hidden, 修复 margin/padding
  html = html.replace(
    /\.container\s*\{([^}]*)\}/g,
    (match, content) => {
      let fixed = content
        .replace(/overflow\s*:\s*hidden\s*;?/g, '')
        .replace(/(?<!\-)height\s*:\s*1440px\s*;?/g, 'min-height:1440px;')
        .replace(/margin\s*:\s*0\s+auto\s*;?/g, 'margin:0;')
        .replace(/margin\s*:\s*auto\s*;?/g, 'margin:0;')
        // 关键修复：max-width 替换为 width:1080px
        .replace(/max-width\s*:\s*\d+px\s*;?/g, 'width:1080px;')
        // 如果没有 width 声明，加上
        .replace(/width\s*:\s*(?!1080)\d+px\s*;?/g, 'width:1080px;');

      // 确保有 width:1080px
      if (!fixed.includes('width:1080px') && !fixed.includes('width: 1080px')) {
        fixed = 'width:1080px;' + fixed;
        fixes.push('container: 强制添加 width:1080px');
      }

      // 检查 padding 是否过大（>60px）
      const paddingMatch = fixed.match(/padding\s*:\s*(\d+)px/);
      if (paddingMatch && parseInt(paddingMatch[1]) > 60) {
        fixed = fixed.replace(/padding\s*:\s*\d+px/, 'padding:48px');
        fixes.push(`container: padding ${paddingMatch[1]}px → 48px`);
      }

      fixes.push('container: 修复 width/overflow/margin');
      return `.container{${fixed}}`;
    }
  );

  // 4. 移除 body 上的 padding 内联样式
  html = html.replace(
    /(<body[^>]*style="[^"]*)(padding\s*:\s*[^;"]+;?)/g,
    '$1padding:0;'
  );

  fs.writeFileSync(filePath, html, 'utf-8');
  console.log(`✅ ${path.basename(filePath)}: ${fixes.length} fixes`);
  fixes.forEach(f => console.log(`   - ${f}`));
}

// 入口
const target = process.argv[2];
if (!target) {
  console.log('用法: node fix-html.js <html文件或目录>');
  process.exit(1);
}

const stat = fs.statSync(target);
if (stat.isDirectory()) {
  const files = fs.readdirSync(target).filter(f => f.endsWith('.html') && f !== 'gallery.html');
  files.forEach(f => fixHTML(path.join(target, f)));
  console.log(`\n共修复 ${files.length} 个文件`);
} else {
  fixHTML(target);
}

#!/bin/bash
# 信息图 HTML 后处理 + 截图一键脚本
# 用法: bash post-process.sh <html文件路径> [输出图片路径]
#
# 功能：
# 1. 运行 fix-html.js 修复 CSS（边距、宽度、coord、overflow）
# 2. 注入运行时 CSS 覆盖（字号兜底放大）
# 3. 截图输出 PNG

set -e

HTML_FILE="$1"
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
OUTPUT="${2:-${HTML_FILE%.html}.png}"

if [ -z "$HTML_FILE" ]; then
  echo "用法: bash post-process.sh <html文件> [输出图片路径]"
  exit 1
fi

export PATH="/opt/homebrew/bin:$HOME/Library/pnpm:$PATH"

# Step 1: fix-html.js 修复 CSS
echo "→ Step 1: fix-html.js"
node "$SCRIPT_DIR/fix-html.js" "$HTML_FILE"

# Step 2: 注入运行时字号兜底
echo "→ Step 2: 注入字号兜底 CSS"

if ! grep -q "POST-PROCESS" "$HTML_FILE"; then
  python3 -c "
import sys
html = open(sys.argv[1]).read()
css = '''/* === POST-PROCESS: 字号兜底 === */
.container { font-size: max(14px, 1em); }
.container h1, .container [class*=\"title\"]:first-child { font-size: max(48px, 1em) !important; }
.container h2, .container h3 { font-size: max(28px, 1em) !important; }
.container p, .container li, .container td { font-size: max(20px, 0.9em) !important; }
.container .coord { display: none !important; }
'''
html = html.replace('</style>', css + '</style>', 1)
open(sys.argv[1], 'w').write(html)
print('   注入完成')
" "$HTML_FILE"
else
  echo "   已注入过，跳过"
fi

echo "→ 完成: $HTML_FILE"
echo "→ 可用 Chrome DevTools 截图，或浏览器打开查看"

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息图模板</title>
<style>
  /* ========== RESET & BASE ========== */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', sans-serif;
  }

  /* ========== CONTAINER: 3:4 PORTRAIT ========== */
  .container {
    width: 1080px;
    height: 1440px;
    background-color: #F2F2F2;
    /* 蓝图网格 */
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 19px, #E8E8E8 19px, #E8E8E8 20px),
      repeating-linear-gradient(90deg, transparent, transparent 19px, #E8E8E8 19px, #E8E8E8 20px),
      repeating-linear-gradient(0deg, transparent, transparent 99px, #DBDBDB 99px, #DBDBDB 100px),
      repeating-linear-gradient(90deg, transparent, transparent 99px, #DBDBDB 99px, #DBDBDB 100px);
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ========== COORD LABEL (hidden, code-level marker only) ========== */
  .coord {
    display: none;
  }

  /* ========== HEADER ========== */
  .header {
    text-align: center;
    padding: 20px 0 10px;
    position: relative;
  }
  .header h1 {
    font-size: 42px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 2px;
    line-height: 1.3;
  }
  .header .subtitle {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    font-family: 'SF Mono', monospace;
    letter-spacing: 2px;
  }

  /* ========== MODULE CARD ========== */
  .module {
    background: rgba(184, 216, 190, 0.25);
    border: 1px solid #2D2926;
    border-radius: 2px;
    padding: 20px 20px 16px;
    position: relative;
  }
  .module h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-left: 0;
  }

  /* ========== GRID LAYOUTS ========== */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  .grid-4col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }

  /* ========== BRAND MATRIX (MOD-1) ========== */
  .brand-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    transition: all 0.2s;
  }
  .brand-card.best {
    border: 2px solid #E91E63;
    background: rgba(233, 30, 99, 0.08);
  }
  .brand-card .name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .brand-card .meta {
    font-size: 12px;
    color: #666;
  }

  /* ========== SCALE BAR (MOD-2) ========== */
  .scale-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 12px 0;
  }
  .scale-segment {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
  }
  .scale-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    font-family: monospace;
  }

  /* ========== WARNING (MOD-5) ========== */
  .warning {
    background: #1a1a1a;
    color: #E91E63;
    border-left: 4px solid #E91E63;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 2px;
    position: relative;
  }
  .warning .coord { color: #555; }
  .warning ul {
    list-style: none;
    padding: 0;
  }
  .warning li {
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
  }
  .warning li::before {
    content: "⚠";
    position: absolute;
    left: 0;
  }

  /* ========== DATA TABLE (MOD-6) ========== */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .data-table th {
    background: #2D2926;
    color: #fff;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
  }
  .data-table tr:nth-child(even) td {
    background: rgba(184, 216, 190, 0.15);
  }

  /* ========== STATUS BAR (MOD-7) ========== */
  .status-bar {
    display: flex;
    gap: 0;
  }
  .status-item {
    flex: 1;
    padding: 12px;
    text-align: center;
    border-right: 1px solid #ccc;
    background: rgba(255,255,255,0.5);
  }
  .status-item:last-child { border-right: none; }
  .status-item .value {
    font-size: 28px;
    font-weight: 800;
    color: #3A7BD5;
    font-family: 'SF Mono', monospace;
  }
  .status-item .label {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
  }

  /* ========== UTILITY ========== */
  .highlight {
    background: linear-gradient(transparent 60%, #FFF200 60%);
    padding: 0 2px;
  }
  .pink { color: #E91E63; font-weight: 700; }
  .blue { color: #3A7BD5; font-weight: 700; }
  .data-point {
    font-size: 32px;
    font-weight: 800;
    color: #3A7BD5;
    font-family: 'SF Mono', monospace;
  }
  .tag {
    display: inline-block;
    background: #2D2926;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 1px;
    letter-spacing: 1px;
    font-family: monospace;
  }
  .divider {
    border: none;
    border-top: 0.5px solid #bbb;
    margin: 4px 0;
  }

  /* ========== FOOTER ========== */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #999;
    font-family: monospace;
    padding-top: 8px;
    border-top: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="container">

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <h1>【主标题：替换为文章核心主题】</h1>
    <div class="subtitle">INFOGRAPHIC · DATA SHEET · v1.0</div>
  </div>

  <!-- MOD-1: 品牌矩阵 -->
  <div class="module">
    <span class="coord">A-01</span>
    <h2>核心选项一览</h2>
    <div class="grid-3col">
      <div class="brand-card">
        <div class="name">选项 A</div>
        <div class="meta">说明文字</div>
      </div>
      <div class="brand-card best">
        <div class="name">选项 B ★</div>
        <div class="meta">最佳选择</div>
      </div>
      <div class="brand-card">
        <div class="name">选项 C</div>
        <div class="meta">说明文字</div>
      </div>
      <div class="brand-card">
        <div class="name">选项 D</div>
        <div class="meta">说明文字</div>
      </div>
      <div class="brand-card">
        <div class="name">选项 E</div>
        <div class="meta">说明文字</div>
      </div>
      <div class="brand-card">
        <div class="name">选项 F</div>
        <div class="meta">说明文字</div>
      </div>
    </div>
  </div>

  <!-- MOD-2: 规格标尺 -->
  <div class="module">
    <span class="coord">B-05</span>
    <h2>关键维度对比</h2>
    <div class="scale-bar">
      <div class="scale-segment" style="flex:3; background:#B8D8BE; color:#1a1a1a;">入门 30%</div>
      <div class="scale-segment" style="flex:5; background:#3A7BD5;">进阶 50%</div>
      <div class="scale-segment" style="flex:2; background:#E91E63;">专业 20%</div>
    </div>
    <div class="scale-label">
      <span>0</span><span>|</span><span>|</span><span>|</span><span>MAX</span>
    </div>
  </div>

  <!-- MOD-3 + MOD-4: 双栏 -->
  <div class="grid-2col">
    <!-- MOD-3: 深度剖析 -->
    <div class="module">
      <span class="coord">C-12</span>
      <h2>深度剖析</h2>
      <p style="font-size:14px; color:#333; line-height:1.8;">
        核心观点描述。使用 <span class="highlight">荧光笔标记</span> 突出关键信息。
        数据支撑：<span class="data-point">87%</span> 的用户认为此方案有效。
      </p>
    </div>

    <!-- MOD-4: 场景对比 -->
    <div class="module">
      <span class="coord">D-03</span>
      <h2>场景对比</h2>
      <div style="font-size:14px; line-height:1.8;">
        <div style="padding:8px 0; border-bottom:0.5px solid #ccc;">
          <span class="tag">场景A</span>
          <span style="margin-left:8px;">适合新手，上手快</span>
        </div>
        <div style="padding:8px 0; border-bottom:0.5px solid #ccc;">
          <span class="tag">场景B</span>
          <span style="margin-left:8px;">适合进阶，灵活度高</span>
        </div>
        <div style="padding:8px 0;">
          <span class="tag">场景C</span>
          <span style="margin-left:8px;">适合专业，深度定制</span>
        </div>
      </div>
    </div>
  </div>

  <!-- MOD-5: 避坑警告 -->
  <div class="warning">
    <span class="coord">E-08</span>
    <h2 style="color:#E91E63; font-size:18px; margin-bottom:8px; padding-left:0;">⚠ 避坑指南</h2>
    <ul>
      <li>第一个常见错误：简要说明</li>
      <li>第二个常见错误：简要说明</li>
      <li>第三个常见错误：简要说明</li>
    </ul>
  </div>

  <!-- MOD-6: 速查表 -->
  <div class="module">
    <span class="coord">F-15</span>
    <h2>速查数据表</h2>
    <table class="data-table">
      <thead>
        <tr>
          <th>指标</th>
          <th>标准值</th>
          <th>推荐值</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>指标一</td>
          <td>100</td>
          <td class="blue">150+</td>
          <td>越高越好</td>
        </tr>
        <tr>
          <td>指标二</td>
          <td>50%</td>
          <td class="blue">80%</td>
          <td>行业均值 60%</td>
        </tr>
        <tr>
          <td>指标三</td>
          <td>3 天</td>
          <td class="pink">1 天</td>
          <td>关键瓶颈</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- MOD-7: 状态栏 -->
  <div class="module" style="padding:0;">
    <span class="coord">G-20</span>
    <div class="status-bar">
      <div class="status-item">
        <div class="value">6</div>
        <div class="label">核心模块</div>
      </div>
      <div class="status-item">
        <div class="value">3</div>
        <div class="label">避坑要点</div>
      </div>
      <div class="status-item">
        <div class="value">87%</div>
        <div class="label">有效率</div>
      </div>
      <div class="status-item">
        <div class="value">★</div>
        <div class="label">推荐指数</div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <span>Generated by openclaw · article-to-html</span>
    <span>REV 1.0 · 2026</span>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent认知：OS与Application</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  :root {
    --navy: #1B2A4A;
    --slate: #475569;
    --steel: #64748B;
    --sky: #E2E8F0;
    --ice: #F1F5F9;
    --white: #FFFFFF;
    --accent: #2563EB;
    --accent-light: #DBEAFE;
    --warn: #DC2626;
    --warn-light: #FEF2F2;
    --success: #059669;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #94A3B8;
    font-family: 'Noto Sans SC', 'DM Sans', sans-serif;
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: var(--white);
    position: relative;
    
    display: flex;
    flex-direction: column;
  }

  /* ===== HEADER ===== */
  .header-bar {
    background: var(--navy);
    padding: 56px 72px 48px;
    position: relative;
  }
  .header-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 72px;
    width: 80px;
    height: 6px;
    background: var(--accent);
  }
  .header-bar .tag {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    background: rgba(37,99,235,0.15);
    padding: 8px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .header-bar h1 {
    font-size: 72px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .header-bar .subtitle {
    font-size: 30px;
    font-weight: 300;
    color: var(--steel);
    line-height: 1.6;
  }

  /* ===== CONTENT ===== */
  .content-area {
    flex: 1;
    padding: 40px 72px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* ===== SECTION HEAD ===== */
  .sec-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
  }
  .sec-head .num {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sec-head h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--navy);
  }

  /* ===== KPI ROW ===== */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .kpi-card {
    background: var(--ice);
    border-radius: 12px;
    padding: 28px 24px;
    border-left: 5px solid var(--accent);
  }
  .kpi-card .label {
    font-size: 26px;
    font-weight: 500;
    color: var(--steel);
    margin-bottom: 10px;
  }
  .kpi-card .number {
    font-family: 'DM Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
  }
  .kpi-card .number .unit {
    font-size: 32px;
    font-weight: 400;
    color: var(--steel);
  }
  .kpi-card .desc {
    font-size: 24px;
    font-weight: 500;
    color: var(--slate);
    margin-top: 8px;
    line-height: 1.4;
  }

  /* ===== GRID ===== */
  .grid-60-40 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
  }

  /* ===== SPECTRUM LIST ===== */
  .spectrum {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .spectrum-item {
    background: var(--ice);
    border-radius: 12px;
    padding: 24px 28px;
    border-left: 5px solid var(--accent);
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .spectrum-item.mid { border-left-color: #93C5FD; }
  .spectrum-item.low { border-left-color: var(--sky); }
  .spectrum-item .s-left {
    min-width: 140px;
  }
  .spectrum-item .s-label {
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
  }
  .spectrum-item .s-en {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--steel);
    display: block;
    margin-top: 4px;
  }
  .spectrum-item .s-desc {
    font-size: 28px;
    color: var(--slate);
    line-height: 1.6;
  }
  .spectrum-item .s-tag {
    font-size: 22px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 8px;
  }
  .s-tag.high { background: #DCFCE7; color: #166534; }
  .s-tag.medium { background: #FEF9C3; color: #854D0E; }
  .s-tag.zero { background: #FEE2E2; color: #991B1B; }

  /* ===== CALLOUT ===== */
  .callout {
    background: var(--ice);
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--sky);
  }
  .callout p {
    font-size: 30px;
    color: var(--slate);
    line-height: 1.8;
  }
  .callout .em {
    color: var(--accent);
    font-weight: 700;
  }
  .callout .big-quote {
    font-family: 'DM Sans', 'Noto Sans SC', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--navy);
    display: block;
    margin: 16px 0;
    line-height: 1.4;
    font-style: italic;
    border-left: 4px solid var(--accent);
    padding-left: 20px;
  }
  .callout .sub {
    font-size: 26px;
    color: var(--steel);
    line-height: 1.6;
    margin-top: 12px;
  }

  /* ===== RISK BOX ===== */
  .risk-box {
    background: var(--warn-light);
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 28px 32px;
  }
  .risk-box .sec-head .num {
    background: #FEE2E2;
    color: var(--warn);
  }
  .risk-box .sec-head h2 { color: var(--warn); }
  .risk-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #FECACA;
    font-size: 30px;
    color: #7F1D1D;
    line-height: 1.6;
  }
  .risk-item:last-child { border-bottom: none; }
  .risk-item .idx {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: var(--warn);
    flex-shrink: 0;
  }

  /* ===== FOOTER ===== */
  .footer-bar {
    background: var(--ice);
    padding: 20px 72px;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    color: var(--steel);
    font-weight: 500;
    border-top: 1px solid var(--sky);
  }
</style>
</head>
<body>
<div class="container">

  <!-- HEADER -->
  <div class="header-bar">
    <span class="coord">SEC-00</span>
    <div class="tag">AGENT INSIGHT</div>
    <h1>Agent认知：OS与Application</h1>
    <div class="subtitle">垂类别做OS，Skill别当产品——围绕两个物理约束构建真壁垒</div>
  </div>

  <div class="content-area">

    <!-- MOD-1: KPI -->
    <div>
      <span class="coord">A-01</span>
      <div class="sec-head">
        <span class="num">01</span>
        <h2>核心数字</h2>
      </div>
      <div class="kpi-row">
        <div class="kpi-card">
          <div class="label">物理约束</div>
          <div class="number">2<span class="unit"> 个</span></div>
          <div class="desc">上下文容量 + 注意力带宽</div>
        </div>
        <div class="kpi-card">
          <div class="label">不可复制</div>
          <div class="number">3<span class="unit"> 样</span></div>
          <div class="desc">领域状态 · 基础设施 · 规模经济</div>
        </div>
        <div class="kpi-card">
          <div class="label">提供价值</div>
          <div class="number">2<span class="unit"> 种</span></div>
          <div class="desc">能力解锁 + 认知卸载</div>
        </div>
        <div class="kpi-card">
          <div class="label">演进光谱</div>
          <div class="number">3<span class="unit"> 层</span></div>
          <div class="desc">Prompt → Script → App</div>
        </div>
      </div>
    </div>

    <!-- MOD-2 + MOD-3: 光谱 + 结论 -->
    <div class="grid-60-40">
      <div>
        <span class="coord">B-05</span>
        <div class="sec-head">
          <span class="num">02</span>
          <h2>三层光谱：从指令到服务</h2>
        </div>
        <div class="spectrum">
          <div class="spectrum-item low">
            <div class="s-left">
              <div class="s-label">指令</div>
              <span class="s-en">Prompt</span>
            </div>
            <div>
              <div class="s-desc">给Agent点拨方向，活还是Agent干，带宽不减</div>
              <span class="s-tag zero">壁垒为零 · 文本可复制</span>
            </div>
          </div>
          <div class="spectrum-item mid">
            <div class="s-left">
              <div class="s-label">工具</div>
              <span class="s-en">Script</span>
            </div>
            <div>
              <div class="s-desc">外部代劳返回结果，带宽降低，但无外部状态</div>
              <span class="s-tag medium">壁垒低 · 逻辑可复现</span>
            </div>
          </div>
          <div class="spectrum-item">
            <div class="s-left">
              <div class="s-label">服务</div>
              <span class="s-en">Application</span>
            </div>
            <div>
              <div class="s-desc">外部代劳 + 持久状态 + 基础设施，不可复制</div>
              <span class="s-tag high">壁垒高 · 越用越厚</span>
            </div>
          </div>
        </div>
      </div>

      <div>
        <span class="coord">D-03</span>
        <div class="sec-head">
          <span class="num">03</span>
          <h2>核心结论</h2>
        </div>
        <div class="callout">
          <span class="big-quote">The best context is no context.</span>
          <p>好的Application让Agent OS更聪明，更聪明的OS更精准地调用Application</p>
          <p class="sub">这是<span class="em">认知共生</span>——通用智能与专精智能通过接口耦合，比各自单独运行都更强</p>
        </div>
      </div>
    </div>

    <!-- MOD-4: 避坑警告 -->
    <div class="risk-box">
      <span class="coord">E-08</span>
      <div class="sec-head">
        <span class="num">!</span>
        <h2>避坑警告</h2>
      </div>
      <div class="risk-item">
        <span class="idx">R1</span>
        <span><strong>垂类做OS是找死</strong> — 战场错、对手错、结局已定，OS层天然收敛到2-3家</span>
      </div>
      <div class="risk-item">
        <span class="idx">R2</span>
        <span><strong>Skill天花板是卖copy</strong> — 做得越好抄得越容易，接口背后什么都没有就是裸奔</span>
      </div>
      <div class="risk-item">
        <span class="idx">R3</span>
        <span><strong>领域状态 ≠ Memory</strong> — Memory是OS层课题，领域状态是业务上下文，是你的根据地</span>
      </div>
    </div>

  </div>

  <div class="footer-bar">
    <span>AGENT COGNITION · INSIGHT BRIEF</span>
    <span>OS × APPLICATION · 2026</span>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent认知：OS与Application · 暗色科技风</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #000;
    font-family: 'Noto Sans SC', sans-serif;
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: #0A0A0F;
    position: relative;
    
    padding: 52px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.008) 2px,
        rgba(255,255,255,0.008) 4px
      );
  }

  /* Glow line at top */
  .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 52px;
    right: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00FFB2, transparent);
  }

  /* ===== HEADER ===== */
  .header {
    padding: 8px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
  }
  .header .sys-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 24px;
    color: #00FFB2;
    letter-spacing: 2px;
    margin-bottom: 18px;
    opacity: 0.7;
  }
  .header .sys-line::before {
    content: '> ';
    opacity: 0.4;
  }
  .header h1 {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 72px;
    font-weight: 900;
    color: #EEEEF0;
    line-height: 1.25;
    letter-spacing: 1px;
  }
  .header h1 .glow {
    color: #00FFB2;
    text-shadow: 0 0 20px rgba(0,255,178,0.3);
  }
  .header .meta-row {
    display: flex;
    gap: 32px;
    margin-top: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 22px;
    color: #555;
  }
  .header .meta-row span::before {
    content: '//';
    margin-right: 6px;
    color: #333;
  }

  /* ===== MODULE (dark card) ===== */
  .module {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 28px 30px;
    position: relative;
  }
  .module::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #00FFB2;
    border-radius: 4px 0 0 4px;
    opacity: 0.6;
  }
  .module h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 26px;
    font-weight: 600;
    color: #00FFB2;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0.9;
  }

  .module.warn::before { background: #FF3366; }
  .module.warn h2 { color: #FF3366; }
  .module.blue::before { background: #3B82F6; }
  .module.blue h2 { color: #3B82F6; }

  /* ===== GRID ===== */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
  }

  /* ===== STATUS STRIP (MOD-1) ===== */
  .status-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
  }
  .stat-cell {
    background: rgba(0,255,178,0.04);
    border: 1px solid rgba(0,255,178,0.1);
    border-radius: 4px;
    padding: 22px 16px;
    text-align: center;
  }
  .stat-cell .val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 68px;
    font-weight: 700;
    color: #00FFB2;
    text-shadow: 0 0 15px rgba(0,255,178,0.25);
    line-height: 1;
    margin-bottom: 10px;
  }
  .stat-cell .val .suffix {
    font-size: 28px;
    font-weight: 400;
    color: #00FFB2;
    opacity: 0.5;
  }
  .stat-cell .lbl {
    font-size: 24px;
    color: #666;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 1px;
  }
  .stat-cell.alt {
    border-color: rgba(59,130,246,0.15);
    background: rgba(59,130,246,0.04);
  }
  .stat-cell.alt .val {
    color: #3B82F6;
    text-shadow: 0 0 15px rgba(59,130,246,0.25);
  }

  /* ===== MATRIX GRID (MOD-2) ===== */
  .matrix-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 22px 20px;
  }
  .matrix-card .name {
    font-weight: 700;
    color: #ccc;
    font-size: 32px;
    margin-bottom: 10px;
  }
  .matrix-card .desc {
    font-size: 26px;
    color: #666;
    line-height: 1.55;
  }
  .matrix-card.active {
    border-color: #00FFB2;
    background: rgba(0,255,178,0.05);
    box-shadow: 0 0 20px rgba(0,255,178,0.05);
  }
  .matrix-card.active .name { color: #00FFB2; }
  .matrix-card .badge {
    display: inline-block;
    background: #00FFB2;
    color: #0A0A0F;
    font-size: 18px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 10px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
  }
  .matrix-card .arrow {
    font-family: 'IBM Plex Mono', monospace;
    color: #333;
    font-size: 22px;
    margin-top: 10px;
  }

  /* ===== PROGRESS BAR (MOD-3) ===== */
  .bar-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bar-item {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .bar-label {
    font-size: 28px;
    color: #888;
    width: 190px;
    text-align: right;
    flex-shrink: 0;
  }
  .bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    
  }
  .bar-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #00FFB2, #00D4FF);
    box-shadow: 0 0 8px rgba(0,255,178,0.3);
  }
  .bar-fill.danger {
    background: linear-gradient(90deg, #FF3366, #FF6B6B);
    box-shadow: 0 0 8px rgba(255,51,102,0.3);
  }
  .bar-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 26px;
    color: #888;
    width: 56px;
    text-align: right;
  }
  .bar-note {
    font-size: 22px;
    color: #555;
    margin-top: 2px;
    padding-left: 210px;
    line-height: 1.4;
  }

  /* ===== DEEP DIVE (MOD-4) ===== */
  .deep-text {
    font-size: 30px;
    color: #888;
    line-height: 1.75;
    font-weight: 300;
  }
  .deep-text .hl {
    color: #00FFB2;
    font-weight: 500;
  }

  /* ===== WARNING (MOD-5) ===== */
  .warn-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .warn-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 28px;
    color: #999;
    line-height: 1.55;
  }
  .warn-item .icon {
    color: #FF3366;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 5px;
  }
  .warn-item strong { color: #FF6B6B; font-weight: 600; }

  /* ===== FOOTER ===== */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    color: #333;
    letter-spacing: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: auto;
  }
</style>
</head>
<body>
<div class="container">

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <div class="sys-line">SYS.INIT — AGENT COGNITION MODULE</div>
    <h1>Agent认知：<span class="glow">OS与Application</span></h1>
    <div class="meta-row">
      <span>物理约束 × 2</span>
      <span>不可复制 × 3</span>
      <span>价值维度 × 2</span>
    </div>
  </div>

  <!-- MOD-1: 核心数据 -->
  <div class="status-strip">
    <span class="coord">A-01</span>
    <div class="stat-cell">
      <div class="val">2<span class="suffix">个</span></div>
      <div class="lbl">物理约束</div>
    </div>
    <div class="stat-cell alt">
      <div class="val">3<span class="suffix">样</span></div>
      <div class="lbl">不可复制</div>
    </div>
    <div class="stat-cell">
      <div class="val">2<span class="suffix">种</span></div>
      <div class="lbl">价值维度</div>
    </div>
    <div class="stat-cell alt">
      <div class="val">3<span class="suffix">层</span></div>
      <div class="lbl">能力光谱</div>
    </div>
  </div>

  <!-- MOD-2: 三层光谱 Prompt → Script → Application -->
  <div class="module">
    <span class="coord">B-05</span>
    <h2>THREE-LAYER SPECTRUM</h2>
    <div class="grid-3col">
      <div class="matrix-card">
        <div class="name">Prompt 指令</div>
        <div class="desc">给Agent点拨方向，活还是Agent干，带宽不减。文本可复制，壁垒为零。</div>
        <div class="arrow">指路 →</div>
      </div>
      <div class="matrix-card">
        <div class="name">Script 工具</div>
        <div class="desc">外部代劳返回结果，带宽降低。但没有外部状态，逻辑可复现，壁垒低。</div>
        <div class="arrow">代劳 →</div>
      </div>
      <div class="matrix-card active">
        <div class="badge">TARGET</div>
        <div class="name">Application 服务</div>
        <div class="desc">外部代劳 + 持久状态 + 基础设施。带宽容量都大幅降低，不可复制。</div>
      </div>
    </div>
  </div>

  <!-- MOD-3: 两种价值 × 两个约束 -->
  <div class="module blue">
    <span class="coord">C-12</span>
    <h2>VALUE × CONSTRAINT</h2>
    <div class="bar-group">
      <div class="bar-item">
        <span class="bar-label">能力解锁</span>
        <div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>
        <span class="bar-val">破墙</span>
      </div>
      <div class="bar-note">→ 突破上下文容量：塞不进context的知识，Application在外面管</div>
      <div class="bar-item">
        <span class="bar-label">认知卸载</span>
        <div class="bar-track"><div class="bar-fill" style="width:90%"></div></div>
        <span class="bar-val">减负</span>
      </div>
      <div class="bar-note">→ 释放注意力带宽：领域推理搬到外部，干扰消失，每件事更准</div>
      <div class="bar-item">
        <span class="bar-label">容量约束</span>
        <div class="bar-track"><div class="bar-fill danger" style="width:75%"></div></div>
        <span class="bar-val">硬顶</span>
      </div>
      <div class="bar-note">→ Context有限容器，塞得越多性能越差</div>
      <div class="bar-item">
        <span class="bar-label">带宽约束</span>
        <div class="bar-track"><div class="bar-fill danger" style="width:70%"></div></div>
        <span class="bar-val">零和</span>
      </div>
      <div class="bar-note">→ 注意力在任务间打架，双手互搏两个都变形</div>
    </div>
  </div>

  <div class="grid-2col">
    <!-- MOD-4: 核心观点 -->
    <div class="module">
      <span class="coord">D-03</span>
      <h2>CORE INSIGHT</h2>
      <p class="deep-text">
        好的Application让Agent OS<span class="hl">变得更聪明</span>。法律App把推理搬走，注意力不再被干扰，其他事更准，于是更精准调用更多App——<span class="hl">认知共生飞轮</span>转起来了。<br><br>The best context is <span class="hl">no context</span>。Agent越轻，表现越好。
      </p>
    </div>

    <!-- MOD-5: 避坑警告 -->
    <div class="module warn">
      <span class="coord">E-08</span>
      <h2>WARNING</h2>
      <div class="warn-list">
        <div class="warn-item">
          <span class="icon">[!]</span>
          <span><strong>垂类做OS = 拿刀打坦克</strong>　拿领域知识跟OpenAI比推理能力，战场完全不同</span>
        </div>
        <div class="warn-item">
          <span class="icon">[!]</span>
          <span><strong>Skill无状态 = 裸奔</strong>　接口背后什么都没有，做得越好抄得越容易</span>
        </div>
        <div class="warn-item">
          <span class="icon">[!]</span>
          <span><strong>领域状态 ≠ Memory</strong>　Memory是OS层课题，领域状态是业务状态机</span>
        </div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <span>AGENT COGNITION · DARK-TECH</span>
    <span>OS × APPLICATION · 2026</span>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手账笔记风 · Agent认知：OS与Application</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&family=ZCOOL+KuaiLe&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #D4C5B2;
    font-family: 'Noto Sans SC', sans-serif;
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: #FDF6EC;
    position: relative;
    
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Ruled lines */
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 31px,
        rgba(180, 160, 130, 0.15) 31px,
        rgba(180, 160, 130, 0.15) 32px
      );
    background-position: 0 20px;
    /* Paper texture feel */
    box-shadow:
      inset 0 0 80px rgba(200,180,150,0.2),
      4px 4px 20px rgba(0,0,0,0.1);
  }

  /* Red margin line */
  .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 90px;
    width: 2px;
    height: 100%;
    background: rgba(220, 80, 80, 0.2);
    z-index: 1;
  }

  /* ===== TAPE ===== */
  .tape {
    position: absolute;
    width: 120px;
    height: 28px;
    background: rgba(255, 230, 150, 0.65);
    transform: rotate(-2deg);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .tape.t1 { top: 32px; right: 60px; transform: rotate(1.5deg); }
  .tape.t2 { top: 32px; left: 30px; transform: rotate(-3deg); width: 80px; }

  /* ===== HEADER ===== */
  .header {
    text-align: center;
    padding: 8px 0 12px;
    position: relative;
    z-index: 2;
  }
  .header .date {
    font-family: 'Caveat', cursive;
    font-size: 24px;
    color: #B8956A;
    margin-bottom: 6px;
  }
  .header h1 {
    font-family: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
    font-size: 62px;
    font-weight: 400;
    color: #3D2E1F;
    line-height: 1.3;
    position: relative;
    display: inline-block;
  }
  .header h1::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -6px;
    right: -6px;
    height: 16px;
    background: rgba(255, 200, 100, 0.4);
    z-index: -1;
    transform: rotate(-0.5deg);
  }
  .header .sub {
    font-size: 26px;
    color: #8B7355;
    margin-top: 6px;
    font-weight: 300;
  }

  /* ===== STICKY NOTE ===== */
  .sticky {
    background: #FFF8B8;
    padding: 18px 22px;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.08);
    position: relative;
    transform: rotate(-0.8deg);
  }
  .sticky.pink {
    background: #FFD6E0;
    transform: rotate(0.5deg);
  }
  .sticky.green {
    background: #D4EDBC;
    transform: rotate(-0.3deg);
  }
  .sticky.blue {
    background: #C8E6FF;
    transform: rotate(0.6deg);
  }
  .sticky h2 {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 34px;
    color: #3D2E1F;
    margin-bottom: 12px;
    font-weight: 400;
  }
  .sticky h2 .icon { margin-right: 6px; }

  /* ===== DOODLE BOX ===== */
  .doodle-box {
    border: 2px dashed #C4A882;
    border-radius: 8px;
    padding: 18px 22px;
    position: relative;
    background: rgba(255,255,255,0.4);
  }
  .doodle-box h2 {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 34px;
    color: #3D2E1F;
    margin-bottom: 12px;
    font-weight: 400;
  }

  /* ===== GRID ===== */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }

  /* ===== OPTION CARDS (三层光谱) ===== */
  .opt-card {
    background: rgba(255,255,255,0.6);
    border: 2px solid #DDD0C0;
    border-radius: 8px;
    padding: 18px 12px 14px;
    text-align: center;
    position: relative;
  }
  .opt-card .emoji {
    font-size: 36px;
    margin-bottom: 4px;
  }
  .opt-card .name {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 30px;
    color: #3D2E1F;
    margin-bottom: 6px;
  }
  .opt-card .meta {
    font-size: 22px;
    color: #8B7355;
    line-height: 1.5;
  }
  .opt-card.best {
    border-color: #E85D75;
    background: rgba(255, 214, 224, 0.3);
  }
  .opt-card.best::after {
    content: '壁垒高 🏆';
    position: absolute;
    top: -14px;
    right: 10px;
    background: #E85D75;
    color: #fff;
    font-size: 20px;
    padding: 3px 14px;
    border-radius: 12px;
    font-weight: 700;
  }
  .opt-card.low {
    border-color: #B8956A;
  }
  .opt-card.low::after {
    content: '壁垒零';
    position: absolute;
    top: -14px;
    right: 10px;
    background: #B8956A;
    color: #fff;
    font-size: 20px;
    padding: 3px 14px;
    border-radius: 12px;
    font-weight: 700;
  }
  .opt-card.mid {
    border-color: #D4A853;
  }
  .opt-card.mid::after {
    content: '壁垒低';
    position: absolute;
    top: -14px;
    right: 10px;
    background: #D4A853;
    color: #fff;
    font-size: 20px;
    padding: 3px 14px;
    border-radius: 12px;
    font-weight: 700;
  }

  /* ===== CHECKLIST ===== */
  .check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 24px;
    color: #5A4633;
    line-height: 1.5;
  }
  .check-item .box {
    width: 24px;
    height: 24px;
    border: 2.5px solid #C4A882;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    margin-top: 4px;
  }
  .check-item.done .box::after {
    content: '✓';
    position: absolute;
    top: -4px;
    left: 2px;
    font-size: 22px;
    color: #5B9A4B;
    font-weight: 700;
  }

  /* ===== COMPARISON ===== */
  .vs-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
  }
  .vs-side {
    padding: 14px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
  }
  .vs-side h3 {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 28px;
    color: #3D2E1F;
    margin-bottom: 10px;
    text-align: center;
  }
  .vs-side ul {
    list-style: none;
    padding: 0;
    font-size: 22px;
    color: #5A4633;
    line-height: 1.9;
  }
  .vs-side ul li::before {
    content: '• ';
    color: #C4A882;
  }
  .vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
  }
  .vs-divider span {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 32px;
    color: #E85D75;
    font-weight: 700;
  }

  /* ===== WARNING ===== */
  .warn-sticky {
    background: #FFD6D6;
    padding: 18px 22px;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.08);
    transform: rotate(0.4deg);
    position: relative;
  }
  .warn-sticky h2 {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 34px;
    color: #C0392B;
    margin-bottom: 10px;
    font-weight: 400;
  }
  .warn-sticky li {
    font-size: 24px;
    color: #6B3030;
    line-height: 1.7;
    list-style: none;
    padding-left: 30px;
    position: relative;
    margin-bottom: 4px;
  }
  .warn-sticky li::before {
    content: '✗';
    position: absolute;
    left: 4px;
    color: #C0392B;
    font-weight: 700;
  }

  /* ===== DATA CARD ===== */
  .data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #DDD0C0;
    font-size: 24px;
    color: #5A4633;
  }
  .data-row:last-child { border-bottom: none; }
  .data-row .key { font-weight: 300; white-space: nowrap; }
  .data-row .val { font-weight: 700; color: #3D2E1F; text-align: right; }
  .data-row .val.star { color: #E85D75; }

  /* ===== INSIGHT PAIR ===== */
  .insight-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .insight-item {
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
  }
  .insight-item .emoji-lg {
    font-size: 40px;
    margin-bottom: 4px;
  }
  .insight-item .title {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 28px;
    color: #2C4A6E;
    margin-bottom: 6px;
  }
  .insight-item .desc {
    font-size: 22px;
    color: #5A6E80;
    line-height: 1.6;
    text-align: left;
  }
  .insight-item .desc strong {
    background: rgba(255,230,100,0.5);
    padding: 0 4px;
  }

  /* ===== QUOTE BOX ===== */
  .quote-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .quote-box .eng {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: #B8956A;
    margin-bottom: 8px;
  }
  .quote-box .main-quote {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 34px;
    color: #3D2E1F;
    line-height: 1.5;
  }
  .quote-box .sub-quote {
    font-size: 24px;
    color: #8B7355;
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ===== FOOTER ===== */
  .footer {
    display: flex;
    justify-content: center;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: #B8956A;
    padding-top: 2px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="tape t1"></div>
  <div class="tape t2"></div>

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <div class="date">✎ Agent Cognition · Study Notes</div>
    <h1>Agent认知：OS与Application</h1>
    <div class="sub">垂类别做手机，要做手机上的应用</div>
  </div>

  <!-- MOD-1: 三层光谱 — Prompt / Script / Application -->
  <div class="sticky">
    <span class="coord">A-01</span>
    <h2><span class="icon">📌</span>三层光谱：从指令到服务</h2>
    <div class="grid-3col">
      <div class="opt-card low">
        <div class="emoji">💬</div>
        <div class="name">Prompt</div>
        <div class="meta">给 Agent 指路<br/>活还是它自己干</div>
      </div>
      <div class="opt-card mid">
        <div class="emoji">⚙️</div>
        <div class="name">Script</div>
        <div class="meta">外部代劳<br/>但无状态可复现</div>
      </div>
      <div class="opt-card best">
        <div class="emoji">🏗️</div>
        <div class="name">Application</div>
        <div class="meta">代劳 + 持久状态<br/>+ 基础设施</div>
      </div>
    </div>
  </div>

  <div class="grid-2col">
    <!-- MOD-2: 三样不可复制 -->
    <div class="sticky green">
      <span class="coord">B-05</span>
      <h2><span class="icon">✅</span>三样不可复制</h2>
      <div class="check-list">
        <div class="check-item done">
          <span class="box"></span>
          <span><strong>领域状态</strong>｜每次交互都在生长，从零追不上</span>
        </div>
        <div class="check-item done">
          <span class="box"></span>
          <span><strong>基础设施</strong>｜真金白银持续投入，复制代码拿不到</span>
        </div>
        <div class="check-item done">
          <span class="box"></span>
          <span><strong>规模经济</strong>｜十万用户摊成本，数学碾压</span>
        </div>
      </div>
    </div>

    <!-- MOD-3: OS vs Application -->
    <div class="doodle-box">
      <span class="coord">C-12</span>
      <h2>📊 OS vs Application</h2>
      <div class="vs-container">
        <div class="vs-side">
          <h3>Agent OS</h3>
          <ul>
            <li>命题：WHAT</li>
            <li>持有用户意图</li>
            <li>跨域上下文</li>
            <li>推理 + 编排</li>
          </ul>
        </div>
        <div class="vs-divider"><span>VS</span></div>
        <div class="vs-side">
          <h3>Application</h3>
          <ul>
            <li>命题：HOW</li>
            <li>持有领域状态</li>
            <li>业务历史</li>
            <li>认知卸载</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- MOD-4: 两个物理约束 -->
  <div class="sticky blue">
    <span class="coord">D-03</span>
    <h2><span class="icon">💡</span>两个物理约束（不是 bug，像光速一样不可消除）</h2>
    <div class="insight-pair">
      <div class="insight-item">
        <div class="emoji-lg">📦</div>
        <div class="title">上下文容量</div>
        <div class="desc">Context 是有限容器，<strong>塞得越多性能越差</strong>。装不下的领域知识，Application 在外面管着。</div>
      </div>
      <div class="insight-item">
        <div class="emoji-lg">🧠</div>
        <div class="title">注意力带宽</div>
        <div class="desc">像周伯通双手互搏——<strong>多任务争抢同一份注意力</strong>，每件事质量都下降。注意力是零和的。</div>
      </div>
    </div>
  </div>

  <!-- MOD-5: 踩坑提醒 -->
  <div class="warn-sticky">
    <span class="coord">E-08</span>
    <h2>⚠️ 踩坑提醒</h2>
    <ul>
      <li>垂类做 Agent OS：拿领域知识跟 OpenAI 比推理能力，是拿刀打坦克。OS 天然收敛，不会有几十个赢家</li>
      <li>Skill 裸奔：接口背后什么都没有。做得越好抄得越容易，天花板就是卖 copy</li>
    </ul>
  </div>

  <div class="grid-2col">
    <!-- MOD-6: 关键概念速查 -->
    <div class="doodle-box">
      <span class="coord">F-15</span>
      <h2>📋 关键概念速查</h2>
      <div class="data-row">
        <span class="key">能力解锁</span>
        <span class="val">破容量 · 做不到 → 做到</span>
      </div>
      <div class="data-row">
        <span class="key">认知卸载</span>
        <span class="val">释放带宽 · 干扰消失</span>
      </div>
      <div class="data-row">
        <span class="key">认知共生</span>
        <span class="val star">好 App 让 OS 更聪明</span>
      </div>
      <div class="data-row">
        <span class="key">领域状态</span>
        <span class="val">≠ Memory，是业务资产</span>
      </div>
    </div>

    <!-- MOD-7: 核心金句 -->
    <div class="doodle-box quote-box">
      <span class="coord">G-20</span>
      <div class="eng">✦ Core Insight ✦</div>
      <div class="main-quote">The best context<br/>is no context.</div>
      <div class="sub-quote">Agent 越轻量，表现越好<br/>好的 Application 帮 Agent 减负</div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    made with ♡ · journal style · Agent认知笔记
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent认知：OS与Application</title>
<style>
  /* ========== RESET & BASE ========== */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', sans-serif;
  }

  /* ========== CONTAINER: 3:4 PORTRAIT ========== */
  .container {
    width: 1080px;
    min-height: 1440px;
    background-color: #F2F2F2;
    /* 蓝图网格 */
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 19px, #E8E8E8 19px, #E8E8E8 20px),
      repeating-linear-gradient(90deg, transparent, transparent 19px, #E8E8E8 19px, #E8E8E8 20px),
      repeating-linear-gradient(0deg, transparent, transparent 99px, #DBDBDB 99px, #DBDBDB 100px),
      repeating-linear-gradient(90deg, transparent, transparent 99px, #DBDBDB 99px, #DBDBDB 100px);
    position: relative;
    
    padding: 48px 48px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* ========== COORD LABEL (hidden) ========== */
  .coord { display: none; }

  /* ========== HEADER ========== */
  .header {
    text-align: center;
    padding: 16px 0 8px;
    position: relative;
  }
  .header h1 {
    font-size: 72px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 3px;
    line-height: 1.25;
  }
  .header .subtitle {
    font-size: 26px;
    color: #666;
    margin-top: 12px;
    font-family: 'SF Mono', monospace;
    letter-spacing: 3px;
  }

  /* ========== MODULE CARD ========== */
  .module {
    background: rgba(184, 216, 190, 0.25);
    border: 1px solid #2D2926;
    border-radius: 2px;
    padding: 28px 32px 24px;
    position: relative;
  }
  .module h2 {
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    padding-left: 0;
  }

  /* ========== GRID LAYOUTS ========== */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  /* ========== THREE-LAYER SPECTRUM (MOD-1) ========== */
  .spectrum-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid #ccc;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s;
  }
  .spectrum-card.best {
    border: 3px solid #E91E63;
    background: rgba(233, 30, 99, 0.08);
  }
  .spectrum-card .name {
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 8px;
    color: #1a1a1a;
  }
  .spectrum-card .en {
    font-size: 24px;
    color: #999;
    font-family: 'SF Mono', monospace;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .spectrum-card .desc {
    font-size: 26px;
    color: #555;
    line-height: 1.5;
  }
  .spectrum-card .barrier {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 700;
  }

  /* ========== SCALE BAR (MOD-2) ========== */
  .scale-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 16px 0;
  }
  .scale-segment {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
  }
  .scale-label {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    color: #666;
    font-family: monospace;
    margin-top: 6px;
  }

  /* ========== WARNING (MOD-3) ========== */
  .warning {
    background: #1a1a1a;
    color: #E91E63;
    border-left: 6px solid #E91E63;
    padding: 28px 32px;
    font-weight: 700;
    font-size: 30px;
    border-radius: 2px;
    position: relative;
  }
  .warning h2 {
    color: #E91E63;
    font-size: 40px;
    margin-bottom: 16px;
    padding-left: 0;
  }
  .warning ul {
    list-style: none;
    padding: 0;
  }
  .warning li {
    padding: 8px 0;
    padding-left: 40px;
    position: relative;
    line-height: 1.5;
    font-size: 30px;
  }
  .warning li::before {
    content: "⚠";
    position: absolute;
    left: 0;
    font-size: 28px;
  }

  /* ========== DATA TABLE (MOD-4) ========== */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 28px;
  }
  .data-table th {
    background: #2D2926;
    color: #fff;
    padding: 16px 20px;
    text-align: left;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 2px;
  }
  .data-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    line-height: 1.4;
  }
  .data-table tr:nth-child(even) td {
    background: rgba(184, 216, 190, 0.15);
  }

  /* ========== STATUS BAR (MOD-5) ========== */
  .status-bar {
    display: flex;
    gap: 0;
  }
  .status-item {
    flex: 1;
    padding: 20px 16px;
    text-align: center;
    border-right: 1px solid #ccc;
    background: rgba(255,255,255,0.5);
  }
  .status-item:last-child { border-right: none; }
  .status-item .value {
    font-size: 64px;
    font-weight: 800;
    color: #3A7BD5;
    font-family: 'SF Mono', monospace;
  }
  .status-item .label {
    font-size: 24px;
    color: #666;
    margin-top: 6px;
  }

  /* ========== UTILITY ========== */
  .highlight {
    background: linear-gradient(transparent 60%, #FFF200 60%);
    padding: 0 4px;
  }
  .pink { color: #E91E63; font-weight: 700; }
  .blue { color: #3A7BD5; font-weight: 700; }
  .tag {
    display: inline-block;
    background: #2D2926;
    color: #fff;
    font-size: 24px;
    padding: 4px 14px;
    border-radius: 2px;
    letter-spacing: 2px;
    font-family: monospace;
  }

  /* ========== FOOTER ========== */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    color: #999;
    font-family: monospace;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    margin-top: auto;
  }
</style>
</head>
<body>
<div class="container">

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <h1>Agent认知：OS与Application</h1>
    <div class="subtitle">COGNITIVE MAP · AGENT ARCHITECTURE · 2026</div>
  </div>

  <!-- MOD-1: 三层光谱 -->
  <div class="module">
    <span class="coord">A-01</span>
    <h2>三层光谱：从指令到服务</h2>
    <div class="grid-3col">
      <div class="spectrum-card">
        <div class="name">指令</div>
        <div class="en">PROMPT</div>
        <div class="desc">给Agent点拨方向<br>活还是Agent干</div>
        <div class="barrier" style="color:#999;">壁垒：<span class="pink">零</span></div>
      </div>
      <div class="spectrum-card">
        <div class="name">工具</div>
        <div class="en">SCRIPT</div>
        <div class="desc">外部代劳返回结果<br>带宽降低</div>
        <div class="barrier" style="color:#999;">壁垒：<span style="color:#E6A817;font-weight:700;">低</span></div>
      </div>
      <div class="spectrum-card best">
        <div class="name">服务 ★</div>
        <div class="en">APPLICATION</div>
        <div class="desc">代劳+持久状态<br>+基础设施</div>
        <div class="barrier" style="color:#999;">壁垒：<span class="blue">高</span></div>
      </div>
    </div>
    <!-- 壁垒条 -->
    <div class="scale-bar" style="margin-top:20px;">
      <div class="scale-segment" style="flex:1; background:#B8D8BE; color:#1a1a1a;">可复制</div>
      <div class="scale-segment" style="flex:1; background:#E6A817;">可复现</div>
      <div class="scale-segment" style="flex:2; background:#E91E63;">不可复制</div>
    </div>
    <div class="scale-label">
      <span>Prompt</span><span>Script</span><span style="text-align:right;">Application →</span>
    </div>
  </div>

  <!-- MOD-2: 两个物理约束 + OS vs Application 双栏 -->
  <div class="grid-2col">
    <!-- 两个物理约束 -->
    <div class="module">
      <span class="coord">B-05</span>
      <h2>两个物理约束</h2>
      <div style="margin-bottom:20px;">
        <div class="tag" style="margin-bottom:12px;">约束 ①</div>
        <div style="font-size:32px; font-weight:800; color:#1a1a1a; margin:8px 0;">上下文容量</div>
        <div style="font-size:28px; color:#555; line-height:1.5;">Context是有限容器<br>塞得越多<span class="highlight">性能越差</span></div>
      </div>
      <hr style="border:none;border-top:1px solid #ccc;margin:16px 0;">
      <div>
        <div class="tag" style="margin-bottom:12px;">约束 ②</div>
        <div style="font-size:32px; font-weight:800; color:#1a1a1a; margin:8px 0;">注意力带宽</div>
        <div style="font-size:28px; color:#555; line-height:1.5;">多任务互相干扰<br>注意力是<span class="pink">零和的</span></div>
      </div>
    </div>

    <!-- OS vs Application -->
    <div class="module">
      <span class="coord">C-12</span>
      <h2>OS vs Application</h2>
      <div style="margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #ccc;">
        <div class="tag" style="background:#3A7BD5; margin-bottom:10px;">AGENT OS</div>
        <div style="font-size:34px; font-weight:800; color:#3A7BD5; margin:6px 0;">命题：WHAT</div>
        <div style="font-size:28px; color:#555; line-height:1.5;">决定<span class="highlight">做什么</span><br>持有用户意图<br>持有跨域上下文</div>
      </div>
      <div>
        <div class="tag" style="background:#E91E63; margin-bottom:10px;">APPLICATION</div>
        <div style="font-size:34px; font-weight:800; color:#E91E63; margin:6px 0;">命题：HOW</div>
        <div style="font-size:28px; color:#555; line-height:1.5;">决定<span class="highlight">怎么做</span><br>持有领域状态<br>持有业务历史</div>
      </div>
    </div>
  </div>

  <!-- MOD-3: 避坑警告 -->
  <div class="warning">
    <span class="coord">D-03</span>
    <h2>⚠ 避坑警告</h2>
    <ul>
      <li>垂类做Agent OS是找死——你拿领域知识跟OpenAI比推理能力，是拿刀打坦克</li>
      <li>Skill天花板是卖copy——prompt可复制，无状态script可复现，做得越好抄得越容易</li>
      <li>OS层天然收敛——PC剩Win/Mac，移动剩iOS/Android，Agent OS不会有几十个赢家</li>
    </ul>
  </div>

  <!-- MOD-4: 核心概念速查 -->
  <div class="module">
    <span class="coord">E-08</span>
    <h2>核心概念速查</h2>
    <table class="data-table">
      <thead>
        <tr>
          <th>概念</th>
          <th>本质</th>
          <th>价值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="font-weight:700;">能力解锁</td>
          <td>突破上下文容量</td>
          <td class="blue">做不到 → 做到了</td>
        </tr>
        <tr>
          <td style="font-weight:700;">认知卸载</td>
          <td>释放注意力带宽</td>
          <td class="blue">做得累 → 做得轻松</td>
        </tr>
        <tr>
          <td style="font-weight:700;">认知共生</td>
          <td>OS与App飞轮效应</td>
          <td class="pink">1+1 &gt; 2</td>
        </tr>
        <tr>
          <td style="font-weight:700;">领域状态</td>
          <td>≠ Memory，是业务状态机</td>
          <td class="blue">越用越厚，越难迁移</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- MOD-5: 状态栏 -->
  <div class="module" style="padding:0;">
    <span class="coord">F-15</span>
    <div class="status-bar">
      <div class="status-item">
        <div class="value">3</div>
        <div class="label">层光谱</div>
      </div>
      <div class="status-item">
        <div class="value">2</div>
        <div class="label">物理约束</div>
      </div>
      <div class="status-item">
        <div class="value">3</div>
        <div class="label">不可复制壁垒</div>
      </div>
      <div class="status-item">
        <div class="value" style="font-size:40px; line-height:1.6;">∅</div>
        <div class="label">最好的上下文</div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <span>Agent Cognitive Map · OS vs Application</span>
    <span>REV 1.0 · 2026</span>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>杂志编辑风 · Agent认知：OS与Application</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #E8E4DF;
    font-family: 'Noto Sans SC', sans-serif;
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: #FAF8F5;
    position: relative;
    
    display: flex;
    flex-direction: column;
  }

  /* ===== HEADER ===== */
  .header {
    padding: 64px 72px 32px;
    border-bottom: 1px solid #1a1a1a;
    position: relative;
  }
  .header::before {
    content: 'INSIGHT';
    position: absolute;
    top: 22px;
    left: 72px;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    letter-spacing: 6px;
    color: #999;
    text-transform: uppercase;
  }
  .header h1 {
    font-family: 'Noto Serif SC', 'Playfair Display', serif;
    font-size: 72px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 14px;
    max-width: 900px;
  }
  .header .lead {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #666;
    line-height: 1.7;
    max-width: 820px;
    letter-spacing: 0.5px;
  }
  .header .issue {
    position: absolute;
    top: 22px;
    right: 72px;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    letter-spacing: 4px;
    color: #999;
  }

  /* ===== MAIN CONTENT ===== */
  .content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 0;
  }

  /* ===== PULL QUOTE (MOD-1) ===== */
  .pull-quote {
    grid-column: 1 / -1;
    padding: 40px 72px;
    border-bottom: 1px solid #ddd;
    position: relative;
  }
  .pull-quote::before {
    content: '"';
    font-family: 'Playfair Display', serif;
    font-size: 140px;
    color: #C8412B;
    position: absolute;
    top: -2px;
    left: 46px;
    line-height: 1;
    opacity: 0.7;
  }
  .pull-quote p {
    font-family: 'Noto Serif SC', serif;
    font-size: 36px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.7;
    padding-left: 48px;
    font-style: italic;
  }
  .pull-quote .attr {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 22px;
    color: #999;
    margin-top: 10px;
    padding-left: 48px;
    letter-spacing: 2px;
  }

  /* ===== KEY METRICS (MOD-2) ===== */
  .metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #ddd;
    position: relative;
  }
  .metric-item {
    padding: 26px 20px;
    text-align: center;
    border-right: 1px solid #eee;
  }
  .metric-item:last-child { border-right: none; }
  .metric-item .num {
    font-family: 'Playfair Display', serif;
    font-size: 72px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 8px;
  }
  .metric-item .num .unit {
    font-size: 30px;
    font-weight: 400;
    color: #999;
  }
  .metric-item .desc {
    font-size: 24px;
    color: #888;
    letter-spacing: 1px;
    font-weight: 500;
  }
  .metric-item.accent .num { color: #C8412B; }

  /* ===== LEFT COLUMN (MOD-3 + MOD-4) ===== */
  .col-left {
    padding: 30px 32px 30px 72px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .section-label {
    font-size: 18px;
    letter-spacing: 4px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
  }

  /* Deep Dive */
  .deep-dive h3 {
    font-family: 'Noto Serif SC', serif;
    font-size: 34px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .deep-dive p {
    font-size: 26px;
    color: #444;
    line-height: 1.8;
    font-weight: 300;
  }
  .deep-dive .em {
    border-bottom: 2px solid #C8412B;
    padding-bottom: 1px;
  }

  /* Comparison List */
  .compare-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .compare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 26px;
  }
  .compare-item:last-child { border-bottom: none; }
  .compare-item .label { color: #666; font-weight: 300; }
  .compare-item .value {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    color: #1a1a1a;
    font-size: 26px;
  }
  .compare-item .value.highlight { color: #C8412B; }

  /* ===== RIGHT COLUMN (MOD-5 + MOD-6) ===== */
  .col-right {
    padding: 30px 72px 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  /* Warning */
  .editorial-warning {
    background: #1a1a1a;
    padding: 28px 24px;
    position: relative;
  }
  .editorial-warning::before {
    content: 'CAVEAT';
    position: absolute;
    top: -8px;
    left: 24px;
    background: #C8412B;
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
    padding: 4px 14px;
    font-weight: 700;
  }
  .editorial-warning h3 {
    font-family: 'Noto Serif SC', serif;
    color: #fff;
    font-size: 30px;
    margin-bottom: 14px;
    margin-top: 8px;
    font-weight: 700;
  }
  .editorial-warning li {
    color: #ccc;
    font-size: 24px;
    line-height: 1.8;
    font-weight: 300;
    padding-left: 20px;
    position: relative;
    list-style: none;
    margin-bottom: 6px;
  }
  .editorial-warning li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #C8412B;
  }

  /* Quick Ref Table */
  .quick-ref h3 {
    font-family: 'Noto Serif SC', serif;
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
  }
  .ref-row {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid #eee;
    font-size: 24px;
  }
  .ref-row .key {
    color: #888;
    font-weight: 400;
    flex: 0.8;
  }
  .ref-row .val {
    color: #1a1a1a;
    font-weight: 700;
    text-align: right;
    flex: 1.2;
  }

  /* ===== FOOTER ===== */
  .footer {
    grid-column: 1 / -1;
    padding: 14px 72px;
    border-top: 1px solid #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #aaa;
    letter-spacing: 2px;
  }
  .footer .dot {
    width: 6px;
    height: 6px;
    background: #C8412B;
    border-radius: 50%;
    display: inline-block;
    margin: 0 12px;
  }
</style>
</head>
<body>
<div class="container">

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <h1>Agent认知：OS与Application</h1>
    <p class="lead">垂类不该做 Agent，该做 Agent 上面的应用。战场不同，壁垒不同，终局不同。</p>
    <span class="issue">NO. 01 · 2026</span>
  </div>

  <div class="content">

    <!-- MOD-1: 核心金句 -->
    <div class="pull-quote">
      <span class="coord">A-01</span>
      <p>Agent 越轻，表现越好。最好的上下文就是没有上下文。</p>
      <div class="attr">— THE BEST CONTEXT IS NO CONTEXT</div>
    </div>

    <!-- MOD-2: 关键数据 -->
    <div class="metrics">
      <span class="coord">B-05</span>
      <div class="metric-item accent">
        <div class="num">2<span class="unit">个</span></div>
        <div class="desc">物理约束</div>
      </div>
      <div class="metric-item">
        <div class="num">3<span class="unit">层</span></div>
        <div class="desc">光谱递进</div>
      </div>
      <div class="metric-item">
        <div class="num">3<span class="unit">样</span></div>
        <div class="desc">不可复制</div>
      </div>
      <div class="metric-item accent">
        <div class="num">2<span class="unit">种</span></div>
        <div class="desc">核心价值</div>
      </div>
    </div>

    <!-- LEFT: MOD-3 深度剖析 + MOD-4 三层光谱 -->
    <div class="col-left">
      <span class="coord">C-12</span>

      <div class="deep-dive">
        <div class="section-label">ANALYSIS</div>
        <h3>OS 管 WHAT，Application 管 HOW</h3>
        <p>
          OS 在有限容量和带宽下帮用户<span class="em">完成尽可能多的事</span>。Application 每次被调用时<span class="em">提供最大领域价值</span>。好的 Application 让 Agent OS 更聪明——认知共生，飞轮转起来。
        </p>
      </div>

      <div>
        <div class="section-label">SPECTRUM</div>
        <div class="compare-list">
          <div class="compare-item">
            <span class="label">Prompt 指令</span>
            <span class="value">指路，可复制</span>
          </div>
          <div class="compare-item">
            <span class="label">Script 工具</span>
            <span class="value">代劳，可复现</span>
          </div>
          <div class="compare-item">
            <span class="label">Application</span>
            <span class="value highlight">代劳+状态，不可复制</span>
          </div>
          <div class="compare-item">
            <span class="label">壁垒跃迁关键</span>
            <span class="value highlight">外部持久状态</span>
          </div>
        </div>
      </div>
    </div>

    <!-- RIGHT: MOD-5 警告 + MOD-6 速查 -->
    <div class="col-right">
      <span class="coord">D-03</span>

      <div class="editorial-warning">
        <span class="coord">E-08</span>
        <h3>垂类做 OS 的三个致命理由</h3>
        <ul>
          <li>战场错：OS 拼推理和编排，领域深度一点用没有——拿刀去打坦克</li>
          <li>对手错：正面硬刚 OpenAI、Anthropic，三年换一场必输的仗</li>
          <li>结局已定：OS 天然收敛，赢家不超过两三个</li>
        </ul>
      </div>

      <div class="quick-ref">
        <span class="coord">F-15</span>
        <div class="section-label">QUICK REFERENCE</div>
        <h3>核心概念速查</h3>
        <div class="ref-row">
          <span class="key">上下文容量</span>
          <span class="val">装不下 → 能力解锁</span>
        </div>
        <div class="ref-row">
          <span class="key">注意力带宽</span>
          <span class="val">做不好 → 认知卸载</span>
        </div>
        <div class="ref-row">
          <span class="key">领域状态</span>
          <span class="val">越用越厚，追不上</span>
        </div>
        <div class="ref-row">
          <span class="key">认知共生</span>
          <span class="val" style="color:#C8412B;">App 让 OS 更聪明</span>
        </div>
        <div class="ref-row">
          <span class="key">Skill 天花板</span>
          <span class="val">卖 copy，壁垒为零</span>
        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="footer">
      <span>AGENT COGNITION · OS VS APPLICATION</span>
      <span><span class="dot"></span></span>
      <span>MAGAZINE EDITORIAL · 2026</span>
    </div>

  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent认知：OS与Application · 孟菲斯波普风</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #F0F0F0;
    font-family: 'Noto Sans SC', sans-serif;
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: #FFFFFF;
    position: relative;
    
    padding: 32px 44px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ===== 孟菲斯背景装饰 ===== */
  .container::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 180px;
    height: 180px;
    background: #FFD700;
    border-radius: 50%;
    opacity: 0.18;
    z-index: 0;
  }
  .container::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: -40px;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 170px solid #FF6B6B;
    opacity: 0.12;
    z-index: 0;
  }

  /* 散布几何装饰 */
  .geo-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }
  .geo-deco.circle-1 {
    top: 280px;
    right: 40px;
    width: 60px;
    height: 60px;
    border: 4px solid #4169E1;
    border-radius: 50%;
    opacity: 0.25;
  }
  .geo-deco.circle-2 {
    bottom: 320px;
    left: 35px;
    width: 40px;
    height: 40px;
    background: #9B59B6;
    border-radius: 50%;
    opacity: 0.2;
  }
  .geo-deco.tri-1 {
    top: 520px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 44px solid #FFD700;
    opacity: 0.22;
  }
  .geo-deco.tri-2 {
    bottom: 180px;
    right: 50px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #98FB98;
    opacity: 0.3;
    transform: rotate(30deg);
  }
  .geo-deco.cross-1 {
    top: 750px;
    right: 35px;
    width: 30px;
    height: 30px;
    opacity: 0.2;
  }
  .geo-deco.cross-1::before,
  .geo-deco.cross-1::after {
    content: '';
    position: absolute;
    background: #FF6B6B;
  }
  .geo-deco.cross-1::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    transform: translateY(-50%);
  }
  .geo-deco.cross-1::after {
    top: 0;
    left: 50%;
    width: 5px;
    height: 100%;
    transform: translateX(-50%);
  }
  .geo-deco.zigzag {
    top: 140px;
    left: 50px;
    width: 100px;
    height: 16px;
    background: repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      #9B59B6 8px,
      #9B59B6 10px
    );
    opacity: 0.18;
    transform: rotate(-5deg);
  }
  .geo-deco.dots {
    bottom: 500px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-image: radial-gradient(#4169E1 2.5px, transparent 2.5px);
    background-size: 12px 12px;
    opacity: 0.15;
  }
  .geo-deco.square-1 {
    top: 950px;
    left: 25px;
    width: 35px;
    height: 35px;
    border: 4px solid #FFD700;
    opacity: 0.22;
    transform: rotate(15deg);
  }
  .geo-deco.wave {
    bottom: 100px;
    left: 120px;
    width: 160px;
    height: 20px;
    opacity: 0.15;
    background: repeating-linear-gradient(
      90deg,
      #98FB98 0px, #98FB98 4px,
      transparent 4px, transparent 8px
    );
    border-radius: 2px;
  }

  /* ===== HEADER ===== */
  .header {
    text-align: center;
    padding: 4px 0 6px;
    position: relative;
    z-index: 2;
  }
  .header .badge {
    display: inline-block;
    background: #FFD700;
    color: #1a1a1a;
    font-family: 'Rubik', sans-serif;
    font-size: 24px;
    font-weight: 700;
    padding: 5px 22px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 3px solid #1a1a1a;
    margin-bottom: 10px;
    transform: rotate(-2deg);
  }
  .header h1 {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 72px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.15;
    position: relative;
    display: inline-block;
    letter-spacing: -1px;
  }
  .header h1 .pop {
    color: #FF6B6B;
  }
  .header h1::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -8px;
    right: -8px;
    height: 20px;
    background: #FFD700;
    z-index: -1;
    transform: rotate(-1deg) skewX(-3deg);
  }
  .header .sub {
    font-size: 30px;
    color: #555;
    margin-top: 6px;
    font-weight: 400;
  }

  /* ===== 通用模块样式 ===== */
  .memphis-box {
    border: 3.5px solid #1a1a1a;
    padding: 16px 20px;
    position: relative;
    z-index: 1;
    background: #FFFFFF;
  }
  .memphis-box.yellow { background: #FFF8DC; }
  .memphis-box.coral { background: #FFF0EE; }
  .memphis-box.blue { background: #EEF4FF; }
  .memphis-box.green { background: #F0FFF0; }
  .memphis-box.purple { background: #F5F0FF; }

  .memphis-box h2 {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .memphis-box h2 .tag {
    display: inline-block;
    padding: 3px 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2.5px solid #1a1a1a;
    background: #FFD700;
    color: #1a1a1a;
    transform: rotate(-1deg);
  }
  .memphis-box h2 .tag.coral-tag { background: #FF6B6B; color: #fff; }
  .memphis-box h2 .tag.blue-tag { background: #4169E1; color: #fff; }
  .memphis-box h2 .tag.green-tag { background: #98FB98; color: #1a1a1a; }
  .memphis-box h2 .tag.purple-tag { background: #9B59B6; color: #fff; }

  .memphis-box.shadow-offset { box-shadow: 6px 6px 0px #1a1a1a; }
  .memphis-box.shadow-coral { box-shadow: 6px 6px 0px #FF6B6B; }
  .memphis-box.shadow-blue { box-shadow: 6px 6px 0px #4169E1; }
  .memphis-box.shadow-yellow { box-shadow: 6px 6px 0px #FFD700; }
  .memphis-box.shadow-purple { box-shadow: 6px 6px 0px #9B59B6; }

  /* ===== GRID ===== */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }

  /* ===== MOD-1: 三种形态卡片 ===== */
  .opt-card {
    border: 3px solid #1a1a1a;
    padding: 16px 12px;
    text-align: center;
    position: relative;
    background: #FFFFFF;
  }
  .opt-card:nth-child(1) { transform: rotate(-1.5deg); }
  .opt-card:nth-child(2) { transform: rotate(0.8deg); }
  .opt-card:nth-child(3) { transform: rotate(-0.5deg); }
  .opt-card .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: 3px solid #1a1a1a;
  }
  .opt-card:nth-child(1) .icon-circle { background: #FFD700; }
  .opt-card:nth-child(2) .icon-circle { background: #FF6B6B; }
  .opt-card:nth-child(3) .icon-circle { background: #4169E1; }
  .opt-card .name {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
  }
  .opt-card .meta {
    font-size: 24px;
    color: #666;
    line-height: 1.4;
  }
  .opt-card.best {
    background: #FFD700;
    box-shadow: 5px 5px 0px #1a1a1a;
  }
  .opt-card.best::after {
    content: '\2605 BEST';
    position: absolute;
    top: -14px;
    right: -8px;
    background: #FF6B6B;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 800;
    padding: 3px 12px;
    border: 2.5px solid #1a1a1a;
    transform: rotate(3deg);
  }

  /* ===== MOD-2: 三层光谱 ===== */
  .spectrum-wrap {
    display: flex;
    gap: 0;
    align-items: stretch;
  }
  .spectrum-col {
    flex: 1;
    padding: 14px 14px;
    border: 2.5px solid #1a1a1a;
    text-align: center;
  }
  .spectrum-col:not(:last-child) { border-right: none; }
  .spectrum-col:nth-child(1) { background: #FFF8DC; }
  .spectrum-col:nth-child(2) { background: #FFF0EE; }
  .spectrum-col:nth-child(3) { background: #EEF4FF; }
  .spectrum-col h3 {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
  }
  .barrier-badge {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    padding: 2px 14px;
    border: 2px solid #1a1a1a;
    margin-bottom: 6px;
  }
  .barrier-badge.zero { background: #98FB98; color: #1a1a1a; }
  .barrier-badge.low { background: #FFD700; color: #1a1a1a; }
  .barrier-badge.high { background: #FF6B6B; color: #fff; }
  .spectrum-col .s-desc {
    font-size: 24px;
    color: #555;
    line-height: 1.5;
  }

  /* ===== MOD-3: 两个物理约束 ===== */
  .insight-text {
    font-size: 30px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 10px;
  }
  .insight-text .highlight {
    background: #FFD700;
    padding: 1px 8px;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 3px solid #FF6B6B;
  }
  .constraint-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .constraint-card {
    border: 3px solid #1a1a1a;
    padding: 14px 16px;
    text-align: center;
  }
  .constraint-card:nth-child(1) { background: #FFF8DC; transform: rotate(-0.5deg); }
  .constraint-card:nth-child(2) { background: #FFF0EE; transform: rotate(0.5deg); }
  .constraint-card .c-icon { font-size: 36px; margin-bottom: 4px; }
  .constraint-card .c-title {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
  }
  .constraint-card .c-desc {
    font-size: 24px;
    color: #555;
    line-height: 1.4;
  }

  /* ===== MOD-4: 场景卡片 ===== */
  .scene-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .scene-card {
    border: 2.5px solid #1a1a1a;
    padding: 12px 14px;
    position: relative;
    
  }
  .scene-card:nth-child(1) { background: #FFF8DC; transform: rotate(-0.5deg); }
  .scene-card:nth-child(2) { background: #FFF0EE; transform: rotate(0.8deg); }
  .scene-card:nth-child(3) { background: #F0FFF0; transform: rotate(0.3deg); }
  .scene-card:nth-child(4) { background: #F5F0FF; transform: rotate(-0.7deg); }
  .scene-card .scene-num {
    font-family: 'Rubik', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: rgba(0,0,0,0.07);
    position: absolute;
    top: 4px;
    right: 10px;
    line-height: 1;
  }
  .scene-card .scene-title {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
  }
  .scene-card .scene-desc {
    font-size: 22px;
    color: #555;
    line-height: 1.5;
  }

  /* ===== OS vs App 面板 ===== */
  .split-panel {
    font-size: 26px;
    color: #333;
    line-height: 1.7;
  }
  .split-panel .panel-block { margin-bottom: 10px; }
  .split-panel .panel-block:last-child { margin-bottom: 0; }
  .split-panel .p-label {
    font-weight: 800;
    font-size: 30px;
    color: #1a1a1a;
  }
  .split-panel .p-keyword {
    font-family: 'Rubik', sans-serif;
    font-weight: 800;
    font-size: 34px;
  }
  .split-panel .p-divider {
    border: none;
    border-top: 3px dashed #ccc;
    margin: 8px 0;
  }

  /* ===== MOD-5: 警告区 ===== */
  .warn-bar {
    background: #FF6B6B;
    border: 3.5px solid #1a1a1a;
    box-shadow: 6px 6px 0px #1a1a1a;
    padding: 14px 20px;
    position: relative;
    z-index: 1;
  }
  .warn-bar h2 {
    font-family: 'Rubik', 'Noto Sans SC', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .warn-bar h2 .warn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #FFD700;
    border: 2.5px solid #1a1a1a;
    font-size: 24px;
    transform: rotate(-5deg);
  }
  .warn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .warn-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 1.5;
  }
  .warn-item .x-mark {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: #1a1a1a;
    color: #FFD700;
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
  }

  /* ===== MOD-7: 状态栏 ===== */
  .status-bar {
    display: flex;
    justify-content: space-around;
    gap: 14px;
  }
  .status-item {
    text-align: center;
    flex: 1;
    padding: 12px 6px;
    border: 3px solid #1a1a1a;
    position: relative;
  }
  .status-item:nth-child(1) { background: #FFD700; transform: rotate(-1deg); }
  .status-item:nth-child(2) { background: #FF6B6B; transform: rotate(1.5deg); }
  .status-item:nth-child(3) { background: #4169E1; transform: rotate(-0.8deg); }
  .status-item:nth-child(4) { background: #98FB98; transform: rotate(0.5deg); }
  .status-item .num {
    font-family: 'Rubik', sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
    color: #1a1a1a;
  }
  .status-item:nth-child(2) .num,
  .status-item:nth-child(3) .num { color: #FFFFFF; }
  .status-item .lbl {
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a;
  }
  .status-item:nth-child(2) .lbl,
  .status-item:nth-child(3) .lbl { color: rgba(255,255,255,0.9); }

  /* ===== FOOTER ===== */
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-top: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
  }
  .footer .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
  .footer .dot:nth-child(1) { background: #FFD700; }
  .footer .dot:nth-child(3) { background: #FF6B6B; }
  .footer .dot:nth-child(5) { background: #4169E1; }
  .footer .dot:nth-child(7) { background: #9B59B6; }
</style>
</head>
<body>
<div class="container">

  <!-- 散布几何装饰 -->
  <div class="geo-deco circle-1"></div>
  <div class="geo-deco circle-2"></div>
  <div class="geo-deco tri-1"></div>
  <div class="geo-deco tri-2"></div>
  <div class="geo-deco cross-1"></div>
  <div class="geo-deco zigzag"></div>
  <div class="geo-deco dots"></div>
  <div class="geo-deco square-1"></div>
  <div class="geo-deco wave"></div>

  <!-- HEADER -->
  <div class="header">
    <span class="coord">SEC-00</span>
    <div class="badge">AGENT INSIGHT</div>
    <h1>Agent认知：<span class="pop">OS与Application</span></h1>
    <div class="sub">从物理约束出发，理解 Agent 生态的分工逻辑</div>
  </div>

  <!-- MOD-1: 三种形态 -->
  <div class="memphis-box yellow shadow-offset">
    <span class="coord">A-01</span>
    <h2><span class="tag">形态</span>从指令到服务的三层光谱</h2>
    <div class="grid-3col">
      <div class="opt-card">
        <div class="icon-circle">💬</div>
        <div class="name">Prompt</div>
        <div class="meta">给 Agent 指路<br>活还是它自己干</div>
      </div>
      <div class="opt-card">
        <div class="icon-circle">⚙️</div>
        <div class="name">Script</div>
        <div class="meta">外部代劳<br>但逻辑可复现</div>
      </div>
      <div class="opt-card best">
        <div class="icon-circle">🏗️</div>
        <div class="name">Application</div>
        <div class="meta">代劳 + 持久状态<br>不可复制</div>
      </div>
    </div>
  </div>

  <!-- MOD-2: 三层光谱壁垒 -->
  <div class="memphis-box shadow-blue">
    <span class="coord">B-05</span>
    <h2><span class="tag blue-tag">壁垒</span>三层光谱的壁垒递进</h2>
    <div class="spectrum-wrap">
      <div class="spectrum-col">
        <h3>Prompt</h3>
        <div><span class="barrier-badge zero">壁垒 = 0</span></div>
        <div class="s-desc">文本可复制<br>带宽不减</div>
      </div>
      <div class="spectrum-col">
        <h3>Script</h3>
        <div><span class="barrier-badge low">壁垒低</span></div>
        <div class="s-desc">带宽降低<br>但无外部状态</div>
      </div>
      <div class="spectrum-col">
        <h3>Application</h3>
        <div><span class="barrier-badge high">壁垒高</span></div>
        <div class="s-desc">领域状态+基础设施<br>+规模经济</div>
      </div>
    </div>
  </div>

  <!-- MOD-3: 两个物理约束 -->
  <div class="memphis-box blue shadow-coral">
    <span class="coord">C-12</span>
    <h2><span class="tag coral-tag">核心</span>两个物理约束</h2>
    <div class="insight-text">
      不是 bug，不是下一代模型能修的。像<span class="highlight">光速</span>一样，只能围绕它做工程。
    </div>
    <div class="constraint-row">
      <div class="constraint-card">
        <div class="c-icon">📦</div>
        <div class="c-title">上下文容量</div>
        <div class="c-desc">Context 有限，塞得越多性能越差</div>
      </div>
      <div class="constraint-card">
        <div class="c-icon">🧠</div>
        <div class="c-title">注意力带宽</div>
        <div class="c-desc">多任务争抢同一份注意力，质量全部下降</div>
      </div>
    </div>
  </div>

  <div class="grid-2col">
    <!-- MOD-4: Application 的两种价值 -->
    <div class="memphis-box green shadow-offset">
      <span class="coord">D-03</span>
      <h2 style="margin-bottom: 10px;"><span class="tag green-tag">价值</span>Application 给 Agent</h2>
      <div class="scene-grid">
        <div class="scene-card">
          <span class="scene-num">01</span>
          <div class="scene-title">能力解锁</div>
          <div class="scene-desc">突破上下文容量，做不到的事做到了</div>
        </div>
        <div class="scene-card">
          <span class="scene-num">02</span>
          <div class="scene-title">认知卸载</div>
          <div class="scene-desc">释放注意力带宽，干扰消失每件事更准</div>
        </div>
        <div class="scene-card">
          <span class="scene-num">03</span>
          <div class="scene-title">认知共生</div>
          <div class="scene-desc">好 App 让 OS 更聪明，OS 更精准调用 App</div>
        </div>
        <div class="scene-card">
          <span class="scene-num">04</span>
          <div class="scene-title">飞轮效应</div>
          <div class="scene-desc">通用+专精耦合，越转越强，前所未有</div>
        </div>
      </div>
    </div>

    <!-- MOD-5: OS vs Application 分界 -->
    <div class="memphis-box purple shadow-purple">
      <span class="coord">E-08</span>
      <h2><span class="tag purple-tag">分界</span>OS vs App</h2>
      <div class="split-panel">
        <div class="panel-block">
          <div class="p-label">Agent OS</div>
          <div>命题 = <span class="p-keyword" style="color: #FF6B6B;">WHAT</span></div>
          <div>持有用户意图 + 跨域上下文</div>
        </div>
        <hr class="p-divider">
        <div class="panel-block">
          <div class="p-label">Agent App</div>
          <div>命题 = <span class="p-keyword" style="color: #4169E1;">HOW</span></div>
          <div>持有领域状态 + 业务历史</div>
        </div>
        <hr class="p-divider">
        <div class="panel-block" style="font-size: 24px; color: #666;">
          The best context is no context.<br>Agent 越轻量，表现越好。
        </div>
      </div>
    </div>
  </div>

  <!-- MOD-6: 避坑指南 -->
  <div class="warn-bar">
    <span class="coord">F-15</span>
    <h2><span class="warn-icon">⚠</span>避坑指南</h2>
    <div class="warn-list">
      <div class="warn-item">
        <span class="x-mark">✕</span>
        <span>垂类做 Agent OS 是找死——战场错、对手错，OS 天然收敛到 2-3 家</span>
      </div>
      <div class="warn-item">
        <span class="x-mark">✕</span>
        <span>Skill 没有外部状态就是裸奔——天花板是卖 copy，做得越好抄得越容易</span>
      </div>
      <div class="warn-item">
        <span class="x-mark">✕</span>
        <span>领域状态 ≠ Memory——Memory 是 OS 层课题，领域状态是业务上下文资产</span>
      </div>
    </div>
  </div>

  <!-- MOD-7: 状态栏 -->
  <div class="memphis-box" style="border: none; padding: 0; background: transparent;">
    <span class="coord">G-20</span>
    <div class="status-bar">
      <div class="status-item">
        <div class="num">2</div>
        <div class="lbl">物理约束</div>
      </div>
      <div class="status-item">
        <div class="num">3</div>
        <div class="lbl">形态光谱</div>
      </div>
      <div class="status-item">
        <div class="num">3</div>
        <div class="lbl">不可复制壁垒</div>
      </div>
      <div class="status-item">
        <div class="num">2</div>
        <div class="lbl">核心价值</div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <span class="dot"></span>
    <span>AGENT</span>
    <span class="dot"></span>
    <span>OS</span>
    <span class="dot"></span>
    <span>APPLICATION</span>
    <span class="dot"></span>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>报纸新闻风 · Agent认知：OS与Application</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  .coord { display: none; }

  :root {
    --paper: #FBF7F0;
    --ink: #111111;
    --gray: #444444;
    --rule: #111111;
    --rule-light: #999999;
    --red: #CC0000;
    --serif-display: 'Playfair Display', 'Noto Serif SC', serif;
    --serif-cn: 'Noto Serif SC', serif;
    --sans: 'Source Sans 3', 'Noto Serif SC', sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: #D4CFC8;
    font-family: var(--sans);
    color: var(--ink);
  }

  .container {
    width: 1080px;
    min-height: 1440px;
    background: var(--paper);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* ===== MASTHEAD (报头) ===== */
  .masthead {
    padding: 28px 52px 0;
    text-align: center;
    position: relative;
  }
  .masthead-rule-top {
    height: 6px;
    background: var(--ink);
    margin-bottom: 3px;
  }
  .masthead-rule-thin {
    height: 1.5px;
    background: var(--ink);
    margin-bottom: 14px;
  }
  .masthead-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--sans);
    font-size: 24px;
    color: var(--gray);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .masthead-title {
    font-family: var(--serif-cn);
    font-size: 84px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: 4px;
    margin-bottom: 10px;
  }
  .masthead-subtitle {
    font-family: var(--serif-cn);
    font-size: 32px;
    font-style: italic;
    color: var(--gray);
    margin-bottom: 14px;
    line-height: 1.4;
  }
  .masthead-rule-bottom-double {
    height: 1.5px;
    background: var(--ink);
    margin-bottom: 4px;
  }
  .masthead-rule-bottom-double2 {
    height: 5px;
    background: var(--ink);
    margin-bottom: 0;
  }

  /* ===== CONTENT AREA ===== */
  .content-area {
    flex: 1;
    padding: 20px 52px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ===== SECTION DIVIDERS ===== */
  .rule-single {
    height: 1px;
    background: var(--rule-light);
    margin: 18px 0;
  }
  .rule-double {
    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    height: 0;
    padding-top: 4px;
    margin: 20px 0;
  }

  /* ===== SECTION LABEL ===== */
  .section-label {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 10px;
  }

  /* ===== MOD-1: 头条（单栏） ===== */
  .headline-block {
    margin-bottom: 0;
  }
  .headline-block h2 {
    font-family: var(--serif-cn);
    font-size: 48px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 14px;
  }
  .headline-block .lead {
    font-family: var(--serif-cn);
    font-size: 34px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .headline-block .body-text {
    font-family: var(--sans);
    font-size: 30px;
    color: var(--gray);
    line-height: 1.7;
  }

  /* ===== MOD-2: 两个物理约束（双栏对比） ===== */
  .constraints-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
  }
  .constraints-col {
    padding: 0 24px;
  }
  .constraints-col:first-child { padding-left: 0; }
  .constraints-col:last-child { padding-right: 0; }
  .constraints-col-rule {
    background: var(--rule-light);
  }
  .constraint-number {
    font-family: var(--serif-display);
    font-size: 68px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
  }
  .constraint-name {
    font-family: var(--serif-cn);
    font-size: 36px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .constraint-desc {
    font-family: var(--sans);
    font-size: 30px;
    color: var(--gray);
    line-height: 1.65;
  }

  /* ===== MOD-3: 三层光谱（单栏堆叠） ===== */
  .spectrum-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
  }
  .spectrum-item:last-child {
    margin-bottom: 0;
  }
  .spectrum-tag-col {
    flex-shrink: 0;
    width: 160px;
    text-align: center;
    padding-top: 4px;
  }
  .spectrum-tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    margin-bottom: 6px;
  }
  .tag-low {
    background: #E8E4DA;
    color: var(--gray);
  }
  .tag-mid {
    background: #DDD8CC;
    color: var(--ink);
  }
  .tag-high {
    background: var(--ink);
    color: var(--paper);
  }
  .spectrum-content {
    flex: 1;
  }
  .spectrum-content h4 {
    font-family: var(--serif-cn);
    font-size: 34px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .spectrum-content p {
    font-family: var(--sans);
    font-size: 30px;
    color: var(--gray);
    line-height: 1.6;
  }

  /* ===== MOD-4: 对比表格（三线表） ===== */
  .news-table-wrap {
    width: 100%;
  }
  .news-table {
    width: 100%;
    border-collapse: collapse;
  }
  .news-table thead th {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    text-align: left;
    padding: 12px 16px;
    border-top: 4px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    background: transparent;
  }
  .news-table tbody td {
    font-family: var(--sans);
    font-size: 30px;
    padding: 12px 16px;
    color: var(--gray);
    border-bottom: 1px solid #D8D2C4;
    vertical-align: top;
    line-height: 1.5;
  }
  .news-table tbody td.strong {
    font-family: var(--serif-cn);
    font-weight: 700;
    color: var(--ink);
  }
  .news-table tbody tr:last-child td {
    border-bottom: 3px solid var(--ink);
  }
  .news-table .highlight-cell {
    background: #F4F0E8;
    font-weight: 700;
    color: var(--ink);
  }
  .news-table .tag-red {
    color: var(--red);
    font-weight: 700;
  }
  .news-table .tag-green {
    color: #2E7D32;
    font-weight: 700;
  }

  /* ===== MOD-5: 编者按 ===== */
  .editorial-box {
    border: 2.5px solid var(--ink);
    padding: 24px 28px;
    position: relative;
  }
  .editorial-box::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid var(--rule-light);
    z-index: -1;
  }
  .editorial-label {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FBF7F0;
    background: var(--red);
    display: inline-block;
    padding: 5px 18px;
    margin-bottom: 14px;
  }
  .editorial-box blockquote {
    font-family: var(--serif-cn);
    font-size: 32px;
    font-style: italic;
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 10px;
  }
  .editorial-box blockquote .em-red {
    color: var(--red);
    font-weight: 700;
    font-style: normal;
  }
  .editorial-box .editorial-source {
    font-family: var(--sans);
    font-size: 26px;
    color: var(--gray);
    text-align: right;
  }

  /* ===== FOOTER ===== */
  .footer-bar {
    padding: 14px 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--sans);
    font-size: 24px;
    color: var(--gray);
    letter-spacing: 1px;
    border-top: 1.5px solid var(--rule-light);
  }
  .footer-bar .footer-left,
  .footer-bar .footer-right {
    text-transform: uppercase;
  }
  .footer-bar .footer-center {
    font-family: var(--serif-display);
    font-size: 24px;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
  }
</style>
</head>
<body>
<div class="container">

  <!-- MASTHEAD 报头 -->
  <div class="masthead">
    <span class="coord">SEC-00</span>
    <div class="masthead-rule-top"></div>
    <div class="masthead-rule-thin"></div>
    <div class="masthead-meta">
      <span>特刊</span>
      <span>深度洞察 · 战略分析</span>
      <span>2026 年 3 月 19 日</span>
    </div>
    <div class="masthead-title">Agent认知：OS与Application</div>
    <div class="masthead-subtitle">"垂类不应做Agent，应做Agent上面的应用"</div>
    <div class="masthead-rule-bottom-double"></div>
    <div class="masthead-rule-bottom-double2"></div>
  </div>

  <div class="content-area">

    <!-- MOD-1: 头条 — 核心论点（单栏） -->
    <div class="headline-block">
      <span class="coord">A-01</span>
      <div class="section-label">头条 · LEAD STORY</div>
      <h2>垂类做OS是找死，战场完全不同</h2>
      <div class="lead">Agent是一种交互范式，就像手机是一种交互范式。你不会为了购物专门买一部手机。垂类不应该尝试做Agent，应该做Agent上面的应用。</div>
      <div class="body-text">Agent的战场是推理能力、编排效率、交互体验。垂类的优势是领域深度、业务理解、行业数据——这些优势在OS战场上一点用都没有。你拿领域知识去跟OpenAI、Anthropic比推理能力，是拿刀去打坦克。而且OS层的市场结构天然收敛：PC时代活下来Windows和Mac，移动时代活下来iOS和Android。Agent OS也不会有几十个赢家。</div>
    </div>

    <div class="rule-double"></div>

    <!-- MOD-2: 两个物理约束（双栏并列对比） -->
    <div>
      <span class="coord">B-01</span>
      <div class="section-label">物理约束 · CONSTRAINTS</div>
      <div class="constraints-grid">
        <div class="constraints-col">
          <div class="constraint-number">01</div>
          <div class="constraint-name">上下文容量</div>
          <div class="constraint-desc">Context是有限的容器，塞得越多性能越差。那些塞不进context的领域知识和用户历史，需要Application在外面管着。</div>
        </div>
        <div class="constraints-col-rule"></div>
        <div class="constraints-col">
          <div class="constraint-number">02</div>
          <div class="constraint-name">注意力带宽</div>
          <div class="constraint-desc">左手画圆、右手画方，合在一起两个都变形。Agent同时做法律推理、追踪意图、规划行动——每件事的质量都下降。注意力是零和的。</div>
        </div>
      </div>
    </div>

    <div class="rule-double"></div>

    <!-- MOD-3: 三层光谱（单栏堆叠） -->
    <div>
      <span class="coord">C-01</span>
      <div class="section-label">三层光谱 · SPECTRUM</div>

      <div class="spectrum-item">
        <div class="spectrum-tag-col">
          <span class="spectrum-tag tag-low">壁垒：零</span>
        </div>
        <div class="spectrum-content">
          <h4>指令 Prompt</h4>
          <p>给Agent一个点拨方向，但推理工作仍然是Agent自己干的，带宽不减。而且prompt是文本，文本可以被复制。</p>
        </div>
      </div>

      <div class="spectrum-item">
        <div class="spectrum-tag-col">
          <span class="spectrum-tag tag-mid">壁垒：低</span>
        </div>
        <div class="spectrum-content">
          <h4>工具 Script</h4>
          <p>封装好的外部逻辑，从"指路"变成了"代劳"，带宽降低。但没有外部状态，别人看懂思路就能重写一个。</p>
        </div>
      </div>

      <div class="spectrum-item">
        <div class="spectrum-tag-col">
          <span class="spectrum-tag tag-high">壁垒：高</span>
        </div>
        <div class="spectrum-content">
          <h4>服务 Application</h4>
          <p>外部代劳 + 持久状态 + 基础设施。Skill背后有领域状态、基础设施成本、规模经济，就不再是Skill，是Agent-native Application。</p>
        </div>
      </div>
    </div>

    <div class="rule-single"></div>

    <!-- MOD-4: 壁垒对比表（三线表） -->
    <div class="news-table-wrap">
      <span class="coord">D-01</span>
      <div class="section-label">壁垒对比 · BARRIER MATRIX</div>
      <table class="news-table">
        <thead>
          <tr>
            <th style="width:22%">维度</th>
            <th style="width:24%">Prompt</th>
            <th style="width:24%">Script</th>
            <th style="width:30%">Application</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="strong">执行方式</td>
            <td>Agent自己推理</td>
            <td>外部代劳</td>
            <td class="highlight-cell">外部代劳+持久状态</td>
          </tr>
          <tr>
            <td class="strong">带宽消耗</td>
            <td class="tag-red">不减</td>
            <td>降低</td>
            <td class="tag-green">大幅降低</td>
          </tr>
          <tr>
            <td class="strong">可复制性</td>
            <td class="tag-red">文本即复制</td>
            <td class="tag-red">逻辑可复现</td>
            <td class="tag-green">不可复制</td>
          </tr>
          <tr>
            <td class="strong">商业天花板</td>
            <td>卖copy</td>
            <td>卖copy</td>
            <td class="highlight-cell">认知共生飞轮</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="rule-single"></div>

    <!-- MOD-5: 编者按 / 核心洞察 -->
    <div class="editorial-box">
      <span class="coord">E-01</span>
      <span class="editorial-label">核心洞察</span>
      <blockquote>
        好的Application让Agent OS更聪明，更聪明的OS更精准地调用Application——<span class="em-red">飞轮转起来了</span>。这是认知共生：一个通用智能和一个专精智能通过接口耦合，比各自单独运行都更强。<span class="em-red">The best context is no context.</span> Agent越轻量，表现越好。
      </blockquote>
      <div class="editorial-source">—— Agent认知笔记</div>
    </div>

    <div style="flex:1; min-height: 20px;"></div>

  </div>

  <!-- FOOTER -->
  <div class="footer-bar">
    <span class="footer-left">Agent Insight</span>
    <span class="footer-center">"The best context is no context"</span>
    <span class="footer-right">2026</span>
  </div>

</div>
</body>
</html>

Related skills

Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k

Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665

Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665

Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665

Remotion RenderRender videos programmatically using React components and Remotion framework441k665

Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

Generative Mediaui

About

Article To Html by the numbers

Add your badge

What it does

Files

文章转 HTML 信息图

设计理念

工作流程

目录结构

快速开始

使用方法

输出

截图方法

方法 1：浏览器截图

方法 2：命令行截图（推荐）

自定义

设计规范

核心美学：实验室精密手册 × 波普实验

色彩系统

主色板

色彩规则

网格系统

坐标标签

模块卡片

排版层级

特殊元素

荧光笔标记

避坑警告块

数据强调

Article-to-HTML

效果

特点

文件结构

安装

技术底线

License

技术底线

必须包含的 CSS

字号（1080px 画布，手机缩放 ~3x）

布局

禁止

截图流程

方案 A：HTTP 服务 + Chrome DevTools（推荐）

常见坑

方案 B：手动截图

风格灵感库

调性 → 方向映射

9 种参考方向

商务简报

暗色科技

手账笔记

实验室蓝图

杂志编辑

孟菲斯波普

报纸新闻

极简北欧

复古未来

templates/ 目录

Related skills

This week in AI coding