Как я создал AI-редактор концепций за 4 часа с помощью Enter

Дизайнер без опыта работы с бэкендом использовал Enter.pro для создания Essence — приложения-холста с поддержкой ИИ, которое разбивает любую концепцию на базовые элементы. От идеи до полноценного рабочего продукта с интеграцией ИИ, двуязычной поддержкой и элементами геймификации — всего за 4 часа.

Искра

Как дизайнер, я всегда задавался вопросом: откуда берется креативность?

Чем больше я изучал методы дизайна, тем чаще видел одну и ту же закономерность: креативность часто начинается с деконструкции и** рекомбинации**. Разбери что-то на составные части, а затем пересобери по-новому.

Эта идея привела к созданию Essence — холста для исследования концепций на базе ИИ. Введите любую идею, и ИИ разберет её на основные элементы. Затем, при их рекомбинации, начинают возникать новые идеи.

Почему Enter

Я продуктовый дизайнер, а не фулстек-разработчик. Идея Essence требовала вещей, которые казались пугающими:

• Интерактивный холст с поддержкой drag-and-drop, зума и панорамирования — сложный интерфейс, который можно увидеть в таких инструментах, как Figma или Miro

• Интеграция ИИ для управления логикой декомпозиции и рекомбинации концепций

• Serverless-бэкенд для безопасной обработки API-запросов к ИИ

• Развертывание (Deployment) — чтобы люди могли пользоваться продуктом

Подключение к API LLM раньше останавливало большинство не-разработчиков: API-ключи, настройка окружения, логика аутентификации.

С помощью ИИ-инструментов Enter я просто сказал: «Используй Claude Sonnet 4.5», и он сам всё настроил: Edge Functions на бэкенде, форматирование запросов, обработку ошибок.

С Enter.pro я вообще не касаюсь инфраструктуры. Я описываю, что хочу, а он сам управляет React, Supabase, Edge Functions и интеграцией моделей. Я фокусируюсь только на том, что делать и зачем.

Сборка: 5 этапов за 4 часа

Этап 1: Основа

Я систематизировал идею в голове, составил один полный промпт и отправил его в Enter. Вот суть:

Создай приложение-холст с ИИ под названием «Essence». Это легкая игра для размышления. Основная механика: пользователи вводят любое слово, ИИ декомпозирует его ровно на 2 атомарные концепции, отображаемые на холсте в виде эмодзи + короткого слова. Правила декомпозиции: всегда возвращать ровно 2 узла, каждый содержит 1 эмодзи + 1 короткое слово. Концепции должны становиться более фундаментальными с каждым уровнем — расщепляясь на такие измерения, как эмоция, мотив, энергия, структура, связь, сила, ценность, желание, конфликт. Пользователи также могут выбрать любые 2 узла для рекомбинации в 1 новый. Холст поддерживает бесконечное перетаскивание, зум, двойной клик для декомпозиции, выбор нескольких элементов для рекомбинации. Каждая декомпозиция стоит 1 очко, каждая рекомбинация — 2 очка.

После прочтения промпта первое, что сделал Enter — загрузил свои ИИ-возможности, а затем спросил меня напрямую: «Какую модель ИИ вы хотите использовать для декомпозиции и рекомпозиции концепций?» Он перечислил доступные варианты — GPT-5.2 Pro, Gemini 3 Pro и Claude Sonnet 4.5 — каждый с описанием стоимости, скорости и сильных сторон. Я выбрал Claude Sonnet 4.5 (отлично подходит для следования инструкциям и творческих задач), и Enter автоматически настроил всё API-соединение.

Спустя минуты структура проекта была готова — React 18 с TypeScript, Vite в качестве сборщика, Tailwind CSS для стилей, @xyflow/react для холста и Supabase Edge Function, подключенная к API Claude. Основная логика декомпозиции и рекомбинации заработала с первой попытки.

Этап 2: Настройка логики ИИ

Это была самая критическая и интересная часть всего проекта. Будет ли Essence казаться увлекательным или скучным — зависит исключительно от качества вывода ИИ. Итоговый код разделяет логику ИИ на три независимые функции, каждая с тщательно проработанными стратегиями промптов.

Проблема: ИИ был слишком «академичным»

После запуска первой версии результаты ИИ были невольно комичными: на ввод «ножницы» он выдал «щипцеобразные конечности» и «симметричная эволюция»; на ввод «любовь» — «нейромедиаторы» и «квантовые состояния». Технически не неправильно, но совсем не весело и не интуитивно. Это был не тот опыт, которого я хотел.

Исправление №1: Дать ИИ роль (персону)

Ключевым прорывом стало назначение четкой системной роли для ИИ — не «ты помощник по декомпозиции», а «Ты веселая игра по декомпозиции. Превращай сложные вещи в простые строительные блоки! Используй повседневные слова». Одно это предложение полностью преобразило стиль вывода из академического доклада в игривую беседу.

