构建 · 自动化系统

请用大白话解释 MCP（Model Context Protocol）：

1. MCP 是什么？为什么它被称为 AI 的"USB-C 接口"？
2. MCP 和普通的 API 调用有什么区别？
3. 列举 5 个最常用的 MCP Server 及其用途
4. 配置一个 MCP Server 需要什么？（需要我写代码吗？）
5. 作为非程序员，我最应该优先配置哪几个 MCP Server？

用生活比喻让我理解。

【在 ~/.claude/settings.json 中添加】

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "你的token"
      }
    }
  }
}

【配置后测试命令】
- "查看我最近提交的 commit"
- "帮我创建一个 issue，标题是[XXX]，内容是[XXX]"
- "查看这个仓库的 open issues"
- "帮我写这个 PR 的描述"

【在 ~/.claude/settings.json 中添加】

{
  "mcpServers": {
    "sqlite": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite"],
      "env": {
        "SQLITE_DB_PATH": "/path/to/your/database.db"
      }
    }
  }
}

【创建测试表】
CREATE TABLE products (
  id INTEGER PRIMARY KEY,
  name TEXT,
  country TEXT,
  quantity INTEGER,
  revenue REAL
);

【中文查询示例】
- "总销售额是多少？"
- "按国家分组，显示每个国家的订单量"
- "找出销量超过 1000 的产品"
- "这个月比上个月增长了多少？"

【在 ~/.claude/settings.json 中添加】

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

【安装前置依赖】
npm install -g puppeteer

【使用场景示例】
- "打开 https://example.com，截图首页保存为 homepage.png"
- "测试我的联系表单，填写测试数据并提交"
- "模拟手机访问我的网站，截图移动端效果"
- "抓取这个页面的所有产品名称和价格"
- "检查我的网站在深色模式下的显示效果"

请帮我批量处理以下文件任务：

【任务1：分类整理】
把 /path/to/messy-folder 里的文件按类型分类：
- 图片 (.jpg, .png, .gif) → images/
- 文档 (.pdf, .doc, .txt) → documents/
- 表格 (.csv, .xlsx) → spreadsheets/
- 其他 → others/

【任务2：生成清单】
生成一个 inventory.md，列出所有文件：
- 文件名
- 类型
- 大小
- 修改日期
- 新路径

【任务3：批量重命名】
给 images/ 下的所有文件加上日期前缀（如 2026-01-15_原文件名）

请确认每一步操作前告诉我你要做什么。

请帮我完成以下端到端工作流：

【步骤1：读取数据】
读取 /data/sales-january.csv，了解数据结构

【步骤2：导入数据库】
把 CSV 数据导入 SQLite 数据库的 sales 表
（如果表不存在，先创建合适的表结构）

【步骤3：数据分析】
生成以下统计：
- 总销售额
- 销量 Top 5 产品
- 按国家分组的销售额
- 销售额趋势（如果有日期数据）

【步骤4：生成报告】
把分析结果写成一份 Markdown 报告，保存为 /reports/sales-january.md

【步骤5：提交到 GitHub】
把报告文件提交到 GitHub 仓库，创建一个新 issue 提醒团队查看

请逐步执行，每步完成后告诉我结果。

【我的重复任务审计】

| 任务 | 频率 | 每次耗时 | 步骤是否固定 | 自动化难度 | 优先级 |
|------|------|---------|-------------|-----------|--------|
| 例：回复客户询价邮件 | 每天 5 次 | 15 分钟 | 是（改名字/产品/价格） | 低 | P0 |
| | | | | | |
| | | | | | |

【筛选标准】
- P0：每天做、步骤固定、耗时长
- P1：每周做、有模板可循
- P2：每月做、可以批量处理

【自动化方案】
对于每个 P0 任务，思考：
1. 输入是什么？（客户信息、产品数据）
2. 处理步骤是什么？（查价格→写邮件→发出去）
3. 输出是什么？（邮件、报价单、回复）
4. 哪些步骤可以用 AI 替代？

【批量 SEO 内容生成器】

请帮我为以下产品列表批量生成 SEO 内容：

输入数据（CSV 格式）：
```
name,main_keyword,target_audience,price
ABC Corp,[产品类别],manufacturers,125.00
GreenPack,eco packaging,retailers,2.50
XYZ Ltd,[产品类别],factories,280.00
```

请为每个产品生成：
1. SEO Title（50-60 字符，包含 main_keyword）
2. Meta Description（150-160 字符，有卖点和 CTA）
3. 3 个长尾关键词
4. 图片 Alt 文本（2 个变体）
5. H1 标题建议

