AIKraft/AI/Войти
AIKraft/Skills/Паттерны ИИ-интерфейсов

Паттерны ИИ-интерфейсов

Teaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user experience in React.

patternsdev official Дизайн

Что делает навык

Набор паттернов проектирования для создания реактивных пользовательских интерфейсов на базе ИИ в React. Решает задачи интеграции бэкенд-сервисов ИИ с UI, включая управление промптами, потоковую передачу ответов, обработку ошибок иdebouncing ввода.

Когда применять

  • Создание чат-ботов с потоковой передачей ответов от LLM
  • Разработка интеллектуальных ассистентов на базе React
  • Интеграция провайдеров ИИ (OpenAI, Anthropic) в React-приложения
  • Построение пользовательского опыта с использованием AI UI Components

Как работает

  1. Выбрать стек реализации: plain React (Vite) или Next.js
  2. Настроить интеграцию с AI-движком (например, OpenAI API через Vercel AI SDK)
  3. Применить паттерны управления промптами и потоковой передачи ответов (streaming)
  4. Реализовать debouncing ввода и обработку ошибок
  5. Использовать TailwindCSS для стилизации и AI Elements для готовых UI-компонентов
  6. Адаптировать реализацию под специфику выбранного фреймворка (Vite vs Next.js)

Примеры запросов агенту

Создай React-чат с потоковой генерацией ответов от OpenAI, используя Vercel AI SDK и TailwindCSS
Реализуй паттерн обработки ошибок и debouncing для интеллектуального ассистента на Next.js
Настрой интерфейс чат-бота с использованием AI Elements для быстрого прототипирования UI

Что понадобится

  • React (Vite или Next.js)
  • Vercel AI SDK
  • OpenAI API (или совместимые провайдеры, например, Anthropic)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «ai-ui-patterns» из репозитория: # https://github.com/patternsdev/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r ai-ui-patterns/ ~/.claude/skills/ai-ui-patterns/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.