Obsidian + Playwright MCP 真实发品全流程实操

发布时间：2026年7月1日（周三） 字数：约5000字 预计阅读时间：13分钟 标签：#实操 #Obsidian #Playwright #MCP #国际站 #发品自动化

---

我是你的AI前线部署工程师。不卖概念，只做能降本增效的落地系统。为企业提供AI解决方案设计、系统开发与长期陪跑服务。

---

前言：今天不做概念，只做实操

前四篇文章讲了 Agent、MD文档、MCP、项目化。

有读者后台问我：

"文章看完了，概念都懂了。但我打开电脑还是不知道第一步该干什么。"

今天这篇就是你的第一步。

我会用大量截图，一步一步带你跑通这条链路：

打开Obsidian知识库 → Agent读取产品资料 → 
Playwright MCP扫描发品页面 → 标注每个按钮 → 
生成按钮地图MD → 一键自动发品

全程真实操作，跟着做就能跑通。

📎 前文回顾：

• 第一篇：[Agent时代：外贸人如何正确选择和使用AI Agent？]（← 此处插入第一篇链接）
• 第二篇：[MD文档：Agent时代的项目化工作方法论]（← 此处插入第二篇链接）
• 第三篇：[MCP深度指南：外贸人必备的AI工具连接器]（← 此处插入第三篇链接）
• 第四篇：[把你的外贸工作建成一个项目]（← 此处插入第四篇链接）

---

准备工作（5分钟）

在开始之前，确保你已经有了：

---

第一步：打开你的 Obsidian 知识库

打开 Obsidian → 选择你的项目文件夹。你应该能看到类似这样的结构：

📸 [配图1]：Obsidian界面全景截图——左侧文件树显示项目文件夹结构（知识库/、Skills/、工作流/、MCP配置/、输出/等子文件夹），中间打开着 产品资料库.md，显示产品SKU表格。右侧显示关系图谱，能看到各个MD文档之间的双向链接。截你的真实Obsidian界面。

这是你整个项目的"大脑"。Agent在干活之前，第一步就是读这里。

展开 产品资料库.md，确认里面有至少一个完整SKU的数据：

# 产品资料库 — 快递袋系列

| SKU | 规格 | 材质 | 厚度 | MOQ | FOB深圳(USD) |
|-----|------|------|------|-----|-------------|
| KD-001 | 28×42cm | LDPE | 0.06mm | 10,000 | $0.028/pc |
| KD-002 | 38×52cm | LDPE | 0.07mm | 10,000 | $0.042/pc |

📸 [配图2]：产品资料库MD文档截图——展示SKU表格在Obsidian中的样子，用红框高亮一行的完整数据（SKU编号、规格、材质、价格等）。让读者看到"这就是Agent读取的原材料"。

确认 关键词库.md 里有对应的词库：

# 关键词库 — 快递袋分类

## ① 核心词
Courier Bags, Shipping Bags, Mailing Bags, Poly Mailers

## ② 材质词
LDPE, HDPE, Polyethylene, Plastic

## ③ 定制词
Custom Logo, OEM Service, Private Label, Custom Size

---

第二步：安装和配置 Playwright MCP

Playwright 是微软开发的浏览器自动化工具。Playwright MCP 就是把它包装成 Agent 能调用的接口——Agent 可以通过它"看"网页、"点"按钮、"填"输入框。

2.1 安装

npm install -g @anthropic-ai/mcp-server-playwright

2.2 配置到 Claude Code

打开 Claude Code 的 MCP 配置文件，添加：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-playwright"]
    }
  }
}

📸 [配图3]：MCP配置文件截图——展示上面的JSON代码在编辑器中的样子。用红框高亮 "playwright" 这一行和 "command" 配置行。让读者看到"加这几行就装好了"。

2.3 测试是否装好

重启 Claude Code，发一条测试指令：

"用 Playwright 打开百度首页，告诉我页面标题是什么"

如果 Agent 返回了页面标题 → 安装成功 ✅

---

第三步：让 Playwright MCP 扫描阿里国际站发品页面

这是全文最关键的一步。

打开阿里国际站后台，进入发品页面（随便选一个三级类目，比如快递袋类目）。

📸 [配图4]：阿里国际站发品页面完整截图——展示整个发品表单界面。这是后续所有标注的"底图"。截图需要包含：类目选择区、标题输入区、关键词输入区、属性填写区、图片上传区、详情描述区。不需要真实产品数据，用测试品或空表单截图即可。

3.1 让 Agent 扫描页面

