mcpField
W
webflow-designer-api

webflow-designer-api

github.com/224-industries開発10182 回インストール1 週間前に更新
リポジトリ

webflow-designer-api について

Webflow Designer の拡張機能を作成する方法と、API Playground で単独のコードを実行する方法を案内するスキルです。ワークフローの選択を支援し、Designer API、デザイン、アプリ申請に関する資料を検索できます。

主な機能

  1. 01拡張機能と Playground のワークフロー
  2. 02Webflow Designer API のリファレンス
  3. 03タグやキーワードで資料を検索
  4. 04デザインと Marketplace のガイド

活用シーン

  1. 01Webflow Designer 内で動く拡張機能を作成
  2. 02Designer API メソッドの試作やテスト
  3. 03アプリ登録と申請の手順を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/224-industries/webflow-skills --skill webflow-designer-api

インストール後、Claude Code で/webflow-designer-apiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
install-playground-prompt.md
webflow-variables.css
references/
app-submission-and-listing.md
assets-api.md
code-examples.md
components-api.md
create-webflow-extension-reference.md
design-guidelines.md
designer-apis-reference.md
designer-extension-workflow.md
elements-api.md
error-handling.md
extension-utilities.md
faq.md
marketplace-guidelines.md
pages-api.md
playground-workflow.md
register-app.md
styles-api.md
variables-api.md
webflow-cli-reference.md
scripts/
search_references.py

詳細

Webflow Designer API

このスキルでは、2 つのワークフローを通じて Webflow Designer API を利用できます。まず、どちらのワークフローを利用するかユーザーに尋ねてください。または、文脈から明らかな場合は推測してください。

ワークフロー

1. Designer Extensions

Webflow Designer 内で iframe として動作する、UI 付きの本格的な拡張機能を構築します。再利用可能なツール、複雑なワークフロー、チームや Marketplace に公開するアプリに最適です。 → references/designer-extension-workflow.md を参照してください

2. Designer API Playground

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

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

各リファレンスファイルには、検索しやすいように name、description、tags を含む YAML frontmatter があります。scripts/search_references.py にある検索スクリプトを使うと、タグやキーワードから関連するリファレンスをすばやく見つけられます。

Designer API リファレンス

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

デザインと Marketplace のリファレンス
リファレンスの検索
# 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/search_references.py: タグやキーワードでリファレンスファイルを検索したり、メタデータ付きですべて一覧表示したりします
  • assets/webflow-variables.css — Webflow のデザインシステム用 CSS 変数
  • assets/install-playground-prompt.md — Claude Cowork または Claude Chrome Extension 経由で Designer API Playground をインストールするための、コピー可能なプロンプト

コメント

Markdown 対応