Я учил ИИ курсора создавать административные интерфейсы, поэтому мне не нужно
10 июля 2025 г.Будущее не заменяет разработчиков ИИ - разработчики, обучающие ИИ, как мы строим. Затем позволил ему справиться с скучными деталями.
Я устал от восстановления административных панелей с нуля, поэтому я сделал то, что сделал бы любой здравомыслящий разработчик в 2025 году: я заставил ИИ сделать это.
У нас уже был адмирал, наша библиотека компонентов с открытым исходным кодом для внутренних инструментов. Таблицы, формы, фильтры - все основы для административных панелей. Но проводка? Все еще ручное.
Это изменилось, когда я интегрировал .cursor/Правила в проект - специальный каталог, который содержит руководящие принципы разработки, написанные в формате Marckdown. Эти правила интегрируются с Cursor IDE и помогают следить за стандартами по всему проекту при написании кода.
Вы можете узнать больше в официальной документации:
По сути, я оптимизировал и ускорил наш процесс разработки и создал многоразовый набор инструкций по ИИ для работы с Адмиралом, чтобы помочь нам поддерживать высококачественный код во всех наших проектах, работающих на курсоре.
Я написал правила, основанные на Марков, которые научили курсора, как использовать компоненты адмирала, крючки, файловые структуры и соглашения об именах.
Теперь, когда мне нужен новый пользовательский интерфейс CRUD, я просто подаю ИИ короткую конфигурацию:
@crud-page
Resource: /api/products
Fields: name, price, category
Filters: category
Курсор генерирует полностью подготовленный пользовательский интерфейс: маршруты, макет, формы, таблица, фильтры; Все соответствует нашим стандартам кодовой базы.
Речь идет не о том, чтобы ИИ помогает разработчикам, больше похоже на разработчиков, которые обучают ИИ, как мы на самом деле строим программное обеспечение, а затем позволяют ему справиться с шаблоном.
Я обучаю его, чтобы понять и обеспечить соблюдение нашей архитектуры, шаблонов пользовательского интерфейса и стандартов качества кода. Внедряя правила, специфичные для проекта в.cursor/rulesЯ эффективно создал многоразового помощника ИИ, который знает, как генерировать согласованные, напечатанные и готовые административные интерфейсы, адаптированные в нашем стеке. Он может раскручивать страницы CRUD с полной маршрутизацией, использованием компонентов, логикой формы, фильтрами и даже конфигурацией меню - все в минутах, без одной строки кода ручного клея. Это все равно, что дать вашему младшему разработке идеальное воспоминание, 24/7 доступность и нулевое выгорание.
Таким образом,
- Я не пропускаю безопасность типа.
- Я не обходил правила ворса
- Я не касаюсь кода, я бы не развернул
И теперь я могу развернуть новые функции администратора за считанные минуты.
Готовы увидеть полную установку?
Я сломаю, как работают правила, что в каждом файле и как расширить систему для моей собственной команды. Давайте сделаем полное прохождение!
Прямо сейчас адмирал отправляется с тремя ключевыми правилами внутри.cursor/rules:
crud-page.mdc- Как построить страницы CRUD с адмиралом;admiral-components.mdc- Как использовать наши компоненты React;admiral-hooks.mdc- Как использовать общие крючки в разных проектах.
admiral-components.mdcи адмирал-Хуки.mdc
Эти правила всегда включены в контекст курсора. Они ведут себя как чит -листы для ИИ - поэтому он знает, какие компоненты существуют, какие реквизиты они принимают, и какие модели следует следовать. Это означает больше не галлюцинированных реквизитов или случайного неправильного использования внутренних API. Вместо этого, последовательный код, который соответствует тому, как мы на самом деле строим.
crud-page.mdc: Сердце автоматизации CRUD
Административные панели по природе тяжелые. Это правило учит курсора, как мы справляемся с ними - не только с пользовательским интерфейсом, но и структурой файла, именованием, наборами и использованием компонентов.
Это обеспечивает соблюдение:
- Последовательная структура для всех страниц CRUD;
- Предсказуемые имена переменной и функций;
- Одобренное использование компонентов из @Devfamily/Admiral;
- Файл и структура каталогов, которые соответствуют нашим стандартам.
Все, что нам нужно сделать, это описать ресурс и поля. Курсор берет его оттуда. Как работает правило (с точки зрения ИИ)
Основная логика
В основе этой настройки лежит способ, которым я преподавал ИИ именно то, как должна выглядеть страница CRUD в нашей кодовой базе. Речь идет о обеспечении соблюдения структуры. Я позаботился о том, чтобы ИИ понимал, как мы организуем наши файлы, как мы называем функции и переменные, и каковы необходимые разделы каждой конфигурации страницы, такие как путь, ресурс и индекс. Я также дал ему четкие границы, на которых компоненты из нашей библиотеки адмирала она разрешена использовать, и как их правильно использовать. Таким образом, каждая страница, которую она создает, следует той же архитектуре, одинаковой конвенции и такому же уровню качества, которое я ожидаю от товарища по команде.
Структура папки
Каждая страница получает свой собственный каталог внутри проекта:
ИИ обязанности
Я настроил его так, чтобы курсор точно знал, что делать, как только он получит вход. Он создает все правильные файлы в нужных местах, регистрирует маршруты в
pagesкаталог, и даже добавляет элемент меню, если конфигурация требует его. Каждый компонент, который он использует, полностью напечатан и выходит прямо из наших@devfamily/admiralБиблиотека-нет сторонней случайности или мошеннических элементов. И как только код генерируется, курсор автоматически запускает TypeScript, а Lint проверяет все. Если что -то выключено, это исправляет это на месте.Лучшие практики
Запеченная в правиле также включает в себя кучу практических советов, которые я запекал со временем - вещи, которые я обнаружил в обзорах кода. Он знает, как обрабатывать ширину столбцов и когда использовать пользовательские визуализации внутри таблиц. Он понимает, как мы группируем фильтры и используем
allowClearДля выбора входов, чтобы поддерживать чистку пользовательского интерфейса. Для форм это следует за нашими правилами макета, используяcolumnSpan, и он знает, когда разбить поля на модульные компоненты для читаемости. Даже действия на столе обрабатываются так, как они нам нравятся - используяTopToolbarС правильным набором кнопок значков, так что все кажется отполированным из коробки.Тип безопасности
ИИ знает, где найти внутренние типы адмирала:
node_modules/@devfamily/admiral/lib/admiral/crudБуквально не более никаких несоответствий типа.
Опыт разработчика
Если вы используете@crud-pageВ приглашении курсор будет либо просить необходимые входные данные, либо действовать в отношении того, что вы уже предоставили.
Вот формат конфигурации:
Base name: Products
Resource: /api/products
Table: name, price, category
Create fields: name, price, category
Edit fields: (same)
Filter fields: category
Quick filters: (same)
Оттуда курсор генерирует все:pagesВtypesВlayoutВformsВfiltersВroutingВmenu- Все подключены и готовы к работе.
Вы получаете новую функцию за считанные минуты без кода клей и пропущенных типов.
Реальный пример
Начнем с запуска@crud-page ruleПолем
Поскольку конфигурация не была дана, Курсор спрашивает нас о необходимой информации. Мы отвечаем полной настройкой.
Как только я передам конфигурацию, ИИ приходит к работе. Он создает полную структуру файла, заполняет всю логику на основе определенных правил, которые я определил, и немедленно запускает проверки типа, и Linter проходит в результате. Если что -то сломается, это не просто указывает на это - это исправляет. Мне даже не нужно покидать редактор.
В итоге мы получаем чистый, готовый к развертыванию код. Оттуда мы можем итерации - либо заставив ИИ снова, либо настройку файлов вручную.
Заключение
Мы используем.cursor/rulesНа реальных проектах сегодня. Это уже экономит нам часы, и результаты более последовательны, чем любой юношеский DEV или инструмент шаблона, который мы использовали ранее.
Далее: Расширение установленного правила для охвата шаблонов макета, асинхрологической логики и более глубокой проверки формы.
Оригинал