用 Claude Artifacts 搭一条可导出的月报链路

Claude Artifacts 随 Claude 3.5 Sonnet 一同推出，可以生成单页 React 或 HTML 网站、代码片段、文档和图表。据《人人都是产品经理》对 Anthropic 构建过程的整理，Artifacts 从简陋原型推进到上线，多个团队协作了 3 个月，过程中用到 Streamlit、Node.js 和 React 等技术。

这段经历也说明了它适合做什么：把一份内容放进独立区域，边预览边修改。另一篇资料将自动创建 Artifact 的判断概括为内容超过 15 行、构成独立作品或具有迭代潜力。不过，“15 行”更适合理解为产品行为描述，不能当成稳定的 API 规则。

如果要用它生成月度运营报告，可以让 Artifact 承担模板、图表和交互。真实数据接入、定时执行、邮件投递和文件存储，则需要后端或自动化平台配合。这样定位，比直接把它包装成“工作流引擎”更接近实际。

一条最小链路可以写成：

JSON 数据 → 字段检查 → React 模板 → 图表与表格 → PDF

如果还要自动发邮件或上传云存储，再从 PDF 之后接外部服务。

先别让摘要跑在数据前面

下面沿用原稿中的三个月示例数据：

[
  {"month": "1月", "users": 1200, "revenue": 45000},
  {"month": "2月", "users": 1350, "revenue": 52000},
  {"month": "3月", "users": 1500, "revenue": 61000}
]

这组数据能支持的判断很有限：1 月至 3 月，用户数从 1200 增至 1500，营收值从 45000 增至 61000，两项指标均连续上升。原稿中的“营收同比增长 15%”无法由这些数据得出，因为没有上年同期数据。

报告标题也不宜写成“2026 年 Q2 运营分析报告”。示例月份是 1 月至 3 月，素材里没有给出年份。改成“月度运营报告”更稳妥。

让 React 固定报告结构

在 Artifact 里建立 React 组件后，可以把标题、摘要、指标和图表分开渲染。下面仍使用 recharts；如果当前环境无法加载该依赖，可以先换成表格、SVG 或其他可用的可视化方式。

import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer
} from 'recharts';

const mockData = [
  { month: '1月', users: 1200, revenue: 45000 },
  { month: '2月', users: 1350, revenue: 52000 },
  { month: '3月', users: 1500, revenue: 61000 }
];

export default function MonthlyReportGenerator() {
  const reportData = {
    title: '月度运营报告',
    date: new Date().toLocaleDateString(),
    metrics: mockData,
    summary: '示例数据中，1月至3月的用户数和营收连续上升。'
  };

  return (
    <div>
      <button className='no-print' onClick={() => window.print()}>
        打印或另存为 PDF
      </button>

      <article id='report-content' className='report-container'>
        <header>
          <h1>{reportData.title}</h1>
          <p>生成时间：{reportData.date}</p>
        </header>

        <section>
          <h2>数据摘要</h2>
          <p>{reportData.summary}</p>
        </section>

        <section>
          <h2>用户与营收趋势</h2>
          <div style={{ width: '100%', height: 300 }}>
            <ResponsiveContainer>
              <LineChart data={reportData.metrics}>
                <CartesianGrid strokeDasharray='3 3' />
                <XAxis dataKey='month' />
                <YAxis yAxisId='users' />
                <YAxis yAxisId='revenue' orientation='right' />
                <Tooltip />
                <Line
                  yAxisId='users'
                  type='monotone'
                  dataKey='users'
                  stroke='#8884d8'
                />
                <Line
                  yAxisId='revenue'
                  type='monotone'
                  dataKey='revenue'
                  stroke='#82ca9d'
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </section>
      </article>
    </div>
  );
}

这段组件完成的是展示层。接入真实 CRM 或内部数据库时，需要先在后端取得数据，再按 month、users、revenue 这样的固定字段传入组件。访问令牌和数据库凭据不应直接写进 Artifact 代码。

PDF 导出先用浏览器能力

最省事的做法是调用 window.print()，再通过浏览器打印面板另存为 PDF。配合打印样式，可以隐藏按钮并清理页面边距：

@media print {
  .no-print {
    display: none;
  }

  .report-container {
    margin: 0;
    box-shadow: none;
  }
}

这种方式不需要额外依赖，但仍然需要用户在打印面板里确认。若当前 Artifact 环境能够加载 jsPDF 和 html2canvas，也可以把报告节点转成图片后写入 PDF：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

async function handleExportPDF() {
  const element = document.getElementById('report-content');
  if (!element) return;

  const canvas = await html2canvas(element);
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF();
  const imgProps = pdf.getImageProperties(imgData);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

  pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
  pdf.save('monthly_report.pdf');
}

这套写法适合短报告。页面较长时还要处理分页；经过 html2canvas 后，正文会以图片形式进入 PDF，文本复制和搜索也可能受到影响。正式使用前，最好先确认当前沙盒是否支持相关依赖和下载行为。

邮件按钮不等于自动化

原稿中的 /api/send-report 只有在后端确实存在这条路由时才会工作。Artifact 不会凭空生成邮件服务。

async function sendSummaryEmail(reportUrl) {
  if (!reportUrl) {
    throw new Error('缺少可访问的报告地址');
  }

  const response = await fetch('/api/send-report', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ reportUrl })
  });

  if (!response.ok) {
    throw new Error('报告发送失败');
  }
}

还要注意一个细节：浏览器本地生成的 PDF 不会自动得到公开的 reportUrl。如果邮件接口接收的是链接，就要先把文件上传到可访问的存储位置；如果接口接收文件，则需要把 PDF 数据提交给后端。

Zapier 或 Make.com 可以通过 Webhook 接收请求，但请求能否从 Artifact 发出，还取决于沙盒的网络限制、跨域设置和鉴权方式。遇到限制时，应把上传和发送动作放到自己的后端。

定时执行也一样。点击按钮属于人工触发；要在每月固定时间无人值守地生成报告，需要另接调度器。当前示例没有实际配置 MCP 服务、工具权限或调用链，因此也不宜称为“基于 MCP 的自动化工作流”。

Projects 更适合保存模板和规则

如果同时使用 Claude Projects，可以把字段说明、报告模板、固定参考资料和写作要求集中放置，减少每次生成月报时重复交代背景。它解决的是上下文复用，数据库连接、定时任务和邮件投递仍由其他系统处理。

最终可以把职责拆成两层：

• Artifact 内：接收结构化数据、检查字段、渲染模板、展示图表、人工预览和导出。
• Artifact 外：读取业务数据、保管密钥、定时触发、上传文件、发送邮件和记录执行结果。

对于固定字段、需要人工确认的月报，这套方式足够轻便。若目标是每月自动跑批并直接发给团队，Artifact 更适合充当报告原型和前端模板，执行部分应放到后端或自动化平台。

最后得到的链路并不神秘：

业务数据 → 字段校验 → Artifact 预览 → PDF → 后端上传或发送

参考资料

• 实战分享｜Anthropic 是如何构建 Claude Artifacts 的？
• Guide – Claude Artifacts
• Claude Artifacts：从对话到创造，AI 协作的革命性突破
• Claude Projects & Artifacts 101