输出格式：CSV，每行一个产品，列为：
name,title,description,keywords,alt_1,alt_2,h1

要求：
- 语言：英文（面向海外 SEO）
- 风格：专业、有说服力
- 避免关键词堆砌

【外贸内容工厂 — Project Instructions】

## 角色
你是专业的 B2B 外贸文案写手，擅长写高转化率的产品描述和开发信。

## 品牌调性
- 专业但不生硬，友好但不随意
- 多用数据和具体参数（如"耐压 16bar"而不是"质量很好"）
- 强调工厂优势和定制能力
- 语气面向欧美批发商，不是终端消费者

## 输出格式
每个产品包含：
1. 英文产品名（简洁、含关键词）
2. 英文描述（3-4 句话，包含核心卖点）
3. 5 个 Bullet Points（突出功能/优势）
4. 开发信片段（可用于邮件营销）

## 禁用词
- 不要夸大（"best", "top 1"）
- 不要过度承诺（"lifetime warranty"）
- 不要用中式英语

## 目标受众
欧美中小型批发商，关注质量、交期、MOQ

请为以下产品生成完整的英文内容包：

产品 1：
- 名称：[产品名称]
- 卖点：[卖点1 / 卖点2 / 卖点3 / 卖点4]
- 参数：[参数1 / 参数2 / 参数3]
- MOQ：[起订量]
- 交期：[交货周期]

[继续添加产品 2-5]

请用 Artifacts 输出，每个产品一个独立区块。

请帮我写一个 Node.js 脚本处理 CSV 文件：

【输入文件】orders.csv，包含字段：
- order_id, customer_name, country, product, quantity, unit_price, order_date

【处理需求】
1. 读取 CSV 文件
2. 计算每个订单的总金额（quantity × unit_price）
3. 按国家分组，统计：
   - 订单数量
   - 总销售额
   - 平均订单金额
4. 按月份分组，统计每月销售额趋势
5. 输出两个文件：
   - summary-by-country.csv
   - summary-by-month.csv

【要求】
- 使用纯 Node.js（不依赖外部库，或只用 csv-parser）
- 有错误处理（文件不存在、格式错误）
- 在控制台打印处理进度
- 代码加上中文注释

【方案 A：cron-job.org（最简单）】

1. 注册 https://cron-job.org
2. 点击 "Create cronjob"
3. 填写：
   - Title: 每日汇率更新
   - URL: 你的脚本地址（如 Vercel Function URL）
   - Schedule: Every day at 8:00 AM
4. 保存，等待第一次执行

【方案 B：GitHub Actions（适合代码任务）】

在仓库创建 .github/workflows/daily-report.yml：

name: Daily Report
on:
  schedule:
    - cron: '0 8 * * *'  # 每天 UTC 8:00
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: node scripts/generate-report.js
      - run: git add reports/ && git commit -m "daily report" && git push

请帮我创建一个"自动化产品目录生成器"：

【输入】products.json
[
  {
    "name": "[产品名称]",
    "category": "[产品类别]",
    "price": 125.00,
    "moq": 100,
    "features": ["[特性1]", "[特性2]", "[特性3]"],
    "image": "https://example.com/product.jpg"
  }
]

【处理流程】
1. 读取 products.json
2. 按 category 分组
3. 为每个产品生成一段英文描述（用 AI 或模板）
4. 生成一个完整的 HTML 产品目录页：
   - 封面：公司名 + 日期
   - 目录导航（按分类）
   - 产品网格（图片 + 名称 + 描述 + 价格 + MOQ）
   - 联系方式
5. 保存为 catalog-YYYY-MM-DD.html

【样式要求】
- 专业商务风格，白底深色文字
- 响应式布局
- 打印友好（@media print 优化）
- 有页眉页脚

请生成完整的 Node.js 脚本。

请帮我规划一个"客户管理系统"的多页面架构：

【系统需求】
- 管理 100+ 客户信息
- 记录每次跟进/沟通
- 查看客户历史订单
- 生成客户统计报表

【页面清单】（请帮我补充）
1. index.html - 仪表盘（统计、待办、最近活动）
2. customers.html - 客户列表（搜索、筛选、排序）
3. customer-detail.html - 客户详情（信息 + 跟进记录 + 订单历史）
4. customer-form.html - 添加/编辑客户
5. followup-form.html - 添加跟进记录
6. reports.html - 报表（按国家/行业/状态统计）