在 Claude Code 中发送指令：

"用 Playwright MCP 打开我当前的浏览器页面（阿里国际站发品页），扫描页面上所有的输入框、下拉选择器、按钮、文本编辑区域。对每一个元素，返回它的标签类型、位置描述、以及它在页面中的用途。"

Agent 会通过 Playwright 扫描整个页面，返回类似这样的结果：

页面扫描结果 — 阿里国际站发品页（快递袋类目）

[1] <input> — 产品标题
    位置：页面上方，第一个大输入框
    当前值：（空）

[2] <input> — 产品关键词
    位置：标题下方，三个输入框并排
    当前值：（空）

[3] <select> — 产品类目（三级）
    位置：页面顶部面包屑导航下方
    当前值：Packaging & Printing > Courier Bags

[4] <input> — 自定义属性：材质
    位置：属性填写区，第一行
    data-field="material"

[5] <input> — 自定义属性：厚度
    位置：属性填写区，第二行
    data-field="thickness"

[6] <input> — FOB价格
    位置：价格填写区
    data-field="fob-price"

[7] <input type="file"> — 产品主图上传
    位置：图片上传区

[8] <textarea> — 产品详情描述
    位置：页面底部，富文本编辑器

...（共扫描到20+个可交互元素）

📸 [配图5]：Playwright扫描结果展示——可以是Claude Code终端输出的截图，显示上面这种元素列表。用红框高亮几个关键行：标题输入框、关键词输入框、属性区的材质和厚度。让读者看到"Agent真的能识别页面上每个按钮"。

---

第四步：逐一标注按钮，生成按钮地图

Agent 扫描完页面后，你要做的是告诉它每个位置填什么。

4.1 逐个标注

对每个元素逐一标注：

Agent："页面上的 input[1] 是产品标题，请问应该填入什么？"

你："标题的构成规则是：
{核心词} + {材质词} + {规格词} + {定制词} + {营销词}
例如：Courier Bags LDPE 28×42cm Custom Logo Wholesale
核心词从 [[关键词库.md]] 的'①核心词'读取
材质词从 [[关键词库.md]] 的'③材质词'读取
规格词从 [[产品资料库.md]] 对应SKU的'规格'列读取
"

Agent："页面上的 input[4] 是自定义属性'材质'，请问填入什么？"

你："从 [[产品资料库.md]] 对应SKU的'材质'列直接读取。KD-001的话就填 LDPE。"

Agent："页面上的 input[5] 是自定义属性'厚度'，请问填入什么？"

你："从 [[产品资料库.md]] 对应SKU的'厚度'列读取，保留单位。例如 0.06mm。"

📸 [配图6]：对话截图——Claude Code终端对话界面，展示上面的标注过程。用红框高亮你的回复中的关键指令（"从关键词库MD的①核心词读取"、"从产品资料库读取对应SKU的材质列"）。让读者看到"标注的过程就是把业务规则写入Agent"。

4.2 生成按钮地图MD文档

所有元素标注完毕后，让 Agent 生成一份按钮地图：

"把刚才所有标注的信息整理成一份MD文档，保存为 阿里发品-快递袋类目-按钮地图.md。每个元素记录：位置、xpath、填入内容的来源（从哪个MD文档的哪个位置读取）。"

Agent 输出：

📸 [配图7]：按钮地图MD文档截图——在Obsidian中展示上面这份文档。用红框高亮几个关键行：xpath路径、填入规则、知识库索引路径。让读者看到"标注完成后的成果物"。

# 阿里国际站发品 — 快递袋类目按钮地图

> 最后更新：2026-07-01 | 测试SKU：KD-001, KD-002, KD-003 | 状态：✅ 已验证

## 基本信息区

### 产品标题
- 元素：`<input id="subject">`
- xpath：`//input[@id='subject']`
- 填入规则：`{①核心词} + {③材质词} + {⑨规格词} + {⑥定制词} + {⑦营销词}`
- 数据来源：`[[关键词库.md]]` ①②③⑥⑦⑨维度 + `[[产品资料库.md]]` SKU规格列
- 示例：`Courier Bags LDPE 28×42cm Custom Logo Wholesale Supplier`

### 产品关键词
- 元素：`<input id="keyword1">` / `<input id="keyword2">` / `<input id="keyword3">`
- xpath：`//input[contains(@id, 'keyword')]`
- 填入规则：3个核心词（用逗号分隔），每个框填1个核心词+2个长尾词
- 数据来源：`[[关键词库.md]]` ①②③⑤维度

