Webcake Landing

WebCake Landing MCP

英语 · 越南语

用通俗语言描述一个落地页——你的 AI 会构建、检查页面，并直接将它发布到 WebCake。

⭐ 如果它帮你省下了一个下午拖拽方框的时间，请点个星——这是一个由一位开发者维护的项目，每颗星都能让它继续运行。

“为我的咖啡店制作一个落地页——包含一个带注册按钮的主视觉区、一个包含 3 项特色的版块，以及一个潜在客户表单。将它保存到我的工作区。”

……随后，一个真正可编辑的 WebCake 页面就会出现在你的账户中。无需拖拽方框，无需学习架构，也无需手写 JSON。

---

🧩 工作原理

此服务是你的 AI 助手与 WebCake 之间的桥梁。AI 不会猜测 WebCake 页面是什么样子——它会向这个 MCP 询问。该 MCP 了解完整的元素模型，会验证结果，并替你保存页面。

   You              AI assistant            webcake-landing MCP            WebCake
  ┌──────┐  prompt  ┌────────────┐  tools  ┌──────────────────────┐  API  ┌──────────┐
  │ idea │ ───────► │  Claude /  │ ──────► │ • knows the element  │ ────► │  a real  │
  │      │          │  Cursor /  │         │   model + AI hints   │       │ editable │
  │      │ ◄─────── │  Windsurf  │ ◄────── │ • builds + validates │ ◄──── │  page in │
  └──────┘ page URL └────────────┘ result  │ • saves to your acct │       │  WebCake │
                                           └──────────────────────┘       └──────────┘

1. 你用通俗语言提出需求——目标、品牌、版块、CTA、表单字段。
2. AI 从 MCP 学习模型：元素目录、绝对定位画布、事件词汇——因此它构建的是一个真正的 WebCake 页面，而不是凭空猜测。
3. 它组装并验证完整的 { page, popup, settings, options } JSON。validate_page 会在保存前检查画布外的方框、无效的 CTA 和缺失的表单字段。
4. 它将页面保存到你的 WebCake 账户——先进行试运行预览，然后正式保存。
5. 你会获得编辑器链接——打开链接、调整并发布。繁重的工作已经由 AI 完成。

为什么它可靠

📚 了解真实模型	提供 WebCake 的实际元素目录（40 多种类型——主视觉区、表单、倒计时、图库、产品列表等），每种类型都附有准确的 specials 和 AI 提示信息，直接取自编辑器的渲染器。
✅ 保存前进行验证	执行结构和语义检查（唯一 ID、画布内布局、有效 CTA、唯一表单字段），确保页面保存后不会出错。
🛡️ 默认安全	每次写入都会先进行试运行（预览请求，并遮蔽令牌）——只有在你确认后，才会对账户进行任何更改。
✏️ 精准编辑	只需提出一项修改（“把 CTA 改成绿色”），它就只会编辑该元素——其他 ID、坐标和区块都保持原样。

💡 潜在客户开发、活动、邀请函、应用推广——或者COD/在线销售？它也支持 WebCake 的电商模型（产品列表、变体、购物车）。

---

✨ 你可以构建什么

只需对 AI 说一句话 → 就能生成一个完整且可编辑的 WebCake 页面。看看大家用它做出了什么：

	只需说……
🧲 潜在客户获取落地页	“一个 SaaS 候补名单页面——主视觉、3 项优势和一个电子邮件收集表单。”
🛒 货到付款 / 在线商店	“一个护肤精华单品页面——图片集、价格、规格，以及带购物车的订单表单。”
🎟️ 活动 / 网络研讨会	“一个周六网络研讨会的报名页面——倒计时、议程和报名表单。”
💌 邀请函	“一份婚礼邀请函——姓名、日期、地图和 RSVP 表单。”
📱 应用推广	“一个健身应用页面——手机模型图、功能列表、App Store + Google Play 按钮。”
⚡ 限时抢购	“一个限时抢购页面——醒目的倒计时、折扣商品网格和固定的购买按钮。”
🔗 个人简介链接页	“一个用于展示创作者资料的个人简介链接页——头像、简短简介、5 个链接按钮和社交账号。”
🎉 产品发布	“一个 v2 发布页面——主视觉、更新内容列表和抢先体验表单。”