【请帮我】
1. 完善页面清单，补充我遗漏的页面
2. 设计每个页面的核心功能和数据需求
3. 画出页面间的跳转关系
4. 推荐技术方案（纯前端 localStorage vs 后端数据库）
5. 给出项目文件夹结构建议

【shared-state.js】

const STORAGE_KEY = 'crm-app-data';

export function getData(key) {
  const all = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
  return all[key] || [];
}

export function setData(key, value) {
  const all = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
  all[key] = value;
  localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
  // 触发变更事件，通知其他页面
  window.dispatchEvent(new CustomEvent('data-changed', { detail: { key } }));
}

export function onDataChange(key, callback) {
  window.addEventListener('data-changed', (e) => {
    if (e.detail.key === key) callback(getData(key));
  });
}

/* 使用示例 */
import { getData, setData, onDataChange } from './shared-state.js';

// 读取客户列表
const customers = getData('customers');

// 添加客户并触发更新
const newCustomers = [...customers, { name: 'ABC Trading', country: 'US' }];
setData('customers', newCustomers);

// 监听变化（在另一个页面）
onDataChange('customers', (customers) => {
  console.log('客户列表更新了：', customers);
  renderCustomerList(customers);
});

【CRM 系统项目结构】

crm-system/
├── index.html          # 仪表盘首页
├── customers.html      # 客户列表
├── customer-detail.html # 客户详情
├── customer-form.html  # 添加/编辑客户
├── shared-state.js     # 状态管理
├── style.css           # 共享样式
└── README.md           # 项目说明

【核心数据结构】
{
  "customers": [
    {
      "id": "c-001",
      "name": "ABC Trading",
      "country": "US",
      "contact": "John Smith",
      "email": "[email protected]",
      "status": "prospect",  // prospect/contacted/quoted/ordered/dormant
      "tags": ["electronics", "wholesale"],
      "createdAt": "2026-01-15",
      "followups": [
        { "date": "2026-01-20", "note": "Sent catalog", "type": "email" }
      ]
    }
  ]
}

请帮我生成这个 CRM 的完整代码。

请帮我给 CRM 客户列表添加搜索、筛选、排序功能：

【当前数据】
const customers = [
  { name: "ABC Trading", country: "US", status: "prospect", lastFollowup: "2026-01-20" },
  { name: "Sunrise GmbH", country: "DE", status: "quoted", lastFollowup: "2026-01-18" },
  // ...
];

【搜索】
- 输入框实时搜索（debounce 300ms）
- 搜索字段：name, contact, email, tags
- 模糊匹配（包含即可，不区分大小写）

【筛选】
- 国家：多选下拉（US, DE, UK, JP...）
- 状态：单选（all/prospects/contacted/quoted/ordered/dormant）
- 最近跟进：时间范围（7天内/30天内/90天内/超过90天）

【排序】
- 按名称 A-Z / Z-A
- 按创建时间 最新/最旧
- 按最近跟进时间 最新/最旧
- 按国家 A-Z

【UI 要求】
- 筛选条件显示为标签，可一键清除
- 结果数实时显示
- 无结果时显示友好提示

【导出为 CSV】

function exportToCSV(data, filename) {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(row =>
    Object.values(row).map(v => `"${String(v).replace(/"/g, '\"')}"`).join(',')
  );
  const csv = [headers, ...rows].join('\n');
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

【导入 CSV（浏览器端）】

function importFromCSV(file, onComplete) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const text = e.target.result;
    const lines = text.trim().split('\n');
    const headers = lines[0].split(',').map(h => h.trim());
    const data = lines.slice(1).map(line => {
      const values = line.split(',').map(v => v.trim().replace(/^"|"$/g, ''));
      const obj = {};
      headers.forEach((h, i) => obj[h] = values[i]);
      return obj;
    });
    onComplete(data);
  };
  reader.readAsText(file);
}

【使用】
// 导出
exportToCSV(customers, `customers-${new Date().toISOString().slice(0,10)}.csv`);

// 导入
<input type="file" accept=".csv" onchange="handleImport(this.files[0])">

请帮我创建一个业务数据仪表盘（dashboard.html）：

【数据源】从 shared-state.js 读取客户数据

【KPI 卡片】（顶部一排）
- 总客户数 + 本月新增
- 待跟进客户数
- 本月成交客户数
- 平均订单金额
- 转化率（线索→成交）

【图表区域】（中部）
- 客户增长趋势折线图（近 12 个月）
- 客户分布饼图（按国家）
- 销售漏斗图（线索→联系→报价→成交）

【列表区域】（底部）
- 最近 5 个新增客户
- 最近 5 条跟进记录
- 待跟进提醒（超过 7 天未跟进的客户）

【设计要求】
- 深色背景，卡片式布局
- 数字有计数动画（从 0 滚动到目标值）
- 响应式：手机上图表堆叠显示
- 时间筛选器：本周/本月/本季度/今年

请用 Chart.js 做图表，生成完整代码。

【后端方案选择指南】

方案1：Serverless（推荐入门）
- 平台：Vercel Functions、Cloudflare Workers、Netlify Functions
- 优点：零运维、自动扩容、有免费额度
- 缺点：执行时间有限制（几秒到几分钟）
- 适合：API 接口、轻量数据处理、定时任务
- 成本：免费额度足够个人使用

方案2：BaaS（Backend as a Service）
- 平台：Supabase、Firebase、Appwrite
- 优点：自带数据库、认证、存储，开箱即用
- 缺点： vendor lock-in（绑定平台）
- 适合：需要用户登录、实时同步、多用户协作
- 成本： generous 免费额度

方案3：自建服务器
- 平台：AWS EC2、DigitalOcean、阿里云
- 优点：完全控制，没有限制
- 缺点：需要运维知识，成本高
- 适合：大型应用、企业级部署

【外贸工具推荐】Serverless + Supabase 组合

【项目结构】

my-api/
├── api/
│   └── hello.js
└── package.json

【api/hello.js】
export default function handler(req, res) {
  res.status(200).json({
    message: "Hello from Serverless!",
    time: new Date().toISOString()
  });
}

【前端调用】
async function callApi() {
  const response = await fetch('/api/hello');
  const data = await response.json();
  console.log(data); // { message: "Hello...", time: "..." }
}

【部署命令】
vercel --prod

【获得 URL】
https://your-project.vercel.app/api/hello

【步骤1：安装 Turso CLI】
curl -sSfL https://get.tur.so/install.sh | bash

【步骤2：登录并创建数据库】
turso auth login
turso db create my-app-db

【步骤3：获取连接信息】
turso db show my-app-db
turso db tokens create my-app-db

【步骤4：在 Vercel Function 中使用】
import { createClient } from "@libsql/client";

const client = createClient({
  url: process.env.TURSO_DATABASE_URL,
  authToken: process.env.TURSO_AUTH_TOKEN,
});

export default async function handler(req, res) {
  const result = await client.execute("SELECT * FROM customers");
  res.status(200).json({ customers: result.rows });
}

【环境变量配置（Vercel Dashboard）】
TURSO_DATABASE_URL = libsql://...
TURSO_AUTH_TOKEN = 你的token

【CRM 系统的 API 设计】

GET    /api/customers          → 获取客户列表（支持 ?search=&status=）
POST   /api/customers          → 创建新客户（Body: JSON）
GET    /api/customers/:id      → 获取单个客户详情
PUT    /api/customers/:id      → 更新客户信息
DELETE /api/customers/:id      → 删除客户

GET    /api/followups          → 获取跟进记录
POST   /api/followups          → 添加跟进记录

GET    /api/stats              → 获取统计数据（KPI）

【请求示例】
// 创建客户
fetch('/api/customers', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'ABC Trading',
    country: 'US',
    status: 'prospect'
  })
});

【响应格式】
{
  "success": true,
  "data": { ... },
  "message": "Customer created"
}

【BetterAuth 安装】
npm install better-auth

【后端配置（Vercel Function）】
import { betterAuth } from "better-auth";
import { Database } from "@libsql/client"; // Turso

export const auth = betterAuth({
  database: new Database(process.env.TURSO_DATABASE_URL),
  socialProviders: {},
  emailAndPassword: {
    enabled: true
  }
});

【前端登录】
import { createAuthClient } from "better-auth/client";

const client = createAuthClient();

async function login(email, password) {
  const result = await client.signIn.email({ email, password });
  if (result.error) {
    alert(result.error.message);
  } else {
    localStorage.setItem('token', result.data.token);
    window.location.href = '/dashboard';
  }
}

【Vercel 全栈项目结构】

crm-fullstack/
├── api/                    # 后端 API
│   ├── customers.js        # GET/POST /api/customers
│   ├── customer/[id].js    # GET/PUT/DELETE /api/customers/:id
│   ├── auth/
│   │   └── [...auth].js    # BetterAuth 路由
│   └── stats.js            # GET /api/stats
├── public/                 # 前端静态文件
│   ├── index.html
│   ├── customers.html
│   ├── dashboard.html
│   └── js/
│       └── app.js
├── package.json
└── vercel.json

【部署命令】
vercel --prod

