WDS документация
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on
AIwix
official
Дизайн
Что делает навык
Навигатор по документации Wix Design System (WDS), который позволяет находить компоненты, просматривать их props и примеры использования. Работает через Node.js скрипт, автоматически обнаруживая установленный пакет @wix/design-system в проекте.
Когда применять
- Поиск компонентов WDS по ключевым словам
- Получение списка props и примеров для конкретного компонента
- Просмотр конкретного примера использования компонента
- Поиск иконок в дизайн-системе
Как работает
- Убедиться, что пакет @wix/design-system установлен (npm i @wix/design-system или yarn add @wix/design-system)
- Определить абсолютный путь к скрипту scripts/wds.js внутри директории навыка
- Выполнить команду node с соответствующим аргументом: search для поиска по ключевому слову, component для получения props и списка примеров, example для конкретного примера или icons для поиска иконок
- Использовать полученные данные для выбора компонентов и проверки их параметров в UI
Примеры запросов агенту
Найди компоненты WDS, связанные с кнопками
Покажи props и примеры для компонента Button
Найди иконку, похожую на лупу, в WDS
Что понадобится
- Установленный пакет @wix/design-system
- Node.js для выполнения скрипта
Описание составлено по SKILL.md навыка, сверено 06.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «wds-docs» из репозитория:
# https://github.com/wix/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r wds-docs/ ~/.claude/skills/wds-docs/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.