## 属性填写区

### 材质
- 元素：`<input data-field="material">`
- xpath：`//input[@data-field='material']`
- 填入规则：直接读取SKU对应材质
- 数据来源：`[[产品资料库.md]]` → 目标SKU行 → 材质列

### 厚度
- 元素：`<input data-field="thickness">`
- xpath：`//input[@data-field='thickness']`
- 填入规则：直接读取SKU对应厚度，保留单位
- 数据来源：`[[产品资料库.md]]` → 目标SKU行 → 厚度列

### 尺寸
- 元素：`<input data-field="size">`
- xpath：`//input[@data-field='size']`
- 填入规则：直接读取SKU对应规格
- 数据来源：`[[产品资料库.md]]` → 目标SKU行 → 规格列

## 价格区

### FOB价格
- 元素：`<input data-field="fob-price">`
- xpath：`//input[@data-field='fob-price']`
- 填入规则：直接读取SKU对应FOB报价，🔴需人工确认
- 数据来源：`[[报价表.md]]` → 目标SKU行 → FOB深圳列

## 图片上传区

### 产品主图
- 元素：`<input type="file" id="main-image">`
- xpath：`//input[@id='main-image']`
- 填入规则：按顺序上传该SKU的产品图
- 数据来源：`[[素材库路径.md]]` → 快递袋系列 → 对应SKU子文件夹

## 产品详情区

### 详情描述
- 元素：`<textarea id="description">`
- xpath：`//textarea[@id='description']`
- 填入规则：使用详情描述模板（公司介绍+产品参数表+定制服务+包装展示+证书）
- 数据来源：`[[公司介绍.md]]` + `[[产品资料库.md]]` + `[[素材库路径.md]]`

## 测试记录

| 日期 | 测试SKU | 结果 | 修正内容 |
|------|---------|------|----------|
| 7/1 | KD-001 | ✅ 通过 | — |
| 7/1 | KD-002 | ⚠️ 厚度单位丢失 | 修正xpath，改为data-field="thickness" |
| 7/1 | KD-003 | ✅ 通过 | — |

---

第五步：测试 → 修正 → 通

按钮地图不是一次就写对的。你需要反复测试。

测试流程

你："用按钮地图，帮我发品 SKU KD-001"
Agent：通过Playwright MCP打开发品页 → 逐项填写 → 截图给你确认

你："厚度填错了，单位没写上去。"
Agent：检查按钮地图 → 发现xpath指向了错误的元素 → 修正xpath → 更新MD文档

你："再试 KD-002"
Agent：填写 → 截图 → 你确认 ✅

📸 [配图8]：测试修正过程截图——左边是Agent第一次发的品（红圈标出填错的位置，例如"厚度缺少mm单位"），右边是修正后Agent第二次发的品（绿圈标出修正后的正确结果）。对比展示"修正前vs修正后"。

我的经验是：测试十几个品之后，这个三级类目的所有按钮就都稳了。

一个三级类目大概花1小时完成标注和测试。之后每次发品只需要几秒钟。

---

第六步：将按钮地图对接到自动发品Skill

按钮地图建好之后，把它接入自动发品Skill。

打开你的 自动发品Skill.md，添加索引规则：

# 自动发品 Skill

## 触发条件
用户说"发品"、"发一个产品"、"上架SKU xxx"等。

## 执行流程

### Step 1：确定类目和SKU
从用户指令中提取：目标三级类目、目标SKU编号。

### Step 2：加载对应的按钮地图
根据三级类目，加载对应的按钮地图MD：
- 快递袋 → [[阿里发品-快递袋类目-按钮地图.md]]
- 牛皮纸袋 → [[阿里发品-牛皮纸袋类目-按钮地图.md]]
- 自封袋 → [[阿里发品-自封袋类目-按钮地图.md]]

### Step 3：从知识库读取产品数据
- 产品参数 → [[产品资料库.md]]
- 关键词 → [[关键词库.md]]
- 报价 → [[报价表.md]]
- 素材路径 → [[素材库路径.md]]

### Step 4：通过Playwright MCP逐项填写
按按钮地图中的xpath定位每个元素，从知识库读取对应的值填入。

### Step 5：截图 → 人工确认 → 提交
全部填写完毕后，截全页截图供审核。人工确认后提交。

## 安全规则
- ❌ 不自动提交，必须人工确认
- ❌ 价格必须先人工填入报价表后才能发品
- ✅ 发品完成后自动记录到 [[已发产品记录.md]]

