jpskill.com
🛠️ 開発・MCP コミュニティ

webflow-designer-api

Webflow Designer APIを活用し、デザイナー拡張機能の構築やコード生成を通じて、要素操作、スタイル設定、コンポーネント管理などを効率的に行うSkill。

📜 元の英語説明(参考)

Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Webflow Designer APIを活用し、デザイナー拡張機能の構築やコード生成を通じて、要素操作、スタイル設定、コンポーネント管理などを効率的に行うSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o webflow-designer-api.zip https://jpskill.com/download/6545.zip && unzip -o webflow-designer-api.zip && rm webflow-designer-api.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6545.zip -OutFile "$d\webflow-designer-api.zip"; Expand-Archive "$d\webflow-designer-api.zip" -DestinationPath $d -Force; ri "$d\webflow-designer-api.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して webflow-designer-api.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → webflow-designer-api フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Webflow Designer API

このスキルは、2つのワークフローを通じてユーザーがWebflow Designer APIを操作するのに役立ちます。まず、ユーザーにどちらのワークフローを使用したいか尋ねるか、文脈から明らかであれば推測してください。

ワークフロー

1. Designer Extensions

Webflow Designer内でiframeとして動作するUIを備えた完全な拡張機能を構築します。再利用可能なツール、複雑なワークフロー、チームやマーケットプレイスに出荷したいアプリに最適です。 → references/designer-extension-workflow.md を参照してください。

2. Designer API Playground

Designer内のPlaygroundアプリで、スタンドアロンのコードスニペットを直接記述して実行します。迅速なプロトタイピング、APIメソッドのテスト、APIの学習、および一度限りの自動化に最適です。 → references/playground-workflow.md を参照してください。

リファレンスドキュメント

各リファレンスファイルには、検索性を高めるための name、description、tags を含むYAMLフロントマターが含まれています。scripts/search_references.py で利用可能な検索スクリプトを使用して、タグまたはキーワードで関連するリファレンスをすばやく見つけることができます。

Designer APIリファレンス

どちらのワークフローも同じ webflow.* Designer APIを使用します。ワークフローがわかったら、これらのリファレンスを使用して実際のコードを記述してください。

デザインとマーケットプレイスのリファレンス

リファレンスの検索

# メタデータ付きのすべてのリファレンスをリスト表示
python scripts/search_references.py --list

# タグで検索（完全一致）
python scripts/search_references.py --tag <tag>

# キーワードで検索（名前、説明、タグ、コンテンツ全体）
python scripts/search_references.py --search <query>

スクリプトとアセット

  • scripts/search_references.py: タグ、キーワードでリファレンスファイルを検索したり、メタデータ付きのすべてをリスト表示したりします。
  • assets/webflow-variables.css — Webflowのデザインシステム用のCSS変数
  • assets/install-playground-prompt.md — Claude CoworkまたはClaude Chrome Extension経由でDesigner API Playgroundをインストールするためのコピー可能なプロンプト
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Webflow Designer API

This skill helps users work with the Webflow Designer API through two workflows. Start by asking the user which workflow they'd like to use, or infer from context if it's obvious.

Workflows

1. Designer Extensions

Build full extensions with a UI that run inside the Webflow Designer as iframes. Best for reusable tools, complex workflows, and apps you want to ship to a team or the Marketplace. → See references/designer-extension-workflow.md

2. Designer API Playground

Write and run standalone code snippets directly in the Playground app inside the Designer. Best for quick prototyping, testing API methods, learning the API, and one-off automations. → See references/playground-workflow.md

Reference Documentation

Each reference file includes YAML frontmatter with name, description, and tags for searchability. Use the search script available in scripts/search_references.py to quickly find relevant references by tag or keyword.

Designer API References

Both workflows use the same webflow.* Designer API. Once you know the workflow, use these references to write the actual code:

Design & Marketplace References

Searching References

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

Scripts and Assets

  • scripts/search_references.py: Search reference files by tag, keyword, or list all with metadata
  • assets/webflow-variables.css — CSS variables for Webflow's design system
  • assets/install-playground-prompt.md — Copyable prompt for installing the Designer API Playground via Claude Cowork or the Claude Chrome Extension