Я Сделал Настоящую Социальную Сеть Благодаря Claude Opus 4.6 И Выложил её в Опенсорс (реально)

Автор стал новым Павлом Дуровым.
Автор стал новым Павлом Дуровым.

С выхода Claude Opus 4.6 прошло уже время, но я НЕ МОГ не поделиться своим опытом с этой моделью.

Я поставил себе ВЫСОКУЮ задачу: сделать с помощью нового Опуса настоящую социальную сеть. Но перед этим давайте посмотрим на классические простые задачи.

Примечание: статья выполнена в экспериментальных и образовательных целях.

Клоны популярных сервисов

Я решил протестировать Opus 4.6 на создании веб-клонов известных платформ. Модель должна была придумать уникальное название для каждого.

Важно: у макетов НЕТ базы данных, они почти НИЧЕГО не умеют. Работают только по скрипту. Мы оцениваем ТОЛЬКО визуал, дизайн и интерфейс.

Клон YouTube

Макет-клон, повторяющий интерфейс YouTube.
Макет-клон, повторяющий интерфейс YouTube.

Окей, это выглядит НЕПЛОХО. Никаких косяков. Всё максимально классически, как у оригинального YouTube. Опус назвал клон "VidFlow" - если честно, звучит хорошо и запоминающееся.

Сами превью ХОТЯ БЫ имеют разные рисунки. Раньше модели делали на всех превью просто разные цвета. А тут Опус постарался и сделал у всех превью разнообразные картинки.

Макет-клон, повторяющий интерфейс YouTube.
Макет-клон, повторяющий интерфейс YouTube.

Я, честно говоря, В ШОКЕ. Тут МАКСИМАЛЬНО точь-в-точь похоже на классический YouTube (не учитывая последние апдейты). Тут больше не к чему придраться.

Клон Telegram

В последнее время мы все слышали про блокировки Telegram в России. Поэтому создаём свой аналог!

Макет-клон, повторяющий интерфейс Telegram.
Макет-клон, повторяющий интерфейс Telegram.

Ну... не знаю. В каких-то местах не сильно похоже на Telegram. Но общее очертание понятно и видно. Даже есть снизу избранные, группы и, видимо, каналы.

Макет-клон, повторяющий интерфейс Telegram.
Макет-клон, повторяющий интерфейс Telegram.

Это выглядит ПРИКОЛЬНО. Опус попытался воссоздать задний фон, как в оригинале. Он немного раздражает в каких-то моментах. Но самое главное - Опус это не забыл и добавил, это плюс.

Также там есть взаимодействия с сообщениями. Можете сами глянуть в ZIP-файле в моём TГК.

Клон Spotify

Макет-клон, повторяющий интерфейс Spotify.
Макет-клон, повторяющий интерфейс Spotify.

Это выглядит ПОЧТИ ТОЧЬ-В-ТОЧЬ как в оригинальном Spotify, по моему мнению. Прям неплохо. Всё есть, всё стоит как надо. Название "SoundWave" - на русском "звуковая волна". Название мне нравится, хорошо как и с VidFlow.

Макет-клон, повторяющий интерфейс Spotify.
Макет-клон, повторяющий интерфейс Spotify.

В принципе, да, тоже хорошо. Тут не к чему придраться. Очевидно, настоящей музыки нет - это макет. Было бы прикольно, если обложки были бы разнообразными, а не просто разные цвета. А так я считаю это высший уровень вместе с YouTube.

Загадка — угадайте клон

Теперь угадайте, что за клон я сделал, думаю, некоторым это будет сложно.

Макет-клон, повторяющий интерфейс музыкального сервиса.
Макет-клон, повторяющий интерфейс музыкального сервиса.

Подсказка: это клон российского сервиса.

SVG-арты

А теперь приступаем к SVG-артам, сделанным с помощью Opus 4.6. И, если честно, я в полном афиге... Это СЛИШКОМ ХОРОШО.

SVG-арт пляжа

Детализированный SVG-арт пляжа.
Детализированный SVG-арт пляжа.

Это просто БЕЗУМИЕ. Это так детализировано!

Окей, я реально в шоке. По порядку что мы видим: звёзды, птицы вдалеке, облака и два корабля плывут. И самое БЕЗУМНОЕ - это отражающий свет солнца на воде.

Плюс маленькие объекты ТАК ДЕТАЛИЗИРОВАНЫ. Тут везде много деталей! Это просто огонь, потрясающе.

SVG-арт Московского Кремля

Детализированный и красивый SVG-арт пляжа.
Детализированный и красивый SVG-арт пляжа.

ВАУ! Просто потрясающе. Московский Кремль ночью. На заднем фоне видна тень города. Рядом стоят деревья. Есть отражения на воде.

На Московском Кремле мы видим детализированные часы, красные звёзды, окна на башнях. И также внутри детализированные постройки. В принципе, это очень хорошо.

SVG-арт мегаполиса

Детализированный SVG-арт мегаполиса.
Детализированный SVG-арт мегаполиса.

Это просто КАПЕЦ как детализированно. Это так хорошо выглядит!

Каждый дом имеет свой размер. Звёзды на фоне, что-то падает вдали. И, кстати, там ПО ДОРОГЕ ЕЗДЯТ МАШИНЫ! У них есть анимация!

А если точнее - Opus 4.6 не делал окно каждому вручную, а рассчитал и сделал скрипт, который сам расставит где нужно. Вот такие вот дела.

САМОЕ ИНТЕРЕСНОЕ - настоящая социальная сеть

И теперь САМОЕ ЛУЧШЕЕ, к чему вы вероятно пришли - сама соцсеть.

Я ещё давно хотел сделать реальную соцсеть с помощью ИИ. Но что-то руки не доходили. И с выходом Claude Opus 4.6 я подумал, что это ОТЛИЧНЫЙ ШАНС для тестирования.

И результаты, честно говоря, меня УДИВИЛИ. Потому что это очень хорошо, и я не устану это повторять.

Концепция и название

Я приступил к идеям, как назвать соцсеть и какой будет фирменный цвет. Когда я подбирал названия, в голове щёлкнуло - "Kivo". Оно мне сразу понравилось.

Также у меня моментально с этим названием начал ассоциироваться яркий зелёный приятный переливающийся градиент. И это просто ВЕЛИКОЛЕПНО. Потому что соцсетей с таким фирменным цветом очень мало. Я лично не встречал такую соцсеть.

Лого социальной сети под названием Kivo.
Лого социальной сети под названием 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-канале. Также там выходят новости о ИИ и дальнейшие мои проекты.

В данной статье могут быть неточности, перепроверяйте информацию. Всё использовалось в личных тестах без третьих лиц, не рекомендуется использовать в коммерческих целях.

1
2 комментария