AI Design Components — плагин

Q: Как поставить AI Design Components в Claude Code?

Добавьте маркетплейс командой claude plugin marketplace add ancoleman/ai-design-components, затем ставьте плагины по группам, например claude plugin install ui-data-skills@ai-design-components. Другой путь — клонировать репозиторий и запустить ./install.sh с интерактивным меню.

Q: Какие скиллы входят в набор?

Скиллы разложены по группам-плагинам, например ui-data-skills, devops-skills и security-skills. Полный список с описаниями лежит в документации проекта на GitHub Pages.

Маркетплейс Claude Code из 19 плагинов и 76 скиллов по фронтенду, бэкенду, DevOps и безопасности с командой сборки цепочек

525 ★ репозитория
Последний коммит 10 дек. 2025
MIT

Плагин

ancoleman/ai-design-componentsАвтор:Anton Coleman

Установка

Работает в: Claude Code

Ручная установка

claude plugin marketplace add ancoleman/ai-design-components
claude plugin install devops-skills@ai-design-components

Подключает маркетплейс и ставит одну группу. Остальные 18 плагинов ставятся такой же командой с другим именем.

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

Скиллы направляют Claude к созданию кода, конфигураций инфраструктуры и команд для DevOps, которые агент может выполнять в проекте
Установщик install.sh создает команды и каталоги данных в настройках Claude Code
Группы про облака и инфраструктуру описывают работу с учетными записями и ресурсами AWS, GCP и Azure

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

AI Design Components — маркетплейс Claude Code из 19 плагинов, внутри которых 76 скиллов для разработки полного цикла. Фронтенд-часть охватывает дизайн-токены и темы, формы и таблицы, дашборды с графиками. Бэкенд-часть отвечает за базы данных, API и авторизацию. Остальные плагины посвящены DevOps и инфраструктуре как коду, безопасности, данным и MLOps, а отдельные группы описывают облачные паттерны AWS, GCP и Azure. Каждый скилл дает Claude основу из знаний предметной области, схему выбора подхода и готовые примеры кода. Скилл `theming-components` служит общим слоем стилей, на который ссылаются остальные компонентные скиллы. Команда `/skillchain:start` собирает из скиллов цепочку под задачу. Достаточно описать цель, например дашборд с графиками и фильтрами, REST API с Postgres или RAG-конвейер с эмбеддингами. Ставить можно все плагины сразу интерактивным скриптом install.sh или по одному через команды claude plugin.

Для кого. Разработчикам, которые ведут продукт целиком с Claude Code, от интерфейса до инфраструктуры и безопасности.

Подходит, если

Нужно построить дашборд с графиками, таблицами и фильтрами и выдержать единую систему тем, включая темную и контрастную
Требуется выбрать и описать схему для REST API с базой данных, авторизацией и наблюдаемостью
Нужно собрать цепочку скиллов командой `/skillchain:start` под задачу вроде Kubernetes с мониторингом или RAG-конвейера
Вы хотите ставить только нужные группы, например `infrastructure-skills`, `devops-skills` и `security-skills`
Нужна поддержка языков с письмом справа налево в интерфейсе: скилл `theming-components` описывает логические свойства CSS

Не подходит, если

Нужен один небольшой скилл: набор рассчитан на полный цикл разработки, и ставить его ради одной темы избыточно
Вы работаете не в Claude Code: установка рассчитана на его маркетплейс и команды claude plugin
Нужны скиллы по конкретному российскому сервису: набор общий и посвящен международным технологиям
Нужны примеры на самых свежих версиях библиотек и облачных API: репозиторий в последний раз менялся в декабре 2025 года

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

`/skillchain:start dashboard with charts and filters`: собери дашборд продаж с графиками по месяцам и фильтрами по региону и менеджеру

Ограничения

Нужен Claude Code CLI. Для актуальной документации библиотек автор советует подключить MCP-сервер Context7.
Скрипт install.sh ставит скиллы, команды skillchain и каталоги данных, поэтому перед запуском прочитайте его.
Тексты скиллов и документация на английском.
Последний коммит датирован декабрем 2025 года, и версии библиотек и облачных сервисов в примерах могут устареть.
Компонентные скиллы ссылаются на `theming-components` как на общий слой стилей, поэтому плагин `ui-foundation-skills` ставьте вместе с остальными UI-плагинами.

Как отключить. Снимите нужные плагины командой `claude plugin uninstall`, а маркетплейс командой `claude plugin marketplace rm ai-design-components`. Если ставили через install.sh, команды skillchain и каталоги данных, которые создал установщик, удалите вручную.

Частые вопросы

