Portfolio Webflow MCP

投资组合Webflow MCP项目

得益于MCP（模型上下文协议），人工智能实时驱动的Webflow投资组合

🚀 概念

本项目演示了如何使用 克劳德AI 作为通过组合两个MCP服务器实时修改Webflow站点的驱动程序：

• MCP网络流 ：访问Webflow设计器和数据API
• MCP Chrome开发工具 ：实时站点视图、屏幕截图、DOM分析

🛠️ 堆叠技术

✅ AI在一个会话中完成了什么

审计与分析

• ✅ SEO并发分析
• ✅ 识别目标关键字（N8N、Claude代码、无代码、自动化）
• ✅ 对现有网站的审计

CMS和内容

• ✅ 创建包含10个字段的“成就”CMS集合
• ✅ 在CMS中添加5个项目
• ✅ 从现有旋转木马自动恢复图像
• ✅ CMS项目出版物

SEO和优化

• ✅ 更新元标题和说明（3页）
• ✅ 配置打开图
• ✅ H1优化和关键字字幕
• ✅ 配置谷歌搜索控制台
• ✅ 提交网站地图

设计与结构

• ✅ 创建13种自定义样式
• ✅ 在模板上创建4个部分
• ✅ 网站发布

📁 项目结构

portfolio-webflow-mcp/
├── .mcp.json          # Configuration des serveurs MCP
├── CLAUDE.md          # Documentation détaillée pour Claude
├── README.md          # Ce fichier
└── screenshots/       # Captures d'écran du projet
    ├── yalee-creek-ranch.png
    ├── landing-carousel.png
    ├── landing-fullpage.png
    ├── carousel-slide1.png
    ├── n8n-scraping.png
    └── n8n-tracking.png

⚙️ 配置MCP

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp"]
    },
    "webflow": {
      "command": "npx",
      "args": ["-y", "@anthropic/webflow-mcp"]
    }
  }
}

🔗 留置权

• 网站直播 : 投资组合anda.webflow.io
• 克劳德代码 : claude.ai/code
• MCP网络流 : @anthropic/webflow mcp
• MCP Chrome开发工具 : chrome开发工具mcp

🎯 目标SEO关键词

• N8N
• 克劳德代码
• 无代码/低代码
• AI构建器
• 人工智能自动化
• Webflow
• 气泡

📝 笔记技巧

WebFlow API发现的局限性

• 数据API无法更改主区域设置中的文本内容
• API无法上传新资产（仅限现有URL）
• API无法删除元素
• API无法将元素连接到CMS字段

使用的工作方法

• 将现有WebFlow CDN映像用于CMS
• 使用开放式设计器通过设计器API编辑文本
• 本地捕获的屏幕截图，用于手动上传

👤 电影导演

Mandaniana Randriambinintsoa 的

• 专家无代码和自动化IA
• 开发商：N8N&Claude Code
• 马达加斯加


______________________________________________________________________

*该项目由Claude Opus 4.5通过Claude代码实现*