| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>NYT Chart · AI Agent MAU 2018–2026</title> |
| 6 | <script src="https://cdn.tailwindcss.com"></script> |
| 7 | <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" /> |
| 8 | <style> |
| 9 | body { font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background:#f7f5ee; color:#1a1a1a; margin:0; } |
| 10 | .serif { font-family:'Source Serif Pro',Georgia,serif; } |
| 11 | .mono { font-family:'IBM Plex Mono',ui-monospace,monospace; } |
| 12 | .nyt-red { color:#a91d1d; } |
| 13 | .nyt-red-fill { fill:#a91d1d; } |
| 14 | .kicker { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; } |
| 15 | @keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } } |
| 16 | .line { stroke-dasharray:1000; animation: draw 1.4s ease-out forwards; animation-delay: .4s; opacity:0; animation-fill-mode: forwards; } |
| 17 | .line { animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards; } |
| 18 | @keyframes fadeIn { to { opacity:1 } } |
| 19 | </style> |
| 20 | </head> |
| 21 | <body class="min-h-screen flex items-center justify-center p-12"> |
| 22 | <article class="w-[1280px] max-w-full"> |
| 23 | <header class="flex items-baseline justify-between"> |
| 24 | <div class="kicker nyt-red font-semibold">GLOBAL · MONTHLY ACTIVE USERS · 2018–2026</div> |
| 25 | <div class="kicker opacity-60 mono">FRAME 04 · CHART</div> |
| 26 | </header> |
| 27 | |
| 28 | <h1 class="serif mt-3 leading-[1.05] font-medium" style="font-size:clamp(36px,4.4vw,68px)"> |
| 29 | AI agent 月活在 <span class="nyt-red italic">2024 之后</span> 进入两段抛物线 ——<br/> |
| 30 | 第一段由云端 Claude / GPT 推动, 第二段由本地 CLI agent 普及。 |
| 31 | </h1> |
| 32 | |
| 33 | <!-- chart --> |
| 34 | <svg viewBox="0 0 1100 460" class="mt-8 w-full"> |
| 35 | <!-- y axis hairlines --> |
| 36 | <g stroke="#1a1a1a" stroke-width="0.5" opacity="0.25"> |
| 37 | <line x1="60" y1="60" x2="1040" y2="60"/> |
| 38 | <line x1="60" y1="180" x2="1040" y2="180"/> |
| 39 | <line x1="60" y1="300" x2="1040" y2="300"/> |
| 40 | <line x1="60" y1="420" x2="1040" y2="420"/> |
| 41 | </g> |
| 42 | <!-- y labels --> |
| 43 | <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6"> |
| 44 | <text x="20" y="64">640M</text> |
| 45 | <text x="20" y="184">420M</text> |
| 46 | <text x="20" y="304">210M</text> |
| 47 | <text x="20" y="424">0</text> |
| 48 | </g> |
| 49 | <!-- area band --> |
| 50 | <path d="M 60 410 L 180 405 L 300 395 L 420 380 L 540 355 L 660 320 L 780 270 L 900 195 L 1020 90 L 1020 420 L 60 420 Z" fill="#a91d1d" opacity="0.06"/> |
| 51 | <!-- main line --> |
| 52 | <polyline class="line" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" |
| 53 | points="60,410 180,405 300,395 420,380 540,355 660,320 780,270 900,195 1020,90" /> |
| 54 | <!-- accent inflection --> |
| 55 | <polyline fill="none" stroke="#a91d1d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 5" |
| 56 | points="780,270 900,195 1020,90" /> |
| 57 | <!-- data points --> |
| 58 | <g> |
| 59 | <circle cx="60" cy="410" r="4" fill="#1a1a1a"/> |
| 60 | <circle cx="180" cy="405" r="4" fill="#1a1a1a"/> |
| 61 | <circle cx="300" cy="395" r="4" fill="#1a1a1a"/> |
| 62 | <circle cx="420" cy="380" r="4" fill="#1a1a1a"/> |
| 63 | <circle cx="540" cy="355" r="4" fill="#1a1a1a"/> |
| 64 | <circle cx="660" cy="320" r="4" fill="#1a1a1a"/> |
| 65 | <circle cx="780" cy="270" r="6" class="nyt-red-fill"/> |
| 66 | <circle cx="900" cy="195" r="6" class="nyt-red-fill"/> |
| 67 | <circle cx="1020" cy="90" r="6" class="nyt-red-fill"/> |
| 68 | </g> |
| 69 | <!-- annotations --> |
| 70 | <g class="mono" font-size="11" fill="#1a1a1a"> |
| 71 | <text x="784" y="250">2024 · 310M</text> |
| 72 | <text x="894" y="175" class="nyt-red-fill">2025 · 468M</text> |
| 73 | <text x="1010" y="70" class="nyt-red-fill" text-anchor="end">2026 · 640M</text> |
| 74 | </g> |
| 75 | <!-- inflection callout --> |
| 76 | <g class="serif" font-style="italic" fill="#a91d1d"> |
| 77 | <text x="800" y="380" font-size="14">⤴ Inflection point</text> |
| 78 | <text x="800" y="398" font-size="14">local CLI agents普及</text> |
| 79 | </g> |
| 80 | <!-- x labels --> |
| 81 | <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6"> |
| 82 | <text x="60" y="445" text-anchor="middle">'18</text> |
| 83 | <text x="180" y="445" text-anchor="middle">'19</text> |
| 84 | <text x="300" y="445" text-anchor="middle">'20</text> |
| 85 | <text x="420" y="445" text-anchor="middle">'21</text> |
| 86 | <text x="540" y="445" text-anchor="middle">'22</text> |
| 87 | <text x="660" y="445" text-anchor="middle">'23</text> |
| 88 | <text x="780" y="445" text-anchor="middle">'24</text> |
| 89 | <text x="900" y="445" text-anchor="middle">'25</text> |
| 90 | <text x="1020" y="445" text-anchor="middle">'26</text> |
| 91 | </g> |
| 92 | </svg> |
| 93 | |
| 94 | <footer class="mt-3 flex items-baseline justify-between mono text-[10.5px] opacity-60"> |
| 95 | <span>Source · Synthesized industry estimates, 2026-05</span> |
| 96 | <span>Chart by HTML-Anything</span> |
| 97 | <span>NYT-STYLE · FRAME-DATA-CHART-NYT</span> |
| 98 | </footer> |
| 99 | </article> |
| 100 | </body> |
| 101 | </html> |
| 102 |