📸 [配图9]：自动发品Skill在Obsidian中的截图——用红框高亮几个关键部分：①按钮地图索引（按类目加载不同的地图）、②知识库数据源（产品资料库/关键词库/报价表）、③安全规则（不自动提交/人工确认）。让读者看到"Skill只是索引，数据源都在知识库"。

---

第七步：一键发品！完整流程演示

所有准备工作完成了。现在来一次真正的"一键发品"。

7.1 发品指令

你："帮我发一个快递袋新品 SKU KD-004。
   产品资料在 [[产品资料库.md]] 里已更新。
   用快递袋类目的按钮地图。
   完成后截图给我确认。"

7.2 Agent的工作过程

📸 [配图10]：核心配图——全流程六格图。把下面Agent的6个步骤做成一张六格流程图或拼图：

📸 配图10-1 到 10-6就是上面六格对应的6张截图。不需要全部放正文里，可以拼成一张大图。如果觉得6张太多，核心保留以下3张：

• 配图10-1：Obsidian中产品数据高亮
• 配图10-5：发品页面表单全部填好的截图（最有冲击力的一张）
• 配图10-6：Agent完成后的确认信息

7.3 发品完成

Agent填写完毕后：

Agent："KD-004 发品表单已填写完毕。
  
  已填入：
  ✅ 标题：Courier Bags LDPE 35×45cm Custom Logo Wholesale Supplier
  ✅ 关键词：Courier Bags, LDPE Mailing Bags, Custom Shipping Bags
  ✅ 材质：LDPE | 厚度：0.06mm | 尺寸：35×45cm
  ✅ FOB价格：🔴 待确认（报价表中KD-004价格未填写）
  ✅ 主图已上传（3张）
  ✅ 详情描述已生成
  
  ⚠️ 请确认价格后点击提交。
  📎 已记录到 [[已发产品记录.md]]"

全过程你只说了一句话。

📸 [配图11]：Agent完成后的终端输出截图——展示上面的Agent回复消息。用绿框标注"✅已完成"的项目，用红框标注"🔴待确认"的价格项。这张图让读者直接感受到"Agent干完活汇报"的体验。

---

第八步：扩展到其他类目

快递袋搞定了。其他类目怎么扩展？

同一个流程，不同的按钮地图。

快递袋类目（✅ 已通）
    ↓ 同样流程
牛皮纸袋类目 → 用Playwright MCP扫描 → 标注按钮 → 
生成新的按钮地图MD → 测试修正 → 通
    ↓ 同样流程  
自封袋类目 → 扫描 → 标注 → 生成 → 测试 → 通

每多一个类目，你的知识库就多一份资产。三个月后，你所有主营产品的发品按钮地图全通——发品这件事就从"每天花2小时填表单"变成"一句话的事"。

---

总结：今天你搭好了一条流水线

今天这篇文章，带着你从零跑通了一整条链路：

Obsidian知识库（数据源）
    ↓
自动发品Skill（工作规范）
    ↓
Playwright MCP（执行工具）
    ↓
按钮地图MD（页面标注）
    ↓
一键发品（最终产出）

这条流水线搭好之后，每次发一个新产品的流程是：

更新产品资料库MD → 说一句话 → Agent自动发品 → 截图确认 → 完成

这就是前四篇文章所有概念的落地形态。

---

下周预告

周五（7月3日），我来拆解如何用AI持续运营独立站——不是一次性建站，而是长期的内容日历+数据监控+竞品监测+迭代优化。把你的独立站从"上线就荒废"变成"持续有流量"。

关注Vaysen公众号，每周一、三、五更新。

🎁 后台发送关键词"Skills"，免费领取40个外贸B2B核心Skills模板包。

---

关于Vaysen

我是Vaysen，你的AI前线部署工程师（FDE）。

FDE的本质：懂技术、懂业务、懂人性的AI落地陪跑员。核心使命是将AI技术与企业真实业务场景深度结合，设计并交付可落地、可持续、能产生实际商业价值的AI解决方案，并在交付后长期陪伴企业成长。

五大核心职责：🔍 调研 → 📐 设计 → ⚙️ 交付 → 🏃 陪跑 → 🎓 培训

四大核心能力：💻 技术 × 📊 业务 × 🗣️ 沟通 × 📈 项目

"FDE不是卖软件，而是帮企业用好AI，实现持续增长。"

📩 商务合作/咨询：公众号后台留言，24小时内回复。 🎁 领取Skills包：后台发送关键词"Skills"。

---

本文由Vaysen原创，欢迎转发。转载请联系授权。