Я Сделал Настоящую Социальную Сеть Благодаря Claude Opus 4.6 И Выложил её в Опенсорс (реально)
С выхода Claude Opus 4.6 прошло уже время, но я НЕ МОГ не поделиться своим опытом с этой моделью.
Я поставил себе ВЫСОКУЮ задачу: сделать с помощью нового Опуса настоящую социальную сеть. Но перед этим давайте посмотрим на классические простые задачи.
Примечание: статья выполнена в экспериментальных и образовательных целях.
Клоны популярных сервисов
Я решил протестировать Opus 4.6 на создании веб-клонов известных платформ. Модель должна была придумать уникальное название для каждого.
Важно: у макетов НЕТ базы данных, они почти НИЧЕГО не умеют. Работают только по скрипту. Мы оцениваем ТОЛЬКО визуал, дизайн и интерфейс.
Клон YouTube
Окей, это выглядит НЕПЛОХО. Никаких косяков. Всё максимально классически, как у оригинального YouTube. Опус назвал клон "VidFlow" - если честно, звучит хорошо и запоминающееся.
Сами превью ХОТЯ БЫ имеют разные рисунки. Раньше модели делали на всех превью просто разные цвета. А тут Опус постарался и сделал у всех превью разнообразные картинки.
Я, честно говоря, В ШОКЕ. Тут МАКСИМАЛЬНО точь-в-точь похоже на классический YouTube (не учитывая последние апдейты). Тут больше не к чему придраться.
Клон Telegram
В последнее время мы все слышали про блокировки Telegram в России. Поэтому создаём свой аналог!
Ну... не знаю. В каких-то местах не сильно похоже на Telegram. Но общее очертание понятно и видно. Даже есть снизу избранные, группы и, видимо, каналы.
Это выглядит ПРИКОЛЬНО. Опус попытался воссоздать задний фон, как в оригинале. Он немного раздражает в каких-то моментах. Но самое главное - Опус это не забыл и добавил, это плюс.
Также там есть взаимодействия с сообщениями. Можете сами глянуть в ZIP-файле в моём TГК.
Клон Spotify
Это выглядит ПОЧТИ ТОЧЬ-В-ТОЧЬ как в оригинальном Spotify, по моему мнению. Прям неплохо. Всё есть, всё стоит как надо. Название "SoundWave" - на русском "звуковая волна". Название мне нравится, хорошо как и с VidFlow.
В принципе, да, тоже хорошо. Тут не к чему придраться. Очевидно, настоящей музыки нет - это макет. Было бы прикольно, если обложки были бы разнообразными, а не просто разные цвета. А так я считаю это высший уровень вместе с YouTube.
Загадка — угадайте клон
Теперь угадайте, что за клон я сделал, думаю, некоторым это будет сложно.
Подсказка: это клон российского сервиса.
SVG-арты
А теперь приступаем к SVG-артам, сделанным с помощью Opus 4.6. И, если честно, я в полном афиге... Это СЛИШКОМ ХОРОШО.
SVG-арт пляжа
Это просто БЕЗУМИЕ. Это так детализировано!
Окей, я реально в шоке. По порядку что мы видим: звёзды, птицы вдалеке, облака и два корабля плывут. И самое БЕЗУМНОЕ - это отражающий свет солнца на воде.
Плюс маленькие объекты ТАК ДЕТАЛИЗИРОВАНЫ. Тут везде много деталей! Это просто огонь, потрясающе.
SVG-арт Московского Кремля
ВАУ! Просто потрясающе. Московский Кремль ночью. На заднем фоне видна тень города. Рядом стоят деревья. Есть отражения на воде.
На Московском Кремле мы видим детализированные часы, красные звёзды, окна на башнях. И также внутри детализированные постройки. В принципе, это очень хорошо.
SVG-арт мегаполиса
Это просто КАПЕЦ как детализированно. Это так хорошо выглядит!
Каждый дом имеет свой размер. Звёзды на фоне, что-то падает вдали. И, кстати, там ПО ДОРОГЕ ЕЗДЯТ МАШИНЫ! У них есть анимация!
А если точнее - Opus 4.6 не делал окно каждому вручную, а рассчитал и сделал скрипт, который сам расставит где нужно. Вот такие вот дела.
САМОЕ ИНТЕРЕСНОЕ - настоящая социальная сеть
И теперь САМОЕ ЛУЧШЕЕ, к чему вы вероятно пришли - сама соцсеть.
Я ещё давно хотел сделать реальную соцсеть с помощью ИИ. Но что-то руки не доходили. И с выходом Claude Opus 4.6 я подумал, что это ОТЛИЧНЫЙ ШАНС для тестирования.
И результаты, честно говоря, меня УДИВИЛИ. Потому что это очень хорошо, и я не устану это повторять.
Концепция и название
Я приступил к идеям, как назвать соцсеть и какой будет фирменный цвет. Когда я подбирал названия, в голове щёлкнуло - "Kivo". Оно мне сразу понравилось.
Также у меня моментально с этим названием начал ассоциироваться яркий зелёный приятный переливающийся градиент. И это просто ВЕЛИКОЛЕПНО. Потому что соцсетей с таким фирменным цветом очень мало. Я лично не встречал такую соцсеть.
Вот какое лого я сделал. Угадайте кто сделал? Правильно, тоже ИИ! А точнее GPT Image (Nano Banana Pro сгенерировала какую-то чепуху).
Как мы видим, стилизованная "K" с острыми формами. И сам текст "Kivo" с переливающимися зелёными градиентами.
Процесс разработки
Первым делом я Опусу 4.6 дал специальный промпт, указав все мои требования. А потом уже дал реальную задачу - сделать соцсеть.
Конечно, я не просил сделать всё сразу за один запрос. А потихоньку делали шаг за шагом. Добавляли, убирали, изменяли и многое другое.
Я не буду показывать весь процесс разработки изображениями, потому что статья растянется СЛИШКОМ сильно.
Технологии:
- Supabase + Vercel (ТОЛЬКО для личных тестов)
- Next.js 14
- React
- TypeScript
- Tailwind CSS
Никакие другие пользователи там не регистрировались.
Экскурсия по Kivo
Сейчас я вам ВСЁ покажу, что мы сделали вместе с Claude Opus 4.6. Если честно, я В ШОКЕ от результата.
Вход и регистрация
Нас сразу встречает страничка с текстом "С возвращением". Нужно ввести реальную почту и пароль. Только есть проблема - лого не прогрузилось, не знаю в чём дело, но ладно. Для входа придёт письмо с кодом.
Если нет аккаунта - можно зарегистрироваться. Для этого нужно ввести имя, юзернейм, электронную почту и пароль.
Площадь - публичная лента
При регистрации и входе нас встречает Площадь. Это публичная лента, где находятся все посты. В том числе и из Комнат (далее узнаете).
К сожалению:
- Комментарии писать пока НЕЛЬЗЯ - такой функции не реализовано
- Репосты работают, но они нигде не отображаются
НО ЗАТО работают лайки! Также можно удалять свои посты, но редактировать или прикреплять изображения нельзя. Да, это ограниченный функционал, но это сделано ЗА ДЕНЬ. Поэтому таков и функционал.
Профиль пользователя
Если нажать на аватарку любого пользователя - увидим все его посты, в том числе и из комнат (но не будет сказано из какой).
Мы видим:
- Число подписчиков и подписок (но кто именно - посмотреть нельзя)
- Когда зарегистрировался этот пользователь
- Аватарку и шапку профиля
- Кнопку подписки
Теперь переходим к САМОМУ ИНТЕРЕСНОМУ. Вы, вероятно, уже увидели на картинке яркую кнопку "близкий друг". И с этим связана вторая лента под названием "Круг".
Круг - приватная лента
Это приватная лента, где ты видишь ТОЛЬКО ПОСТЫ своих друзей. И самое главное - эта лента будет доступна с пользователем, с которым вы ВЗАИМНО нажали на кнопку добавки в друзья.
По сути это почти приватная лента только с вашими знакомыми. Я считаю, это удобно. Вы можете свайпом сразу наблюдать одновременно за публичными постами и за постами своих друзей.
Комнаты - как Reddit
Вы, вероятно, уже заметили, что у каких-то постов есть странные заголовки. Это посты из Комнат, которые попадают на Площадь.
В принципе, это то же самое, что с Reddit. Можно создавать:
- Публичные комнаты - посты попадают на Площадь
- Приватные комнаты - посты НЕ попадают на Площадь
Понять можно по иконке: если видите замок - это приватная комната.
Три вида взаимодействий
В принципе, тут целых ТРИ ВИДА социальных взаимодействий:
- Площадь - публичная лента
- Круг - приватная лента только со своими близкими друзьями
- Комнаты - публичные и приватные комнаты, где можно обсуждать что угодно
Можно создать любую комнату по темам в рамках правил и обсуждать там свои темы, ничего не нарушая.
Демонстрация в действии
Для тех, кто хочет посмотреть, как это работает вживую:
Также вот как выглядит сам интерфейс на мобильных устройствах:
Важное примечание
Вся эта социальная сеть создана исключительно в образовательных и демонстрационных целях. Она иллюстрирует возможности разработки с помощью искусственного интеллекта и НЕ предназначена для коммерческой эксплуатации в текущем виде.
Моё мнение
Это просто ПОТРЯСАЮЩЕ.
Для кого как, но мне социальная сеть СИЛЬНО понравилась. Есть над чем поработать, и этого много. Но самое главное - мы с Claude Opus 4.6 постарались сделать максимально безопасно, без багов и так далее.
Есть много фишек, которые недоработанные. Но если эта статья наберёт большие охваты, то возможно я сделаю БОЛЬШОЕ ОБНОВЛЕНИЕ с новой статьёй про нашу социальную сеть.
А так по сравнению с Claude Opus 4.5 результат просто ГИГАНТСКИЙ, по моему мнению. А SVG-арты - это просто ОТПАД.
Также если вы найдёте какие-нибудь баги или недочёты - постараюсь их в дальнейшем исправить.
Опенсорс
И, конечно же, я весь исходный сгенерированный код, в том числе и логотип, выложил на GitHub в опенсорс под лицензией MIT.
Вы можете делать с социальной сетью что угодно в рамках законодательства РФ. Используйте только в личных целях, без нарушения законов России.
Весь код клон-макетов и вся дальнейшая информация о моей социальной сети будет в моём Telegram-канале. Также там выходят новости о ИИ и дальнейшие мои проекты.
В данной статье могут быть неточности, перепроверяйте информацию. Всё использовалось в личных тестах без третьих лиц, не рекомендуется использовать в коммерческих целях.