# ant-design

Правило задаёт агенту стандарты работы с Ant Design v6.x: тему через токены, сетку, доступность компонентов. Пригодится, если проект на React и Ant Design.

- правило · `type=rule` · Cursor · ★ 3579
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/ant-design.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/ant-design

## Что делает

Файл описывает, как писать интерфейсы на Ant Design v6.x, чтобы код оставался единообразным. Главная мысль — тему меняют через систему дизайн-токенов в `ConfigProvider`, а не переопределением CSS-классов. Для этого заводят отдельный `theme.ts` с `seedToken` для глобальных значений и `componentToken` для конкретных компонентов, а светлую и тёмную схемы переключают готовыми алгоритмами.

Вёрстку правило привязывает к 8-пиксельной сетке и полотну 1440px: структура собирается из `Row` и `Col` с пропсами `span` и `gutter`, а не из собственных отступов в пикселях. Компоненты импортируются напрямую из `antd`, для интерактивных элементов нужны атрибуты `aria-*` — иначе кнопка с одной иконкой останется без подписи для скринридера. Локаль и тему ставят в корне приложения через `ConfigProvider`, а для SSR советуют идти по официальному гайду Ant Design, чтобы не ловить расхождения при гидратации.

Отдельный пункт — производительность: в продакшене включают режим `zeroRuntime` (появился в v6.0.0) и подключают заранее сгенерированный CSS, а сборку настраивают на tree shaking для `antd`. Правило рассчитано на TypeScript и ESLint с `eslint-plugin-antd`. Если в проекте нет React или Ant Design, файл агенту только помешает: он начнёт тянуть компоненты библиотеки туда, где их нет.

## Установка

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

**Вручную: положить файлы**
- Файл: `.cursor/rules/ant-design.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/ant-design.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/ant-design.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/ant-design.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/ant-design.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/ant-design.mdc

## Когда брать
- перевести тему приложения на дизайн-токены вместо правок CSS
- собрать адаптивную сетку из Row и Col без ручных отступов
- добавить aria-атрибуты кнопкам с одной иконкой
- настроить локаль и тему в корне приложения
- включить zeroRuntime и убрать лишний CSS из бандла

## Примеры запросов агенту
- Перепиши тему приложения на дизайн-токены Ant Design, вынеси конфиг в `theme.ts`
- Собери этот экран на Row и Col с gutter 16, без своих margin
- Проверь компоненты на доступность и добавь недостающие aria-атрибуты

## Похожие
- [ant](https://affpapa.org/nevibecode/skills/ant.md) — скилл · 2300 установок
- [design-code](https://affpapa.org/nevibecode/skills/design-code.md) — скилл · 525 установок
- [frontend-design-deslop](https://affpapa.org/nevibecode/skills/frontend-design-deslop.md) — скилл · 4800 установок
- [create-design-md](https://affpapa.org/nevibecode/skills/create-design-md.md) — скилл · 4400 установок
- [build-design](https://affpapa.org/nevibecode/skills/build-design.md) — скилл · 3600 установок
- [design-system-patterns](https://affpapa.org/nevibecode/skills/design-system-patterns.md) — скилл · 15953 установки

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 69 карточек

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

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