Почему код, который генерирует ваш AI-ассистент, выглядит одинаково плохо, и как это исправить за 30 секунд

🔍 Проблема не в модели

GPT-codex, Claude 4.8, Gemini 3.5 flash: все они умеют писать хороший код. Но по умолчанию ни один из них не знает ваших стандартов. 🤷‍♂️

Что получает модель без системного промпта:

• Никаких ограничений на архитектуру 🏗️

• Никаких предпочтений по тестированию 🧪

• Никаких правил по визуальному качеству 🎨

• Никаких требований к безопасности 🔒

Результат предсказуем. Компонент работает. Стили: дефолтный Tailwind. Тесты не написаны. any везде, где TypeScript сопротивлялся. Магические числа без объяснений. 😅

Это не модель плохая. Это пустое поле вместо технического задания. 📝

💡 Системный промпт: почему не работает «act as a senior dev»

Стандартные советы про системные промпты обычно заканчиваются на «скажи модели, что она опытный разработчик». Это примерно как нанять специалиста и описать его роль словом «хороший». 🧐

Настоящий системный промпт для инженерных задач выглядит иначе. Вот что в реальности содержит хорошо написанная персона для senior fullstack инженера:

• Конкретные архитектурные принципы (когда поднимать стейт, когда нет) 📐

• Жесткие правила по именованию и структуре 🗂️

• Обязательные паттерны для конкретных сценариев (data fetching, error boundaries, loading states) 🔄

• Явные запреты на действия без согласования 🛑

• Стандарты code review и критерии готовности к PR 🤝

Разница между шаблонным «act as senior developer» и детальной инструкцией сравнима с разницей между джуниором и техлидом. 👨‍💻

📦 proagents: 794 таких промпта, ноль зависимостей

github.com/Arlandaren/proagents ^[1]: открытая библиотека, собранная из шести ведущих репозиториев с агентными конфигурациями. 📁

Структура проекта:

proagents/
├── personas/          # 232 агента-специалиста
│   ├── engineering/   # 126 инженерных ролей
│   ├── design/        # 15 дизайн-персон
│   ├── operations/    # 33 операционных роли
│   └── ...
├── workflows/         # 521 исполняемый чеклист
│   ├── development/   # 363 воркфлоу разработки
│   ├── security/      # 64 чеклиста безопасности
│   └── ...
└── rules/             # 41 правило генерации
    ├── taste/         # Визуальные стандарты
    └── core/          # Гигиена кода

Установка в IDE выполняется одной командой: ⚡

git clone https://github.com/Arlandaren/proagents.git
cd proagents
./proagents install react-patterns --cursor

Настройка завершена. Редактор Cursor теперь знает ваши стандарты. 🎉

🎨 Разбор: что меняется с rules/taste/

Папка rules/taste/, пожалуй, самая недооцененная часть репозитория. Она не описывает роль. Она описывает эстетику. ✨

animate.md 🏃‍♂️

Запрещает CSS transition и animation в пользу spring physics. Вместо transition: all 0.3s ease используется useSpring из framer-motion с конкретными значениями stiffness и damping. В результате анимации ощущаются физически правдоподобными, а не просто «плавными».

liquid-glass.md 🔮

Настройка эффекта Glassmorphism. Никаких backdrop-filter: blur(10px) наугад, только проверенные комбинации blur, saturation и overlay-цветов, которые работают на разных фонах. Дополнительно описаны правила, когда этот эффект уместен, а когда создает проблемы с доступностью интерфейса.

bolder.md ✍️

Типографика без компромиссов. Иерархия контраста, правила для font-weight, запрет на использование color: #888888 в качестве нейтрального цвета. Текст либо читается, либо его нет.

overdrive.md 💎

Используется, когда нужен максимальный премиальный вид. Высокая визуальная плотность при сохранении читаемости. Этот файл стоит применять точечно, так как он делает UI агрессивно выразительным.

💻 Конкретный пример: до и после

Задача: написать карточку продукта в React.

Без системного промпта: ❌

function ProductCard({ product }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick={() => addToCart(product.id)}>Add to Cart</button>
    </div>
  );
}

Код работает, но выглядит слабо. Атрибут alt не несет смысла. Нет состояния загрузки, отсутствует обработка ошибок. Переменная addToCart берется из ниоткуда. 😒

С react-patterns + animate из proagents: ✅

interface ProductCardProps {
  product: Product;
  onAddToCart: (productId: string) => void;
}

function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const [isAdding, setIsAdding] = useState(false);
  const cardSpring = useSpring({ scale: 1, config: { stiffness: 300, damping: 20 } });

  const handleAddToCart = async () => {
    setIsAdding(true);
    await onAddToCart(product.id);
    setIsAdding(false);
  };

  return (
    <animated.article
      style={cardSpring}
      onMouseEnter={() => cardSpring.scale.set(1.02)}
      onMouseLeave={() => cardSpring.scale.set(1)}
      aria-label={`${product.name}, ${formatPrice(product.price)}`}
    >
      <img
        src={product.imageUrl}
        alt={product.name}
        loading="lazy"
      />
      <h3>{product.name}</h3>
      <p>{formatPrice(product.price)}</p>
      <button
        onClick={handleAddToCart}
        disabled={isAdding}
        aria-busy={isAdding}
      >
        {isAdding ? 'Добавляем...' : 'В корзину'}
      </button>
    </animated.article>
  );
}

Код полностью типизирован. Функция onAddToCart корректно передается через props. Добавлено состояние загрузки и поддержка доступности. Реализована spring-анимация с конкретными значениями. Форматирование цены вынесено в formatPrice. 👍

Модель не стала умнее. Просто получила правильное ТЗ. 🧠

🔌 Какие IDE поддерживаются

⚡ Попробуйте прямо сейчас

git clone https://github.com/Arlandaren/proagents.git
cd proagents
./proagents search security  # найдите нужные файлы
./proagents install owasp-threat-modeling --stdout  # просмотрите содержимое

Репозиторий: github.com/Arlandaren/proagents ^[1] ⭐

Если библиотека упростила вашу работу, поддержите проект звездой на GitHub и лайком на Хабре. Если у вас есть свои проверенные промпты, пулреквесты приветствуются. 🤝