【环境变量（Vercel Dashboard）】
TURSO_DATABASE_URL=
TURSO_AUTH_TOKEN=
BETTER_AUTH_SECRET=

请帮我做一个完整的全栈【订单管理系统】，部署到 Vercel：

【前端页面】
1. index.html - 仪表盘（今日订单、本月销售、待发货数）
2. orders.html - 订单列表（搜索、筛选、排序）
3. order-form.html - 添加/编辑订单
4. login.html - 登录页面

【后端 API】
- GET/POST /api/orders
- GET/PUT/DELETE /api/orders/:id
- GET /api/stats
- POST /api/auth/*

【数据库表】
orders: id, customer_name, product, quantity, price, status, created_at
users: id, email, password_hash

【功能要求】
- 用户注册/登录
- 订单的增删改查
- 按状态筛选（pending/shipped/delivered/cancelled）
- 数据导出为 CSV
- 响应式设计

【部署】
- Vercel + Turso + BetterAuth
- 给出完整的项目结构和部署步骤

【前端错误处理】

async function fetchWithErrorHandling(url, options) {
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || `HTTP ${response.status}`);
    }
    return await response.json();
  } catch (err) {
    console.error('API Error:', err);
    showNotification(err.message, 'error');
    return null;
  }
}

【后端日志】
export default function handler(req, res) {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url} - IP: ${req.headers['x-forwarded-for']}`);

  try {
    // 业务逻辑
    res.status(200).json({ success: true, data: result });
  } catch (err) {
    console.error('Server Error:', err);
    res.status(500).json({ success: false, message: err.message });
  }
}

【心跳检测（GitHub Actions）】
name: Health Check
on:
  schedule:
    - cron: '0 */6 * * *'  # 每6小时检查一次
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - run: curl -f https://your-app.vercel.app/api/health || exit 1

【AI 辅助编程 90 天技能地图】

Month 1 — AI 思维与协作
□ AI 超级实习生思维
□ Prompt 工程（三要素、SPEC）
□ Claude Code 安装与使用
□ Claude Projects + Artifacts
□ Skills 封装与复用
□ 无代码建站（HTML/CSS 描述）
□ 响应式设计概念
□ SEO 基础
□ GitHub Pages 部署

Month 2 — 编程基础
□ HTML 结构与语义化
□ CSS 样式与布局（Flexbox）
□ JavaScript 基础（变量、函数、条件）
□ DOM 操作与事件处理
□ API 调用（fetch）
□ localStorage 数据持久化
□ Git 版本控制
□ GitHub 协作
□ Debug 与代码审查

Month 3 — 自动化与全栈
□ MCP 工具链集成
□ GitHub/数据库/浏览器 MCP
□ 批量 SEO 与内容生成
□ 数据处理自动化
□ 定时任务（Cron）
□ 多页面应用架构
□ 状态管理与数据同步
□ 搜索筛选排序实现
□ CSV 导入导出
□ 仪表盘与数据可视化
□ Serverless 后端（Vercel）
□ 数据库（Turso/Neon）
□ RESTful API 设计
□ 用户认证（BetterAuth）
□ 全栈部署与运维

【项目展示文案】

标题：我用 AI 90 天做了一个订单管理系统

正文：
90 天前我还是一个完全不懂编程的外贸业务员。

今天，我上线了一个完整的订单管理系统：
✅ 用户注册/登录
✅ 订单增删改查
✅ 数据筛选和导出
✅ 实时统计仪表盘
✅ 手机电脑都能用

技术栈：
前端：HTML/CSS/JS + Chart.js
后端：Vercel Serverless + Turso 数据库
认证：BetterAuth
部署：Vercel

全部用 Claude Code 辅助开发，
从想法到上线只用了 2 周。

🔗 在线体验：[你的链接]
📹 演示视频：[视频链接]

#AI编程 #无代码 #外贸工具 #独立开发

【我的下一个 90 天计划】

目标1：[具体目标，如"把 CRM 卖给 10 个外贸同行"]
→ 需要学什么：[技术/营销/销售]
→ 关键里程碑：[30天/60天/90天]

目标2：[具体目标，如"搭建公司内部的自动化工作流"]
→ 需要学什么：[n8n/Zapier/API 集成]
→ 关键里程碑：

目标3：[具体目标，如"学习 React 重做前端"]
→ 需要学什么：[React/TypeScript/Tailwind]
→ 关键里程碑：

每周投入时间：[X] 小时
每天投入时间：[X] 分钟

成功标准：
- [可量化的指标1]
- [可量化的指标2]
- [可量化的指标3]