Ludi Design System Skill
Скилл Ludi Design System учит агента выбирать компоненты и собирать страницы B2B-интерфейсов по правилам с шаблонами TSX
- 89 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл только добавляет правила и шаблоны, сеть и команды он не использует
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/ludi-design-system-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл только добавляет правила и шаблоны, сеть и команды он не использует
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл на китайском языке для Claude Code, Cursor, Windsurf, Codex и Antigravity превращает правила корпоративного интерфейса в ограничения, которые агент выполняет при генерации кода. Он вводит шесть каркасов страниц: список с фильтрами, форма по шагам, карточка документа, дашборд, настройки и страницы ошибок и результата. Семь отрицательных критериев выбора компонентов говорят агенту, чего не делать. Для деталей по умолчанию берется боковой Drawer, модальное окно оставлено для опасных операций, скелетон до секунды запрещен, а Tooltip не прячет критичные ошибки. Набор правил оформления включает рамки 0.5px, концентрические радиусы, моноширинные цифры `tabular-nums` и `text-wrap: balance`. В репозитории лежат `SKILL.md`, машинный список компонентов `components.manifest.json`, семь справочников в `references/`, четыре TSX-шаблона и скрипт `scripts/audit-design-rules.py` для проверки дизайн-правил. Для Cursor и Windsurf есть `.cursorrules` и `.windsurfrules`.
Для кого. Фронтенд-разработчикам и дизайнерам корпоративных кабинетов и админок на React, TypeScript и Tailwind, которые генерируют экраны агентом.
Подходит, если
- Агент собирает страницу списка с фильтрами и массовыми действиями, и ему нужен каркас
- Форма с тремя шагами должна валидировать поля при уходе из поля и защищать от потери данных
- Для просмотра строки таблицы агент выбирает боковую панель и обходится без модального окна
- Готовую верстку надо прогнать скриптом аудита дизайн-правил
Не подходит, если
- Нужен потребительский сайт или лендинг: правила рассчитаны на корпоративные кабинеты
- Проект не на React и Tailwind: TSX-шаблоны на них опираются
- Нужен язык документации не китайский: README и справочники на китайском
Пример запроса к агенту
Собери страницу списка заказов по скиллу b-end-design-system: фильтры, массовые действия и просмотр в боковой панелиОграничения
- Документация и справочники на китайском языке, английского README нет.
- TSX-шаблоны требуют React, TypeScript, `lucide-react` и Tailwind CSS: это референсные компоненты и отдельным приложением не служат.
- Скилл не копируется командой: файлы переносят вручную по инструкции `docs/install-claude-code.md` или аналогам для других редакторов.
- Скрипт `audit-design-rules.py` требует Python 3.
- Правила сформулированы для корпоративных кабинетов, для витрин и лендингов они мало подходят.
Как отключить. Удалите папку `.claude/skills/b-end-design-system/` в проекте или в `~/.claude/skills/`.
Частые вопросы
Какие агенты поддерживаются?
Claude Code, Cursor, Windsurf, Codex и Antigravity: для каждого в `docs/` есть инструкция установки.
Что такое отрицательные критерии выбора?
Семь правил о том, когда компонент не подходит: например, при менее пяти вариантах выбор показывают радио-кнопками без выпадающего списка.
Есть ли автоматическая проверка?
Да, `scripts/audit-design-rules.py` проверяет код по правилам дизайн-системы, нужен Python 3.
Что входит в репозиторий?
`SKILL.md`, список компонентов `components.manifest.json`, семь справочников в `references/`, четыре TSX-шаблона и скрипт аудита.
На каком языке написан скилл?
Документация и справочники на китайском. Агент применяет правила независимо от языка вашего запроса.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыРеестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Дизайн-система в виде промптов для Codex, Cursor и Claude Code: каталоги стилей, раскладки, блоки и свои правила интерфейса.
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
Скилл и CLI для агентов: интерфейс без шаблонного вида, 25 команд, проверка шаблонности правилами и оценка качества от 0 до 100
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Ludi Design System Skill (эта карточка) | нет | 89 | |
| shadcn/ui | нет | 128 022 | скилл и MCP для компонентов shadcn/ui, а здесь правила выбора и каркасы страниц для корпоративных интерфейсов |
| Ant Design CLI | нет | 261 | справочник по Ant Design, правил композиции страниц не содержит |
Коротко о README
README на китайском объясняет, зачем скиллу правила и запреты, перечисляет шесть шаблонов страниц, семь отрицательных критериев и эстетические правила, показывает структуру репозитория и ведет к инструкциям установки для Cursor, Windsurf, Claude Code, Codex и Antigravity.