Исправление №2: Примеры «за» и «против»

Я обнаружил, что одних положительных примеров недостаточно — ИИ иногда все равно срывался в академический режим. Поэтому я включил и хорошие, и плохие примеры одновременно:

**Хорошие примеры:**Ножницы → 🔪 Лезвие + 🔗 Шарнир (два лезвия, соединенные шарниром) Кофе → ☕ Горячая вода + 🫘 Зерна (горячая вода + кофейные зерна) Друг → 👤 Человек + 🤝 Доверие (люди, которые доверяют друг другу) Сон → 😴 Отдых + 💭 Воображение (воображение во время сна)Плохие примеры (слишком академично):❌ Щипцеобразные конечности, Симметричная эволюция, Нейромедиаторы, Квантовые состояния

Этот «контраст позитива и негатива» дал ИИ очень точное понимание того, какой тон мне нужен: простой, интуитивный, вызывающий улыбку или момент озарения .

Исправление №3: Три функции, три стратегии

Финальная логика ИИ была разделена на три независимые функции, каждая со своим промптом и параметрами:

① Генерация эмодзи (generateEmojiForConcept): Когда пользователь вводит концепцию, отдельный вызов ИИ сначала генерирует подходящий по смыслу эмодзи. Системная роль: «Ты генератор эмодзи. Выводи только JSON», температура 0.7 (точность важнее креативности). Если парсинг не удается, система изящно возвращает дефолтный эмодзи ✨.

② Декомпозиция концепции (decomposeConcept): Основная функция. Промпт направляет ИИ «разбирать вещи как строительные блоки», возвращая ровно 2 узла + одно предложение с объяснением. Температура 0.8. Решающее дизайнерское решение: каждый запрос включает случайное число (randomSeed), гарантируя, что одна и та же концепция каждый раз дает разные результаты — это обеспечивает «реиграбельность».

③ Рекомбинация концепций (recombineConcepts): Самая творческая часть. Промпт формулирует задачу как «мысли как в игре», с творческими примерами: Вода + Огонь = Пар ♨️, Мука + Огонь = Хлеб 🍞, Человек + Крылья = Ангел 👼. Результаты должны быть «удивительными, проницательными, слегка юмористическими». Та же техника случайного зерна для разнообразия.

Исправление №4: Пояснения при наведении делают логику видимой

Каждая декомпозиция или рекомпозиция возвращает краткое пояснение. Этот текст не отображается напрямую на узле (сохраняя интерфейс минималистичным), но хранится в данных узла. При наведении на узел появляется изящная карточка с цепочкой рассуждений ИИ:

• Декомпозированные узлы (изумрудные метки): 🎭 Драма = 😢 Конфликт + 👥 Персонажи, с пояснением внизу

• Комбинированные узлы (фиолетовые метки): 😴 Сон + 💭 Воображение = 💫 Сновидение, с пояснением внизу

Такой дизайн делает слои информации элегантными — на поверхности минималистичные карточки, при глубоком рассмотрении — процесс мышления ИИ.

Результат

После всех этих настроек качество вывода ИИ кардинально улучшилось:

❤️ Любовь → 👤 Человек + 🤝 Доверие ☕ Кофе → 🫘 Зерна + ☕ Горячая вода 💭 Сновидение → 🔮 Воображение + 🔥 Желание 🔥 Огонь + 💧 Вода = ♨️ Пар 😴 Сон + 💭 Воображение = 💫 Сновидение

Каждая декомпозиция вызывает момент озарения, каждая рекомбинация — улыбку. В этом сила промпт-инжиниринга: дело не в написании большего количества кода, а в нахождении правильного способа общения с ИИ.

Этап 3: Полировка взаимодействий

Именно здесь приложение начало казаться живым:

• Выбор 1 узла → появляется кнопка «Декомпозировать» — разбить его дальше

• Shift + клик по 2 узлам → появляется кнопка «Рекомбинировать» — соединить их вместе

• Двойной клик по любому узлу → мгновенная декомпозиция — быстрое исследование

• Наведение на обработанный узел → просмотр логики ИИ во всплывающей карточке

Я также добавил легкий слой геймификации: вы начинаете с 20 очков (декомпозиция стоит 1, рекомбинация — 2), создавая мягкие ограничения, которые заставляют задуматься, какие пути исследовать. Очки сохраняются локально.

Этап 4: Полировка UI

Когда функциональность заработала, фокус сместился на то, чтобы Essence выглядел так же хорошо, как ощущался.

Первым важным решением была типографика. Я выбрал Bricolage Grotesque в качестве глобального шрифта — современный геометрический гротеск, который мгновенно вывел приложение из разряда системных шрифтов и придал ему индивидуальность.

