🛠️ Webflow Automation
Webflow(ウェブフロー)で作成したウェブサイトの
📺 まず動画で見る(YouTube)
▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Automate Webflow CMS collections, site publishing, page management, asset uploads, and ecommerce orders via Rube MCP (Composio). Always search tools first for current schemas.
🇯🇵 日本人クリエイター向け解説
Webflow(ウェブフロー)で作成したウェブサイトの
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o webflow-automation.zip https://jpskill.com/download/3698.zip && unzip -o webflow-automation.zip && rm webflow-automation.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/3698.zip -OutFile "$d\webflow-automation.zip"; Expand-Archive "$d\webflow-automation.zip" -DestinationPath $d -Force; ri "$d\webflow-automation.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
webflow-automation.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
webflow-automationフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
💬 こう話しかけるだけ — サンプルプロンプト
- › Webflow Automation を使って、最小構成のサンプルコードを示して
- › Webflow Automation の主な使い方と注意点を教えて
- › Webflow Automation を既存プロジェクトに組み込む方法を教えて
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Rube MCP を介した Webflow 自動化
Composio の Webflow ツールキットを通じて、CMS コレクション管理、サイト公開、ページ検査、アセットアップロード、Eコマース注文取得など、Webflow の操作を自動化します。
前提条件
- Rube MCP が接続されている必要があります(RUBE_SEARCH_TOOLS が利用可能であること)
- ツールキット
webflowを使用したRUBE_MANAGE_CONNECTIONSによるアクティブな Webflow 接続 - 現在のツールスキーマを取得するために、常に最初に
RUBE_SEARCH_TOOLSを呼び出してください
セットアップ
Rube MCP の取得: クライアント設定で https://rube.app/mcp を MCP サーバーとして追加します。API キーは不要です。エンドポイントを追加するだけで機能します。
RUBE_SEARCH_TOOLSが応答することを確認して、Rube MCP が利用可能であることを検証します- ツールキット
webflowを指定してRUBE_MANAGE_CONNECTIONSを呼び出します - 接続が ACTIVE でない場合は、返された認証リンクに従って Webflow OAuth を完了します
- ワークフローを実行する前に、接続ステータスが ACTIVE と表示されていることを確認します
コアワークフロー
1. CMS コレクションアイテムの管理
使用する状況: ユーザーが Webflow CMS コレクション(ブログ投稿、製品、チームメンバーなど)のアイテムを作成、更新、リスト表示、または削除したい場合
ツールシーケンス:
WEBFLOW_LIST_WEBFLOW_SITES- ターゲットの site_id を見つけるためにサイトをリスト表示します [前提条件]WEBFLOW_LIST_COLLECTIONS- サイトのすべてのコレクションをリスト表示します [前提条件]WEBFLOW_GET_COLLECTION- 有効なフィールドスラッグを見つけるためにコレクションスキーマを取得します [作成/更新の前提条件]WEBFLOW_LIST_COLLECTION_ITEMS- フィルタリングとページネーションを使用して既存のアイテムをリスト表示します [オプション]WEBFLOW_GET_COLLECTION_ITEM- 特定のアイテムの完全な詳細を取得します [オプション]WEBFLOW_CREATE_COLLECTION_ITEM- フィールドデータを使用して新しいアイテムを作成します [作成に必須]WEBFLOW_UPDATE_COLLECTION_ITEM- 既存のアイテムのフィールドを更新します [更新に必須]WEBFLOW_DELETE_COLLECTION_ITEM- アイテムを完全に削除します [オプション]WEBFLOW_PUBLISH_SITE- 変更を公開してライブにします [オプション]
CREATE_COLLECTION_ITEM の主要なパラメーター:
collection_id: LIST_COLLECTIONS から取得した 24 文字の 16 進数文字列field_data: フィールドスラッグキー(表示名ではありません)を持つオブジェクト。nameとslugを含める必要がありますfield_data.name: アイテムの表示名field_data.slug: URL フレンドリーな識別子(小文字、ハイフン、スペースなし)is_draft: ドラフトとして作成するかどうかのブール値(デフォルトは false)
UPDATE_COLLECTION_ITEM の主要なパラメーター:
collection_id: コレクション識別子item_id: 既存のアイテムの 24 文字の 16 進数 MongoDB ObjectIdfields: フィールドスラッグキーと新しい値を持つオブジェクトlive: 変更をすぐに公開するかどうかのブール値(デフォルトは false)
フィールド値の型:
- Text/Email/Link/Date: string
- Number: integer または float
- Boolean: true/false
- Image:
{"url": "...", "alt": "...", "fileId": "..."} - Multi-reference: 参照 ID 文字列の配列
- Multi-image: 画像オブジェクトの配列
- Option: オプション ID 文字列
落とし穴:
- フィールドキーは、表示名ではなく、コレクションスキーマからの正確なフィールド
slugを使用する必要があります - スキーマを取得し、正しいフィールドスラッグを識別するために、常に最初に
GET_COLLECTIONを呼び出してください CREATE_COLLECTION_ITEMはfield_dataにnameとslugを必要としますUPDATE_COLLECTION_ITEMは新しいアイテムを作成できません。有効な既存のitem_idを必要としますitem_idは 24 文字の 16 進数 MongoDB ObjectId である必要があります- スラッグはハイフンを含む小文字の英数字である必要があります:
^[a-z0-9]+(?:-[a-z0-9]+)*$ - CMS アイテムはステージングされます。本番環境にプッシュするには
PUBLISH_SITEを使用するか、live: trueを設定してください
2. サイトと公開の管理
使用する状況: ユーザーがサイトをリスト表示したり、サイト設定を検査したり、ステージングされた変更を公開したりしたい場合
ツールシーケンス:
WEBFLOW_LIST_WEBFLOW_SITES- アクセス可能なすべてのサイトをリスト表示します [必須]WEBFLOW_GET_SITE_INFO- ドメインや設定を含む詳細なサイトメタデータを取得します [オプション]WEBFLOW_PUBLISH_SITE- ステージングされたすべての変更をライブサイトにデプロイします [公開に必須]
PUBLISH_SITE の主要なパラメーター:
site_id: LIST_WEBFLOW_SITES からのサイト識別子custom_domains: カスタムドメイン ID 文字列の配列(GET_SITE_INFO から)publish_to_webflow_subdomain:{shortName}.webflow.ioに公開するかどうかのブール値custom_domainsまたはpublish_to_webflow_subdomainの少なくとも一方が指定されている必要があります
落とし穴:
PUBLISH_SITEは、選択したドメインのステージングされた変更をすべて再公開します。意図しないドラフトが保留されていないことを確認してください- レート制限: 1 分あたり 1 回の成功した公開
- カスタムドメインのないサイトの場合、
publish_to_webflow_subdomain: trueを設定する必要があります custom_domainsはドメイン名ではなくドメイン ID(16 進数文字列)を期待します- 公開は本番環境でのアクションです。常に最初にユーザーに確認してください
3. ページの管理
使用する状況: ユーザーがページをリスト表示したり、ページメタデータを検査したり、ページ DOM 構造を調べたりしたい場合
ツールシーケンス:
WEBFLOW_LIST_WEBFLOW_SITES- ターゲットの site_id を見つけます [前提条件]WEBFLOW_LIST_PAGES- ページネーションを使用してサイトのすべてのページをリスト表示します [必須]WEBFLOW_GET_PAGE- 特定のページの詳細なメタデータを取得します [オプション]WEBFLOW_GET_PAGE_DOM- 静的ページの DOM/コンテンツノード構造を取得します [オプション]
主要なパラメーター:
site_id: サイト識別子(ページリスト表示に必須)page_id: 24 文字の 16 進数ページ識別子locale_id: 多言語サイトのオプションのロケールフィルターlimit: ページあたりの最大結果数(最大 100)offset: ページネーションオフセット
落とし穴:
LIST_PAGESはオフセット/リミットを介してページネーションを行います。サイトに多くのページがある場合は反復処理してください- ページ ID は
^[0-9a-fA-F]{24}$パターンに一致する 24 文字の 16 進数文字列です GET_PAGE_DOMはレンダリングされた HTML ではなくノード構造を返します- ページには静的ページと CMS 駆動型ページの両方が含まれます
4. アセットのアップロード
使用する状況: ユーザーが画像、ファイル、またはその他のアセットを Webflow サイトにアップロードしたい場合
ツールシーケンス:
WEBFLOW_LIST_WEBFLOW_SITES- ターゲットの site_id を見つけます [前提条件]WEBFLOW_UPLOAD_ASSET- Base64 エンコードされたコンテンツを持つファイルをアップロードします [必須]
主要なパラメーター:
site_id: サイト識別子file_name: ファイル名(例:"logo.png")file_content: Base64 エンコードされたコンテンツ
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Webflow Automation via Rube MCP
Automate Webflow operations including CMS collection management, site publishing, page inspection, asset uploads, and ecommerce order retrieval through Composio's Webflow toolkit.
Prerequisites
- Rube MCP must be connected (RUBE_SEARCH_TOOLS available)
- Active Webflow connection via
RUBE_MANAGE_CONNECTIONSwith toolkitwebflow - Always call
RUBE_SEARCH_TOOLSfirst to get current tool schemas
Setup
Get Rube MCP: Add https://rube.app/mcp as an MCP server in your client configuration. No API keys needed — just add the endpoint and it works.
- Verify Rube MCP is available by confirming
RUBE_SEARCH_TOOLSresponds - Call
RUBE_MANAGE_CONNECTIONSwith toolkitwebflow - If connection is not ACTIVE, follow the returned auth link to complete Webflow OAuth
- Confirm connection status shows ACTIVE before running any workflows
Core Workflows
1. Manage CMS Collection Items
When to use: User wants to create, update, list, or delete items in Webflow CMS collections (blog posts, products, team members, etc.)
Tool sequence:
WEBFLOW_LIST_WEBFLOW_SITES- List sites to find the target site_id [Prerequisite]WEBFLOW_LIST_COLLECTIONS- List all collections for the site [Prerequisite]WEBFLOW_GET_COLLECTION- Get collection schema to find valid field slugs [Prerequisite for create/update]WEBFLOW_LIST_COLLECTION_ITEMS- List existing items with filtering and pagination [Optional]WEBFLOW_GET_COLLECTION_ITEM- Get a specific item's full details [Optional]WEBFLOW_CREATE_COLLECTION_ITEM- Create a new item with field data [Required for creation]WEBFLOW_UPDATE_COLLECTION_ITEM- Update an existing item's fields [Required for updates]WEBFLOW_DELETE_COLLECTION_ITEM- Permanently remove an item [Optional]WEBFLOW_PUBLISH_SITE- Publish changes to make them live [Optional]
Key parameters for CREATE_COLLECTION_ITEM:
collection_id: 24-character hex string from LIST_COLLECTIONSfield_data: Object with field slug keys (NOT display names); must includenameandslugfield_data.name: Display name for the itemfield_data.slug: URL-friendly identifier (lowercase, hyphens, no spaces)is_draft: Boolean to create as draft (default false)
Key parameters for UPDATE_COLLECTION_ITEM:
collection_id: Collection identifieritem_id: 24-character hex MongoDB ObjectId of the existing itemfields: Object with field slug keys and new valueslive: Boolean to publish changes immediately (default false)
Field value types:
- Text/Email/Link/Date: string
- Number: integer or float
- Boolean: true/false
- Image:
{"url": "...", "alt": "...", "fileId": "..."} - Multi-reference: array of reference ID strings
- Multi-image: array of image objects
- Option: option ID string
Pitfalls:
- Field keys must use the exact field
slugfrom the collection schema, NOT display names - Always call
GET_COLLECTIONfirst to retrieve the schema and identify correct field slugs CREATE_COLLECTION_ITEMrequiresnameandsluginfield_dataUPDATE_COLLECTION_ITEMcannot create new items; it requires a valid existingitem_iditem_idmust be a 24-character hexadecimal MongoDB ObjectId- Slug must be lowercase alphanumeric with hyphens:
^[a-z0-9]+(?:-[a-z0-9]+)*$ - CMS items are staged; use
PUBLISH_SITEor setlive: trueto push to production
2. Manage Sites and Publishing
When to use: User wants to list sites, inspect site configuration, or publish staged changes
Tool sequence:
WEBFLOW_LIST_WEBFLOW_SITES- List all accessible sites [Required]WEBFLOW_GET_SITE_INFO- Get detailed site metadata including domains and settings [Optional]WEBFLOW_PUBLISH_SITE- Deploy all staged changes to live site [Required for publishing]
Key parameters for PUBLISH_SITE:
site_id: Site identifier from LIST_WEBFLOW_SITEScustom_domains: Array of custom domain ID strings (from GET_SITE_INFO)publish_to_webflow_subdomain: Boolean to publish to{shortName}.webflow.io- At least one of
custom_domainsorpublish_to_webflow_subdomainmust be specified
Pitfalls:
PUBLISH_SITErepublishes ALL staged changes for selected domains -- verify no unintended drafts are pending- Rate limit: 1 successful publish per minute
- For sites without custom domains, must set
publish_to_webflow_subdomain: true custom_domainsexpects domain IDs (hex strings), not domain names- Publishing is a production action -- always confirm with the user first
3. Manage Pages
When to use: User wants to list pages, inspect page metadata, or examine page DOM structure
Tool sequence:
WEBFLOW_LIST_WEBFLOW_SITES- Find the target site_id [Prerequisite]WEBFLOW_LIST_PAGES- List all pages for a site with pagination [Required]WEBFLOW_GET_PAGE- Get detailed metadata for a specific page [Optional]WEBFLOW_GET_PAGE_DOM- Get the DOM/content node structure of a static page [Optional]
Key parameters:
site_id: Site identifier (required for list pages)page_id: 24-character hex page identifierlocale_id: Optional locale filter for multi-language siteslimit: Max results per page (max 100)offset: Pagination offset
Pitfalls:
LIST_PAGESpaginates via offset/limit; iterate when sites have many pages- Page IDs are 24-character hex strings matching pattern
^[0-9a-fA-F]{24}$ GET_PAGE_DOMreturns the node structure, not rendered HTML- Pages include both static and CMS-driven pages
4. Upload Assets
When to use: User wants to upload images, files, or other assets to a Webflow site
Tool sequence:
WEBFLOW_LIST_WEBFLOW_SITES- Find the target site_id [Prerequisite]WEBFLOW_UPLOAD_ASSET- Upload a file with base64-encoded content [Required]
Key parameters:
site_id: Site identifierfile_name: Name of the file (e.g.,"logo.png")file_content: Base64-encoded binary content of the file (NOT a placeholder or URL)content_type: MIME type (e.g.,"image/png","image/jpeg","application/pdf")md5: MD5 hash of the raw file bytes (32-character hex string)asset_folder_id: Optional folder placement
Pitfalls:
file_contentmust be actual base64-encoded data, NOT a variable reference or placeholdermd5must be computed from the raw bytes, not from the base64 string- This is a two-step process internally: generates an S3 pre-signed URL, then uploads
- Large files may encounter timeouts; keep uploads reasonable in size
5. Manage Ecommerce Orders
When to use: User wants to view ecommerce orders from a Webflow site
Tool sequence:
WEBFLOW_LIST_WEBFLOW_SITES- Find the site with ecommerce enabled [Prerequisite]WEBFLOW_LIST_ORDERS- List all orders with optional status filtering [Required]WEBFLOW_GET_ORDER- Get detailed information for a specific order [Optional]
Key parameters:
site_id: Site identifier (must have ecommerce enabled)order_id: Specific order identifier for detailed retrievalstatus: Filter orders by status
Pitfalls:
- Ecommerce must be enabled on the Webflow site for order endpoints to work
- Order endpoints are read-only; no create/update/delete for orders through these tools
Common Patterns
ID Resolution
Webflow uses 24-character hexadecimal IDs throughout:
- Site ID:
WEBFLOW_LIST_WEBFLOW_SITES-- find by name, captureid - Collection ID:
WEBFLOW_LIST_COLLECTIONSwithsite_id - Item ID:
WEBFLOW_LIST_COLLECTION_ITEMSwithcollection_id - Page ID:
WEBFLOW_LIST_PAGESwithsite_id - Domain IDs:
WEBFLOW_GET_SITE_INFO-- found incustomDomainsarray - Field slugs:
WEBFLOW_GET_COLLECTION-- found in collectionfieldsarray
Pagination
Webflow uses offset-based pagination:
offset: Starting index (0-based)limit: Items per page (max 100)- Increment offset by limit until fewer results than limit are returned
- Available on: LIST_COLLECTION_ITEMS, LIST_PAGES
CMS Workflow
Typical CMS content creation flow:
- Get site_id from LIST_WEBFLOW_SITES
- Get collection_id from LIST_COLLECTIONS
- Get field schema from GET_COLLECTION (to learn field slugs)
- Create/update items using correct field slugs
- Publish site to make changes live
Known Pitfalls
ID Formats
- All Webflow IDs are 24-character hexadecimal strings (MongoDB ObjectIds)
- Example:
580e63fc8c9a982ac9b8b745 - Pattern:
^[0-9a-fA-F]{24}$ - Invalid IDs return 404 errors
Field Slugs vs Display Names
- CMS operations require field
slugvalues, NOT display names - A field with displayName "Author Name" might have slug
author-name - Always call
GET_COLLECTIONto discover correct field slugs - Using wrong field names silently ignores the data or causes validation errors
Publishing
PUBLISH_SITEdeploys ALL staged changes, not just specific items- Rate limited to 1 publish per minute
- Must specify at least one domain target (custom or webflow subdomain)
- This is a production-affecting action; always confirm intent
Authentication Scopes
- Different operations require different OAuth scopes:
sites:read,cms:read,cms:write,pages:read - A 403 error typically means missing OAuth scopes
- Check connection permissions if operations fail with authorization errors
Destructive Operations
DELETE_COLLECTION_ITEMpermanently removes CMS itemsPUBLISH_SITEmakes all staged changes live immediately- Always confirm with the user before executing these actions
Quick Reference
| Task | Tool Slug | Key Params |
|---|---|---|
| List sites | WEBFLOW_LIST_WEBFLOW_SITES |
(none) |
| Get site info | WEBFLOW_GET_SITE_INFO |
site_id |
| Publish site | WEBFLOW_PUBLISH_SITE |
site_id, custom_domains or publish_to_webflow_subdomain |
| List collections | WEBFLOW_LIST_COLLECTIONS |
site_id |
| Get collection schema | WEBFLOW_GET_COLLECTION |
collection_id |
| List collection items | WEBFLOW_LIST_COLLECTION_ITEMS |
collection_id, limit, offset |
| Get collection item | WEBFLOW_GET_COLLECTION_ITEM |
collection_id, item_id |
| Create collection item | WEBFLOW_CREATE_COLLECTION_ITEM |
collection_id, field_data |
| Update collection item | WEBFLOW_UPDATE_COLLECTION_ITEM |
collection_id, item_id, fields |
| Delete collection item | WEBFLOW_DELETE_COLLECTION_ITEM |
collection_id, item_id |
| List pages | WEBFLOW_LIST_PAGES |
site_id, limit, offset |
| Get page | WEBFLOW_GET_PAGE |
page_id |
| Get page DOM | WEBFLOW_GET_PAGE_DOM |
page_id |
| Upload asset | WEBFLOW_UPLOAD_ASSET |
site_id, file_name, file_content, content_type, md5 |
| List orders | WEBFLOW_LIST_ORDERS |
site_id, status |
| Get order | WEBFLOW_GET_ORDER |
site_id, order_id |
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.