……然后说**“把 CTA 改成绿色”或“再加第 4 个功能”**，它就只会编辑对应的区块——其他所有 id 和坐标都保持不变。

🤖 可在 Claude Desktop、Claude Code、Cursor、Windsurf、Augment、Codex、Antigravity、Gemini CLI、Cline、Kiro、OpenCode 或任何兼容 MCP 的客户端中使用——而且参考与生成工具无需任何设置，因此你无需粘贴令牌就能先试用。

---

工作原理

MCP（Model Context Protocol）服务会教 AI Agent 如何根据需求构建完整的 WebCake 落地页源 JSON，并将其保存到 WebCake 后端。

它提供元素目录、各元素的使用提示和 specials、完整的页面 JSON Schema、 有效的元素／页面骨架、页面验证器，以及用于在后端创建或编辑页面的工具。 AI Agent 会生成完整的 { page, popup, settings, options, cartConfigs } JSON；create_page 会保存该内容并自动发布（构建 + publish_html），以便立即呈现预览（编辑工具只保存源内容——编辑后需通过 publish_page 重新发布）。

方式	最适合	身份验证
npx（本地） — 在你的设备上运行	个人日常使用，完全掌控	浏览器 login、JWT，或无需身份验证（参考工具）
托管 URL — 使用我们的线上服务，无需安装	无需 Node.js、团队使用、claude.ai 对话框	你的个人 ?jwt= 链接 / x-webcake-jwt 标头

参考与生成工具（get_generation_guide、list_elements、validate_page 等）以及导入工具（ingest_html、ingest_url——将现有 HTML 或 URL 转换为布局锚点，以便 AI 重建或改编）无需任何配置；只有持久化工具（create_page、update_page、add_section、patch_page、publish_page、list_pages、find_pages、get_page、list_organizations）需要令牌。凭证按以下顺序解析：单次请求标头 → 环境变量 → 已保存的 auth.json（login）。

---

🚀 连接方式 — 2 种主要方法

任选一种。两种方式都会为你的 AI 工具（Claude、Cursor 等）提供完整的 Webcake 落地页工具包。无需编写代码。

① npx — 在你的设备上运行（推荐个人使用）

无需安装，始终使用最新版本，需要 Node.js 18+。一行命令即可获取令牌并写入 IDE 配置：

# Interactive — pick environment, log in via browser (or paste a JWT), pick IDE(s)
npx -y webcake-landing-mcp install

# Non-interactive — configure every supported IDE at once (env + token via flags)
npx -y webcake-landing-mcp install --ide all --env prod --jwt <your-jwt>

# Remove the server from every IDE config
npx -y webcake-landing-mcp uninstall

它会针对每个目标，将 webcake-landing 条目写入相应的配置文件：claude-desktop、 claude-code、cursor、windsurf、augment（VS Code）、codex、antigravity、gemini（Gemini CLI）、 cline、kiro、opencode 或 all。可用标志：--ide、--env、--jwt、--org-id、 --api-base/--app-base、--npx/--local、-y — 详见 install --help。

只想运行服务（之后再手动配置）？npx -y webcake-landing-mcp

🛠️ 手动编写各 IDE 的配置、使用 Shell 脚本安装程序（install.sh/install.ps1），或克隆本地构建版本 → docs/manual-install.md。

② 远程 URL …/mcp?jwt= — 托管式，无需安装

服务已在 https://mcp.toolvn.io.vn/mcp 运行 — 无需 Node.js，也无需让电脑一直开机。 获取你的专属链接（其中已包含你的令牌），并将其粘贴到客户端的添加自定义连接器 / 配置中：

https://mcp.toolvn.io.vn/mcp?jwt=<YOUR_TOKEN>

获取链接有两种方式：

• 最简单 — 在 Webcake 控制面板中打开 https://webcake.io/mcp-remote → 页面会为你生成并复制链接。
• 手动操作 — 查看分步指南：docs/connect-mcp.md。

可选参数：&env=prod、&org_id=…、&api_base=…。给每位队友发送各自带有 jwt 的链接 → 按用户区分，无需 OAuth。支持请求头的客户端应将令牌作为 x-webcake-jwt 发送，而不是 放在 URL 中 — 完整的请求头 ↔ 环境变量映射见 docs/configuration.md。

✅ 最适合：无需 Node.js、团队/共享使用，以及 claude.ai 连接器对话框（仅支持 URL，不支持请求头）。 ⚠️ 链接中包含你的个人令牌 — 请像保护密码一样保护它，并始终使用 HTTPS。

---

⚙️ 配置

简要说明 — 只有持久化工具需要进行这些配置：

npx -y webcake-landing-mcp login    # opens the browser once, saves the token to ~/.webcake-landing-mcp/auth.json

…或者设置 WEBCAKE_ENV（local | staging | prod — 自动填充所有基础 URL）+ WEBCAKE_JWT。

若要让 publish_page 真正将页面上线，需要构建主机（它会渲染线上 publish_html 路由所需的 app/app_css）：

• prod 预设会自动配置 https://build.webcake.io — 无需额外设置（当环境解析为 prod 时，此预设会生效：WEBCAKE_ENV=prod、--env prod 或 x-webcake-env: prod）。
• 对于 staging/local，请设置 WEBCAKE_BUILD_BASE=<url>，或按请求发送 x-webcake-build-base 请求头。
• 若未设置，publish_page 会退回到仅保存旧版源代码的方式，并返回 rendered:false, live:false 以及警告 — 页面不会上线。
• 只有配置了 custom_domain，页面才能永久上线；否则，返回的 /preview/<page_id> 链接会在发布后约 10 分钟过期。

其他所有内容 — 完整的环境变量表、环境预设、托管服务的按请求请求头、login 浏览器流程（+ 后端约定），以及手动获取 JWT 的方法 — 均见 docs/configuration.md。

---

📚 文档

指南	内容
连接 IDE / claude.ai	每种客户端的分步连接指南（npx 和托管 URL），以及故障排查表。
配置	环境变量、--env 预设、浏览器 login、按请求设置请求头，以及获取 JWT。
工具参考	全部 23 个工具的详细说明 + 分步工作流 + 模型说明。
使用示例	三个端到端演练：根据需求简介构建、精准编辑、检查类型。
手动 / 高级安装	Shell 安装程序、克隆构建、手动编写各 IDE 的配置。
页面元素模式	完整的元素模型参考（+ 所有特殊元素/事件）。

---

🧰 工具一览

五组共 23 个工具——完整说明见 docs/tools.md：

分组	工具	需要
参考	get_generation_guide · list_elements · get_element · get_page_schema	无
生成	new_element · new_page_skeleton · validate_page · layout（精确计算居中、行、网格、堆叠坐标，适用于两个断点）	无
媒体	search_images（真实的 Pexels 库存照片）· get_icon_svg（Material Symbols / Font Awesome 图标名称 → 通过 Iconify 转换为内嵌 SVG）· upload_images（重新托管外部图片、data: URI 或用户机器上的本地文件路径——当 Webcake 凭据 和 组织均可用时，将文件上传到你的媒体集合；组织为必填项，且必须与页面所属组织一致，因此请提前确定——只有 1 个组织时会自动选择，有 2 个或更多组织且未选择时会返回 organization_required + 组织列表；没有 JWT → 使用公共 CDN）· render_preview（截取页面/URL 的屏幕截图，供模型查看和比较）	无
导入	ingest_html · ingest_url（重建现有页面）	无
持久化	list_organizations · create_page · list_pages · find_pages · get_page · update_page · add_section · patch_page · publish_page	WEBCAKE_API_BASE + WEBCAKE_JWT

所有写入操作默认使用 dry_run=true——预览精确请求（令牌已屏蔽），只有重新运行并设置 dry_run=false 才会操作你的账户。

建议的提示词

帮我为 <brand/offer> 制作一个 WebCake 落地页。使用 webcake-landing MCP： 调用 get_generation_guide、new_page_skeleton，然后为你使用的每种元素类型调用 get_element， 组装 { page, popup, settings, options } JSON，反复调用 validate_page 直到错误数为零， 然后调用 create_page（先试运行）。

---

⭐ 喜欢这个创意？点个星标吧

这是一个由个人开发的开源项目——每个 ⭐ 都能真正推动项目发展，帮助其他开发者发现它。

• ⭐ 为仓库加星 — 只需 2 秒，却能带来巨大的动力。
• 🐛 提交问题 — 可以是错误、缺少的元素类型，也可以只是一个想法。
• 🔁 把它分享给 还在逐个组件搭建落地页的人。

怀着 ❤️ 为 WebCake 社区打造。感谢你的参与。