К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

wpds · nexu-io — скилл для Claude Code: что делает и как установить

Применяет дизайн-токены, типографику и паттерны компонентов официальной WordPress Design System в темах и сайтах.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill wpds -a claude-code
Открыть на GitHub

Что делает wpds

Скилл добавляет в контекст ассистента спецификацию WordPress Design System. С его помощью агент находит официальные токены оформления, настраивает типографику и собирает компоненты интерфейса по стандартам экосистемы WordPress.

Каталожная запись подготовлена на базе репозитория WordPress/skills. Она позволяет агенту распознавать дизайн-систему ещё на шаге планирования работ. При этом для доступа к оригинальным скриптам и ресурсам понадобится установить апстрим-пакет из WordPress/skills, иначе агент ограничится базовыми инструкциями.

Какие задачи решает

  • внедрить официальные дизайн-токены WordPress в тему
  • настроить типографику интерфейса по гайдлайнам WordPress
  • собрать разметку компонентов по готовым паттернам платформы

Примеры запросов агенту

  • wpds: обнови типографику и цвета темы под стандарты WordPress
  • wordpress design: примени официальные токены к нашему блоку
  • wp tokens: проверь переменные стилей на соответствие дизайн-системе

Как установить wpds

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill wpds -a claude-code

2Вручную: положить файлы

~/.claude/skills/wpds/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/wpds/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Другие версии wpds

wpds WordPress Скилл подтягивает документацию WordPress Design System через MCP-сервер, чтобы агент собирал интерфейс на настоящих компонентах и токенах, а не по памяти. Claude Code CX Codex Cursor +1 4 000установок

Похожие

answer-me-with-html QingYunA Скилл превращает сложный ответ в одностраничное HTML-объяснение. Пригодится, когда нужно показать схему, сравнение или ход разбора. Claude Code CX Codex Cursor +1 5 200установок antislop miqdadbadjuber Фильтрует шаблонные решения ИИ при работе с интерфейсами и кодом. Нужен, когда агент должен следовать заданным правилам оформления и текста. Claude Code CX Codex Cursor +1 7 300установок gsap-framer-scroll-animation официальный Utkarsh Patrikar Скилл помогает создавать анимации, связанные со скроллом, через GSAP ScrollTrigger и Framer Motion. Подойдёт для React, Next.js и vanilla JS. GitHub Copilot 3 900установок design-motion-principles kylezantos Создаёт и проверяет анимации интерфейса с учётом контекста продукта и частоты действий. Нужен для переходов, состояний наведения и микровзаимодействий. Claude Code CX Codex Cursor +1 12 600установок argent-lens software-mansion Скилл для выбора визуальных вариантов интерфейса в нативном окне Argent Lens. Помогает сравнить несколько дизайнов кнопки или экрана на симуляторе. Claude Code CX Codex Cursor +1 22 400установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о wpds

Как установить wpds в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill wpds -a claude-code.

Что делает скилл wpds?

Он передаёт агенту правила WordPress Design System, позволяя автоматически использовать официальные токены, типографику и шаблоны компонентов при вёрстке.

Зачем нужен апстрим-репозиторий WordPress/skills?

Скилл в каталоге отвечает за обнаружение правил агентом. Полный набор исходных ассетов и служебных скриптов поставляется в оригинальном репозитории WordPress/skills.

Исходный текст

SKILL.md · Apache-2.0 
---
name: wpds
description: |
  WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
triggers:
  - "wpds"
  - "wordpress design"
  - "wp tokens"
  - "wp design system"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/WordPress/skills"
---

# wpds

> Curated from the WordPress development team.

## What it does

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

## Source

- Upstream: https://github.com/WordPress/skills
- Category: `design-systems`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/WordPress/skills
```

Then ask the agent to invoke this skill by name (`wpds`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором