Loading...
Community presentation
Создай НОВУЮ презентацию с нуля. Тема презентации: «Как я создала и протестировала AI Code Assistant для frontend-проекта» Цель презентации: Показать не просто результат, а весь…
Create your own version
Use this visual direction as inspiration for a new Presenton deck.
Use this designCreator prompt
Создай НОВУЮ презентацию с нуля. Тема презентации: «Как я создала и протестировала AI Code Assistant для frontend-проекта» Цель презентации: Показать не просто результат, а весь инженерный процесс: зачем понадобился AI-помощник, как была создана Knowledge Base, почему появилось несколько версий базы знаний, как каждая версия тестировалась и как я проверяла качество работы модели. Презентация должна выглядеть как демонстрация реального инженерного кейса, а не как техническая документация. ВАЖНО: - Используй только факты, указанные в этом промте и на предоставленных скриншотах. - Не придумывай результаты тестов, проценты улучшения, accuracy, scores или другие метрики, которых нет в исходных данных. - Если количественных результатов теста нет — не создавай искусственные графики эффективности. - Все тексты, подписи графиков и мемов должны быть НА РУССКОМ ЯЗЫКЕ. - Используй предоставленные мной скриншоты как реальные доказательства проделанной работы. - Мемы должны быть частью повествования, а не случайным украшением. - Минимум сплошного текста, максимум визуализации. - На каждом слайде должна быть одна понятная мысль. СТИЛЬ: Современная IT-презентация. Минималистичный, технологичный дизайн. Крупные цифры. Диаграммы. Схемы. Стрелки. Карточки. Скриншоты интерфейса. Мемы. Не использовать перегруженные таблицы и длинные абзацы. ================================================== СЛАЙД 1. ТИТУЛ ================================================== Заголовок: «AI Code Assistant для frontend-проекта» Подзаголовок: «От 3004 файлов в Knowledge Base до структурированного контекста и 24 тестов» Визуально можно использовать фрагменты интерфейса Open WebUI / AI Code Assistant. Небольшая подпись: «Проект: Реестр систем» ================================================== СЛАЙД 2. ЗАЧЕМ ВООБЩЕ НУЖЕН AI CODE ASSISTANT ================================================== Показать задачу: AI должен помогать frontend-разработчику: • писать новый код; • рефакторить существующий код; • делать code review; • писать тесты; • работать в соответствии с архитектурой проекта; • использовать существующие project patterns и conventions. Главная проблема: «Обычный AI знает React. Но мне нужен AI, который знает НАШ проект.» Сделать это визуально: Обычный AI → общие best practices против AI Code Assistant → конкретный проект → конкретный код → конкретные conventions → конкретная архитектура ================================================== СЛАЙД 3. ЧТО Я ДАЛА AI ================================================== Показать архитектуру контекста: AI Code Assistant │ ┌────────────────┼────────────────┐ ↓ ↓ ↓ Исходный код Документация Конфигурация │ │ │ └────────────────┼────────────────┘ ↓ Knowledge Base ↓ Ответ AI по проекту Использовать скриншот модели «SR-Frontend Code Assistant». На скриншоте показать: - название модели; - базовую модель qwen3-coder; - системный промпт; - принцип использования реального project source. Не превращать весь системный промпт в текст на слайде. Выделить главную идею: «Exact source code > source usage > project documentation > general knowledge» Перевести на русский: «Исходный код проекта важнее документации и общих best practices». ================================================== СЛАЙД 4. V1 — ПЕРВАЯ ВЕРСИЯ KNOWLEDGE BASE ================================================== Крупная цифра: 3004 файла Подпись: «Первая версия базы знаний» Использовать предоставленный скриншот: SR-Frontend (Реестр систем) v1. Обрезать скриншот так, чтобы крупно было видно: «3004 файла» Показать проблему визуально: 3004 файла ↓ огромный объём контекста ↓ сложно контролировать структуру ↓ нужно проверить, насколько хорошо AI ориентируется в проекте Добавить мем «This is fine». Русская подпись: «Когда AI должен найти один конкретный компонент среди 3004 файлов» ================================================== СЛАЙД 5. НЕ ПРОСТО ЗАГРУЗИЛА ФАЙЛЫ — НАЧАЛА ТЕСТИРОВАТЬ ================================================== Заголовок: «Как проверить, что AI действительно понимает проект?» Ответ: «Одинаковым набором тестов для каждой версии Knowledge Base.» Показать визуальную схему: Knowledge Base ↓ AI Assistant ↓ 8 тестовых сценариев ↓ анализ результата Главная мысль: «Для каждой версии базы знаний я провела одинаковый набор из 8 тестов.» ================================================== СЛАЙД 6. 8 ТЕСТОВ ================================================== Показать 8 тестовых сценариев в виде 8 карточек: 1. Проверка project style 2. Проверка project structure 3. Проверка переписывания кода 4. MobX 5. API layer 6. Dynamic Form 7. Рефакторинг 8. Полноценная feature Не использовать длинные описания. Сделать визуально как тестовую матрицу. Внизу крупно: «8 сценариев × каждая версия Knowledge Base» ================================================== СЛАЙД 7. V1 → 8 ТЕСТОВ ================================================== Крупно: V1 3004 файла ↓ 8 тестов Показать 8 тестов вокруг блока V1. Использовать скриншоты/фрагменты соответствующих тестов, если они доступны среди предоставленных материалов. Главная мысль: «Первая версия проверена по полному набору сценариев.» Не придумывать результаты тестов. ================================================== СЛАЙД 8. V2 — РЕСТРУКТУРИРОВАЛА KNOWLEDGE BASE ================================================== Крупная визуальная трансформация: 3004 файла ↓ 20 файлов Заголовок: «V2 — компактная структурированная база» Использовать скриншот: SR-Frontend (Реестр систем) v2. Крупно выделить: 20 файлов Рядом показать: «Вместо огромного количества файлов — структурированная база знаний с выделенными темами проекта.» На слайде обязательно использовать мем «Distracted Boyfriend». Надписи на русском: Парень: «Я» Девушка: «3004 файла» Другая: «20 структурированных файлов» Или более мемный вариант: «Когда понял, что 3004 файла — это не обязательно хороший контекст» ================================================== СЛАЙД 9. V2 → СНОВА 8 ТЕСТОВ ================================================== Показать: V2 20 файлов ↓ 8 тестов Визуально подчеркнуть: «Тот же набор тестов» Схема: V1 → 8 тестов V2 → 8 тестов Идея: «Версии можно сравнивать только при одинаковом наборе проверок.» ================================================== СЛАЙД 10. V3 — РАСШИРЕНИЕ БАЗЫ ================================================== Крупная цифра: 155 файлов Заголовок: «V3 — расширенная Knowledge Base» Использовать скриншот: SR-Frontend (Реестр систем) v3. Показать, что база снова выросла: 20 ↓ 155 Но НЕ делать вывод: «155 лучше 20» Вместо этого написать: «Количество файлов само по себе не определяет качество контекста.» Ниже: «Важно не сколько файлов, а насколько хорошо AI получает нужный project-specific context.» ================================================== СЛАЙД 11. V3 → ЕЩЁ 8 ТЕСТОВ ================================================== Показать: V3 155 файлов ↓ 8 тестов И рядом объединить все три версии: V1 → 8 V2 → 8 V3 → 8 ================================================== СЛАЙД 12. ГЛАВНАЯ ДИАГРАММА ПРЕЗЕНТАЦИИ ================================================== Создай большую наглядную диаграмму: Количество файлов: V1 ████████████████████████████████████████ 3004 V2 ▏20 V3 ██ 155 Под диаграммой отдельный блок: Количество тестов: V1 ████████ 8 V2 ████████ 8 V3 ████████ 8 И крупный вывод: «3 версии × 8 тестов = 24 теста» Это должен быть один из самых визуально сильных слайдов презентации. ВАЖНО: Не использовать масштаб, который визуально делает 20 и 155 одинаковыми с 3004. Диаграмма должна честно показывать разницу порядков величины. ================================================== СЛАЙД 13. 24 ТЕСТА ================================================== Сделать максимально наглядную инфографику: V1 ↓ 8 тестов V2 ↓ 8 тестов V3 ↓ 8 тестов ↓ ╔══════════════╗ ║ 24 ТЕСТА ║ ╚══════════════╝ Подпись: «Одинаковый набор сценариев для каждой версии Knowledge Base» Можно использовать 24 маленьких кружка/карточки, сгруппированных: 8 + 8 + 8. ================================================== СЛАЙД 14. ЧТО ИЗМЕНИЛОСЬ В ПОДХОДЕ ================================================== Сделать визуальную эволюцию: V1 «Загрузили много исходных файлов» ↓ V2 «Сжали и структурировали контекст» ↓ V3 «Расширили покрытие проекта» ↓ «Каждую версию проверили одинаковым набором тестов» Не добавлять придуманные результаты. Главная мысль: «Я не просто меняла Knowledge Base — я проверяла каждую итерацию.» ================================================== СЛАЙД 15. МЕМНЫЙ СЛАЙД ================================================== Использовать мем с котами. Русская надпись: «Когда три версии Knowledge Base, 24 теста, 3004 → 20 → 155 файлов и наконец-то можно сравнивать подходы» Сделать этот слайд лёгким и юмористическим. Можно крупно добавить: «AI понял проект. Кажется.» ================================================== СЛАЙД 16. ИТОГ ================================================== Сделать финальную визуальную схему: 3004 файла ↓ V1 ↓ 8 тестов 20 файлов ↓ V2 ↓ 8 тестов 155 файлов ↓ V3 ↓ 8 тестов ↓ 24 теста ↓ «Итеративное улучшение Knowledge Base + систематическое тестирование» Крупная финальная мысль: «Главное — не просто дать AI код проекта. Главное — дать ему правильный контекст и проверить результат.» ================================================== ДОПОЛНИТЕЛЬНЫЕ ТРЕБОВАНИЯ К ДИЗАЙНУ ================================================== 1. Используй крупные цифры: 3004 20 155 8 24 2. Для числовых данных обязательно используй графики/диаграммы, а не только текст. 3. Не придумывай: - проценты улучшения; - accuracy; - оценки качества; - количество успешных тестов; - score; - latency; - другие метрики. 4. Если результат конкретного теста не указан, просто показывай факт проведения теста. 5. Скриншоты можно обрезать: оставлять только важные части интерфейса. 6. Мемы использовать как визуальные акценты: - Distracted Boyfriend — 3004 → 20; - This is Fine — проблема огромной базы; - мем с котами — финальный результат. 7. Все надписи на мемах сделать на русском. 8. Не растягивать мемы и скриншоты так, чтобы они выглядели искажёнными. 9. Не делать каждый слайд одинаковым: чередовать: - диаграммы; - схемы; - скриншоты; - мемы; - крупные цифры; - карточки. 10. Презентация должна визуально рассказывать историю: ПРОБЛЕМА ↓ 3004 ФАЙЛА ↓ V1 ↓ 8 ТЕСТОВ ↓ 20 ФАЙЛОВ ↓ V2 ↓ 8 ТЕСТОВ ↓ 155 ФАЙЛОВ ↓ V3 ↓ 8 ТЕСТОВ ↓ 24 ТЕСТА ↓ СИСТЕМНЫЙ ПОДХОД К ПРОВЕРКЕ AI Главный акцент презентации: я не просто «подключила AI к проекту», а построила контекст для AI, сделала несколько итераций Knowledge Base и системно протестировала каждую версию.
Presentation overview
This community presentation was shared by rassoshenko.kristina@yandex.ru as a complete 23-slide example. Создай НОВУЮ презентацию с нуля. Тема презентации: «Как я создала и протестировала AI Code Assistant для frontend-проекта» Цель презентации: Показать не просто результат, а весь… The preview lets you review the full sequence in order, rather than judging the design from a single cover image.
Use it as a reference for planning your own deck: notice how the amount of information changes from slide to slide, where visual emphasis appears, and how repeated design choices help the presentation feel connected. Community examples are inspiration, not locked templates, so you can keep the ideas that fit your audience and replace anything that does not.
Learn from the example
Look at the job each slide performs. Identify where the deck introduces its subject, develops the main points, adds evidence or examples, and moves toward a conclusion.
Notice which element attracts attention first and how headings, supporting text, images, and data are separated. Strong hierarchy makes the intended reading order obvious.
Compare spacing, typography, color, and repeated components across the slides. Consistent rules help varied content feel like one presentation instead of unrelated screens.
Make it your own
Begin with your audience and the decision, lesson, or action the presentation should support. Replace the topic, examples, evidence, and visuals with material you can verify, then edit every slide for one clear takeaway. You can borrow the visual direction without copying the creator's wording or message. Presenton will use this community deck as a design reference while you develop content for your own purpose.