Как поставить AI Design Components в Claude Code?

Добавьте маркетплейс командой `claude plugin marketplace add ancoleman/ai-design-components`, затем ставьте плагины по группам, например `claude plugin install ui-data-skills@ai-design-components`. Другой путь — клонировать репозиторий и запустить `./install.sh` с интерактивным меню.

Как работает команда `/skillchain:start`?

Вы описываете задачу одной фразой, например «REST API with postgres» или «kubernetes with monitoring», и команда подбирает цепочку скиллов, которая по очереди ведет Claude через нужные области. Компонент skillchain ставит команда `./install.sh skillchain`.

Какие скиллы входят в набор?

Скиллы разложены по группам-плагинам, например `ui-data-skills`, `devops-skills` и `security-skills`. Полный список с описаниями лежит в документации проекта на GitHub Pages.

Можно ли поставить только часть набора?

Да. После добавления маркетплейса ставьте плагины по одному командой `claude plugin install`. Список всех плагинов покажет `./install.sh plugins list`.

Нужен ли дополнительный MCP-сервер?

Для скиллов он не обязателен, но автор рекомендует подключить Context7 MCP, чтобы Claude получал актуальную документацию библиотек.

Обсуждение

Вопросов и отзывов пока нет.

Плагины

ClaudeKit Skills

ClaudeKit - Agent Skills

Маркетплейс плагинов для Claude Code с набором из более чем тридцати скиллов: фронтенд, бэкенд, devops, базы, документы, отладка и работа с MCP

ПлагинРасширенный доступ2,2 тыс.

Claude Code Skills and Agents

Claude Code Skills & Agents

Плагин Claude Code с набором скиллов и субагентов: глубокое исследование, генерация картинок, работа с GitHub, разбор кода и переключение моделей

ПлагинШирокий доступ1,7 тыс.

Claude Skills для fullstack-разработки

Claude Skills

67 скиллов по языкам, фреймворкам, DevOps и безопасности плюс 9 команд для ведения эпиков в Jira и Confluence

СкиллМинимальный доступ12,1 тыс.

Claude Skills Marketplace

Маркетплейс плагинов Claude Code под инженерные процессы: планирование фич, тесты, ревью, git-автоматизация и среда выполнения кода

ПлагинРасширенный доступ689

Claude Code Skills

Marketplace плагинов и скиллов для Claude Code: Cloudflare, фронтенд, ассеты дизайна, тексты, релизы и интеграции

ПлагинШирокий доступ1,1 тыс.

Softaworks Agent Toolkit

Softaworks Agent Skills

Маркетплейс скиллов, субагентов и команд для кодовых агентов: разработка, документация, планирование и рабочая коммуникация

ПлагинРасширенный доступ2,6 тыс.

Сравнение с похожими

Записи с тем же главным запросом: чем они отличаются.

Запись	Официальный	Звезды репозитория	Главное отличие
AI Design Components (эта запись)	нет	525
Agentic Plugin Marketplace от wshobson	нет	41 979	намного больший маркетплейс с агентами и командами, с генерацией под Codex, Cursor и другие клиенты
Claude Code Templates	нет	32 982	CLI и каталог шаблонов для Claude Code с хуками, MCP и агентами

Коротко о README

README коротко описывает состав набора и способы установки, затем дает справочник команд маркетплейса, примеры skillchain и таблицу категорий. Полная документация вынесена на GitHub Pages.

Бейдж для README

Исходный SKILL.md

---
name: theming-components
description: Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.
---

# Design Tokens & Theming System

Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.

## Overview

Design tokens are the **single source of truth** for all visual design decisions. This skill provides:

1. **Complete Token Taxonomy**: 7 core categories (color, typography, spacing, borders, shadows, motion, z-index)
2. **Theme Switching**: Light/dark mode, high-contrast, custom brand themes
3. **RTL/i18n Support**: CSS logical properties for automatic right-to-left language support
4. **Multi-Platform Export**: CSS variables, SCSS, iOS Swift, Android XML, JavaScript
5. **Component Integration**: Skill chaining architecture for consistent styling across all components

**Critical Architectural Principle:**
```
Component Skills (Behavior + Structure) → Use tokens for ALL visual styling
Design Tokens (Styling Variables) → Define colors, spacing, typography
Theme Files (Token Overrides) → Light, dark, brand-specific values
```

---

## Quick Start

### Using Tokens in Components

**Step 1: Reference tokens in your component:**

```css
.button {
background-color: var(--button-bg-primary);
color: var(--button-text-primary);
padding-inline: var(--button-padding-inline);
padding-block: var(--button-padding-block);

Сообщить о проблеме