Дизайн карточек прошел через несколько итераций. Итоговый вариант: большие скругленные прямоугольники (rounded-2xl) с мягкими пастельными фонами (случайный выбор между amber-50, emerald-50 и violet-50), эмодзи как визуальный якорь и короткая надпись внизу. Холст стал похож на россыпь цветных стикеров: легко, игриво, не загроможденно.

Поле ввода — «первое впечатление» от приложения. Здесь блеснула функция Enter Components — встроенная библиотека ИИ-компонентов. Я ввел «ai» в поиск и обнаружил компонент claude-style-chat-input — элегантный ввод чата. Кликнул «+ Add to Chat», и Enter автоматически интегрировал его, адаптировав стили. Обычный HTML-инпут мгновенно превратился в отполированный компонент, идеально сочетающийся с визуальным языком приложения.

Не нужно писать компоненты с нуля или возиться с CSS. Enter Components позволяет собирать качественный UI, а Enter автоматически настраивает стили для сохранения визуальной целостности.

Наконец, я добавил быстрые карточки концепций — ❤️ Любовь, 💰 Деньги, ⏰ Время, 🌳 Дерево, 💭 Сновидение — отображаемые как наклонные мини-карточки на экране приветствия, чтобы пользователи сразу понимали, что можно вводить.

Этап 5: Интернационализация

Essence создается для глобальной аудитории, поэтому двуязычная поддержка (китайский/английский) была необходима.

Интернационализация — это не только перевод текста UI. ИИ должен отвечать на языке пользователя. Это значит, что переключатель языка должен передаваться в слой промптов.

Для реализации я использовал Zustand. Вся система работает так: пользователь кликает переключатель → состояние обновляется → весь UI переключается мгновенно → вызовы ИИ получают параметр языка → промпты выбирают китайскую или английскую версию. Настройки сохраняются в localStorage.

Для Enter все это потребовало лишь одного описания: «Добавь переключатель языков в правом верхнем углу. Весь текст UI, промпты и вывод ИИ должны автоматически меняться». Enter создал весь пайплайн за один раз.

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

---

Что делает Essence особенным

Декомпозиция: увидеть невидимую структуру всего

Введите любое слово. ИИ разбивает его ровно на 2 атомарные концепции с эмодзи и пояснением. Продолжайте дальше. Разбирайте их тоже. Наблюдайте, как растет дерево концепций.

🎭 Драма → 😢 Конфликт + 👥 Персонажи 😢 Конфликт → ⚡ Напряжение + 🎯 Цели 👥 Персонажи → 👤 Человек + 💬 История

Рекомбинация: создавать новое из атомов старого

Выберите любые 2 узла на холсте, даже из разных веток, и объедините их. ИИ найдет удивительную связь.

🔥 Огонь + 💧 Вода = ♨️ Пар 😴 Сон + 💭 Воображение = 💫 Сновидение 👤 Человек + ✈️ Крылья = 👼 Ангел

Играй, а не просто думай

Система из 20 очков превращает абстрактное исследование в игру. Каждый клик — это выбор. Какой путь исследовать? Какие атомы соединить? Это песочница для любопытства.

Технологический стек — собрано с помощью Enter

Я не настраивал ничего вручную. Enter.pro собрал весь стек на основе моих описаний.

Извлеченные уроки

1. Двухуровневый промптинг, два мышления

Создание ИИ-приложений с Enter — это два одновременных разговора: общение с Enter как с фулстек-инженером (четкие требования) и общение с Claude в приложении как с творческим партнером (эмоциональное руководство). Успех в обоих слоях — настоящее искусство.

2. Дайте ИИ личность, а не просто правила

Смена роли с «ты помощник» на «ты веселая игра» полностью преобразила вывод. Правила ограничивают формат, личность определяет качество.

3. Примеры «за» и «против» лучше длинных описаний

✅ Ножницы → Лезвие + Шарнир ❌ Щипцеобразные конечности, Симметричная эволюция, Нейромедиаторы

Эти три строки передают больше, чем 100 слов. Контраст позитива и негатива — самая недооцененная техника промпт-инжиниринга.

4. Случайные числа дают продуктам реиграбельность

Одна и та же концепция каждый раз дает разные результаты — сегодня «Любовь = Человек + Доверие», завтра «Любовь = Уязвимость + Смелость». Случайные числа + температура 0.8 максимизируют разнообразие при сохранении качества.

5. Ограничения создают игру

Система из 20 очков превратила беспорядочные клики в стратегическое исследование. Принцип геймдизайна: значимый выбор требует ограниченных ресурсов.

6. Vibe Coding: фокусируйтесь на одном этапе

Сначала основа → потом личность ИИ → потом полировка взаимодействий → потом дизайн → потом i18n. Каждый этап фокусируется на одном измерении, сохраняя диалог с Enter четким, а результат предсказуемым.

🔗 Создайте свое с помощью Enter: enter.converge.ai