# webflow-cli:designer-extension

Скилл ведёт агента по всему циклу работы с Designer Extensions в Webflow: выбор шаблона, инициализация проекта, локальный сервер и сборка бандла.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 установок · ★ 132
- Автор: webflow
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/designer-extension-command/SKILL.md
- Обновлён: 2026-10-22
- HTML: https://affpapa.org/nevibecode/skills/webflow-clidesigner-extension

## Что делает

Скилл описывает пошаговый сценарий для CLI Webflow. Агент проверяет установку через `webflow --version`, смотрит, не открыт ли уже проект расширения по `webflow.json`, и дальше идёт по фазам: список шаблонов, инициализация, локальная разработка, сборка.

Шаблонов три: `default` — HTML, CSS и JavaScript, `react` и `typescript-alt`. Проект создаётся командой `webflow extension init <project-name> <template>`, после чего агент читает сгенерированный `webflow.json` и показывает пять полей схемы: `name`, `apiVersion`, `publicDir` обязательные, `appIntents` и `appConnections` опциональные. Дев-сервер поднимается через `webflow extension serve [port]`, по умолчанию порт 1337, расширение грузится в Designer по локальному адресу. Для загрузки в Webflow есть `webflow extension bundle` — на выходе `bundle.zip` в `dist`.

Перед началом нужен установленный CLI Webflow и авторизация: скилл проверяет `webflow auth login`. Все операции идут через Bash, а MCP-инструменты Webflow для этого сценария не используются — если у вас настроен Webflow MCP, он тут только помешает. Менеджер пакетов агент определяет по lock-файлу (`package-lock.json`, `pnpm-lock.yaml`, `yarn.lock`), а если файла нет — спросит вас.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill webflow-cli:designer-extension -a claude-code
```
```bash
npx skills add webflow/webflow-skills --skill designer-extension-command -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/designer-extension-command/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/designer-extension-command/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill designer-extension-command -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/designer-extension-command/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill designer-extension-command -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/designer-extension-command/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install webflow/webflow-skills designer-extension-command
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/designer-extension-command/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill designer-extension-command -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/webflow/webflow-skills --path plugins/webflow-skills/skills/designer-extension-command
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/designer-extension-command/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill designer-extension-command -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/designer-extension-command/SKILL.md

## Когда брать
- создать каркас расширения Webflow из готового шаблона
- поднять локальный дев-сервер и открыть расширение в Designer
- собрать `bundle.zip` для загрузки в Webflow
- разобраться в полях схемы `webflow.json` перед правкой
- выбрать между `default`, `react` и `typescript-alt`

## Примеры запросов агенту
- Покажи доступные шаблоны Designer Extension
- Создай расширение gallery-manager на React
- Собери моё расширение для загрузки

## Похожие
- [bencium-impact-designer](https://affpapa.org/nevibecode/skills/bencium-impact-designer.md) — скилл · 5400 установок
- [extension-qr-code](https://affpapa.org/nevibecode/skills/extension-qr-code.md) — скилл · 28200 установок
- [extension-invite-links](https://affpapa.org/nevibecode/skills/extension-invite-links.md) — скилл · 28100 установок
- [magicpath](https://affpapa.org/nevibecode/skills/magicpathai-magicpath.md) — скилл · 6300 установок
- [ui-designer](https://affpapa.org/nevibecode/skills/ui-designer.md) — скилл · 3600 установок
- [frontend-designer](https://affpapa.org/nevibecode/skills/frontend-designer.md) — скилл · 335 установок

Из того же набора: [webflow/webflow-skills](https://affpapa.org/nevibecode/by/webflow/webflow-skills.md) — 21 карточка

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md