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

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

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

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

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

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

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

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

Результат предсказуем. Компонент работает. Стили: дефолтный 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: открытая библиотека, собранная из шести ведущих репозиториев с агентными конфигурациями. 📁

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

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.gitcd 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.gitcd proagents./proagents search security  # найдите нужные файлы./proagents install owasp-threat-modeling --stdout  # просмотрите содержимое

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

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