Веб-дизайн *

На сайте «I'm absolutely right!» разработчик выкладывает, сколько раз чат‑бот Claude Code сказал эту фразу каждый день.

Может ли кто-нибудь создать Википедию Вселенной, других цивилизаций?

По стилю - современная Википедия (или похоже), но разных миров и как будто с информацией из условного 100к-ого года нашей эры, где человечество выжило и знает намного больше о Вселенной. Например, чтобы Проксима b была с картой, историей и т.д.

Да, есть много фантастики, но целая фантастическая Википедия - этого у нас пока нет. Есть множество Вики по различным сюжетам, но это не то же самое. В "Википедии Вселенной" может быть надпись, которую видят все новые пользователи: "Что, если бы мы знали намного больше о Вселенной? Если бы у нас были Википедии других цивилизаций? Этот проект - фантазия людей и ИИ на тему", а дальше или случайная генерация одной из "Википедий будущего", или несколько на выбор, или одна.

Genspark запустил AI Designer для автоматической генерации брендинга

Компания Genspark представила AI Designer — инструмент, который создает полную систему брендинга от логотипа до веб-сайта по одному текстовому запросу. Новинка интегрирована в экосистему Genspark Super Agent и доступна бесплатно через веб-интерфейс.

Архитектура и возможности

AI Designer работает через агентскую архитектуру Genspark, планируя задачи и распределяя их между специализированными модулями. Система создает согласованные дизайн-активы без необходимости ручной координации между различными инструментами.

Генерируемые материалы включают:

• Логотипы и цветовые палитры

• Дизайн интерьеров и упаковки

• Веб-сайты и лендинги

• Рекламные макеты

• Контент для социальных сетей

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

Техническая реализация

Платформа Genspark использует девять специализированных больших языковых моделей и более 80 интегрированных инструментов, динамически распределяя задачи между ними. AI Designer расширяет этот подход на область визуального дизайна и брендинга.

Особенность системы — шаблоны, которые отличаются от стандартных решений типа Canva образца 2010-х годов. Алгоритм адаптирует дизайн под конкретную задачу, а не использует готовые шаблоны.

Практическое применение

Ранние тесты сообщества показали способность инструмента создавать полные бренды за несколько минут, включая фирменный стиль, упаковку, меню и веб-макеты. Это делает решение полезным для стартапов и малого бизнеса, которым нужен быстрый результат без привлечения дизайн-команды.

Целевая аудитория:

• Основатели стартапов

• Маркетологи

• Малый и средний бизнес

• Команды, требующие быстрого создания брендинга

Контекст и конкуренция

Genspark позиционируется как поисковая система нового поколения с ИИ-агентами, которые глубоко понимают намерения пользователя и выполняют задачи от планирования до создания мультимедиа. AI Designer — логичное развитие этой концепции в сторону автоматизации креативных процессов.

Решение конкурирует с такими сервисами как Midjourney для генерации изображений и Canva для дизайна, но предлагает комплексный подход к созданию брендинга.

Доступность

Инструмент запущен в веб-приложении Genspark с функцией мгновенного доступа. Сохраняется бесплатная модель использования, что выделяет сервис на фоне конкурентов с платной подпиской.

Репозиторий react-bits содержит тысячи анимированных компонентов на React для создания веб-проектов и интерфейсов, а также большое количество элементов — кнопки, карточки, меню, необычные курсоры, анимированные списки и декоративные фишки. Каждый из компонентов можно протестировать в браузере — проверить работу и то, как он будет смотреться в вебе. Элементы интегрируются в проект за один клик.

Представлена библиотека красочных анимаций на чистом JS для разных проектов All-in-one animation engine. Все анимации интегрируются за один клик и разобраны по типам: скроллбары, загрузчики, меню, переходы, счётчики или просто стилизованные элементы.

Как сделать так, чтобы дизайнер и фронтендер не ругались

Противостояние дизайнеров и разработчиков носит уже почти легендарный характер. Этой теме посвящены десятки статей, видосов и докладов. Однако мы в компании уверены: чтобы лучше понимать друг друга, нужно просто следовать элементарным правилам.

1. Больше общаться.

Будет круто проводить кросс-функциональные встречи, потому что единое информационное поле — всегда хорошо. Можно даже назначить «дежурных» по взаимодействию — это ответственные люди от разработки и от дизайна, которые будут время от времени срезаться и обсуждать наболевшие вопросы.

Кроме того, если подключать фронтендера на этапе разработки прототипа, он сразу сможет подсказать, что будет сделать легко, а что сложно.

2. Следить за актуальностью UI-кита.

Это база. Чтобы всем было удобно работать, в макете должен быть UI-кит. Разработчик сразу будет видеть, какие шрифты и UI-элементы возникнут в проекте. И конечно, UI-кит важно оперативно обновлять и сообщать об этом отделу фронтенда.

3. Внедрять общий процесс на всех уровнях.

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

Общее же правило, как и в любой коммуникации — быть готовыми к компромиссам и доверять друг другу. Подробнее о правилах коммуникации между отделами дизайна и фронтенда мы рассказали в нашем блоге.

Иконка WhatsApp* на сайте: почему цвет фона лучше не менять? 

Я сознательно убрал логотип WhatsApp* с сайта своей адвокатской практики. Это было единственное изменение в предложенном макете дизайна. 

Иконка WhatsApp* располагалась почти на всех страницах сайта: "Главная", "Контакты", "Адвокат" и так далее. Потенциальный клиент мог кликнуть по иконке и создать чат со мной. 

Но был нюанс - мой веб-дизайнер представил иконку WhatsApp*, заменив на ней фон. 

Изобразительный товарный знак WhatsApp* известен цветовым сочетанием белого, серого и зеленого. На моем же сайте использованы другие основные цвета: синий, желтый и белый. 

Веб-дизайнер отрисовал иконку WhatsApp* в цветах моего сайта. Получилось стильно, но рискованно. Почему? 

В самом размещении логотипа WhatsApp* на сайте нет нарушения интеллектуальных прав правообладателя товарного знака - ВотсАпп ЛЛК (Калифорния, США). Тому есть простое объяснение. 

Товарный знак  нужен исключительно для индивидуализации конкретных товаров. Потребитель видит товар и связывает его с конкретным производителем. 

Например, вы видите сайт с именем "WhatsApp*" в доменной зоне ".com" и понимаете: здесь предлагаются к продаже товары правообладателя этого товарного знака. 

В моем случае логотип WhatsApp* на сайте не предназначен для индивидуализации моих услуг под брендом "WhatsApp*". Логотип лишь информирует о том, что клик по нему переведет пользователя сайта в чат с адвокатом - владельцем сайта. 

Чисто информационная функция. Как следствие - изображение логотипа занимает незначительное место на экране сайта либо помещается в один ряд с иконками иных способов связи: e-mail, телефон и так далее. 

Другое дело - возможность нарушения авторских прав: 

1. Картинка товарного знака WhatsApp* кем-то нарисована. 

Значит, есть автор произведения искусства. И у него есть право на единоличное использование картинки, в том числе в сети "Интернет". 

2. Автор картинки передал интеллектуальные права на нее компании - владельцу товарного знака WhatsApp*. И компания запретила менять цвет в логотипе. 

Об этом я узнал из Условий предоставления услуг WhatsApp*: пользователю разрешено использовать логотип с учетом Руководства по фирменному стилю WhatsApp*. 

В Руководстве отсутствует разрешение менять фирменные цвета. Более того, в разделе "Вопросы-ответы" дан прямой запрет на изменение цвета в логотипе. 

3. Я рискую получить иск о нарушении исключительного права на произведение искусства. 

Логотип WhatsApp* зарегистрирован в России, что позволяет его владельцу обратиться с иском в суд. Основание - переработка логотипа без разрешения владельца и размещение переработанного произведения в сети "Интернет". 

Поэтому вы не найдете на моем сайте иконку WhatsApp*: ее фирменный стиль выбивается из моего стиля, а изменение стиля WhatsApp* незаконно. 

Поговорите с вашим адвокатом. Он предложит вариант оформления  на сайте кнопки, которая ведет на чат в мессенджере WhatsApp*. 

Узнать мой вариант решения можно, перейдя на сайт моей адвокатской практики. Ссылка в профиле. 

Мысли вслух: при желании можно оспорить сам факт создания логотипа, ведь произведение должно носить творческий характер. Но есть ли творчество в том, чтобы на зеленом фоне круга поместить телефонную трубку? 

* Деятельность компании Meta Platforms Inc. (Facebook и Instagram) на территории РФ запрещена.

Представлен открытый проект Open Lovable, который клонирует любые сайты за один клик. Не надо учить дизайн и разметку — система генерит любые лендинги и сайты. Работает просто — получает URL и выдаёт результат. Можно контролировать стили и редактировать проект прямо на ходу — достаточно вписывать команды в чат с нейросетью. Сервис полностью клонирует ресурсы — от дизайна и разметки до бизнес-логики и всего функционала. Внутри — самые хайповые и мощные нейронки прямо сейчас — GPT-5, Claude 4.1, Grok 4 или Gemini 2.5 Pro. Код Open Lovable лежит тут. В вебе доступен — здесь.

В SpaceWeb запустили конструктор сайтов с ИИ

Новый день – новый релиз! Сегодня рассказываем о новой фиче — интегрировали в конструктор сайтов SpaceWeb искусственный интеллект. В обновленной версии можно быстро запустить сайт и подготовить референсы для клиентских проектов. Интерфейс генератора сайтов максимально удобен и интуитивен: с помощью функции перетаскивания и поддержки искусственного интеллекта можно легко настроить сайт под свои нужды и сделать его уникальным. 

Что делает ИИ в конструкторе?

• Генерирует контент: автоматически создает заголовки, тексты и разделы сайта.

• SEO-оптимизирует: формирует мета-заголовки, мета-описания и ключевые слова, помогая продвигать сайт в поисковых системах.

• Обновляет и редактирует сайт: быстро и легко вносит изменения в структуру, контент и оформление.

• Адаптирует веб-ресурс под задачи бизнеса: в конструктор встроено 200 шаблонов, среди которых обязательно найдется подходящий.

В конструктор также интегрированы инструменты для онлайн-торговли, есть большой выбор плагинов, подключена защита от DDoS уровня L3-L4, автоматически фильтрующая трафик от сетевых и транспортных атак. Создавать сайты можно сразу на нескольких языках, благодаря автоматической поддержке более 50 языков. Тарификация зависит от числа сайтов, объема диска и количества шаблонов. Протестировать новый сервис можно уже сейчас на сайте.

Ахиллесова пята патента на промышленный образец

Допустим, ваша компания что-то производит. К примеру, корпуса для серверных шкафов или детские площадки.

Скорее всего, с внешним видом изделия вы работаете в два этапа:

Первый. По вашей просьбе художник создает дизайн изделия и передает вам право на получение патента.

Второй. Вы получаете патент на промышленный образец и запускаете изделие в работу.

Вам кажется, что все законно.

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

Возникают два вопроса:

1. Возможны ли ситуации, когда у дизайна изделия появляется еще один автор?

2. Защищает ли вас патент на промышленный образец от притязаний "нового" автора?

Ответ на первый вопрос: да, такие ситуации возможны.

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

В этом случае на свет появляется соавтор вашего дизайна. Он не давал вам разрешение на получение патента и защищает свои интеллектуальные права.

Другой пример. Ваш дизайнер фактически ничего не создавал: он подсмотрел внешний вид изделия в интернете и выдал его за свой труд.

В этом случае к вам обращается настоящий автор дизайна, защищая результаты своей интеллектуальной деятельности.

Ответ на второй вопрос: в описанной ситуации промышленный образец вас не защищает.

Все дело в разнице правовых режимов - авторские права защищаются по нормам авторского права, промышленный образец берегут нормы патентного права.

Разные правовые режимы не заходят на половину друг друга.

В примере выше налицо авторское право. Вы будете отбиваться от претензии, используя главу 70 Гражданского кодекса РФ.

Важно! Разборки с подателем претензии сами по себе не повлекут аннулирование вашего патента.

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

Попадались ли вам в интернете картинки, похожие на дизайн ваших изделий?

Представлена бесплатная платформа Pagy, которая позволяет создавать лендинги и небольшие веб-проекты за секунды. Работает в браузере и собирает сайты или визитки без привлечения дизайнера, верстальщика. Не требует никакой установки ПО. Все просто: выбираете шаблон и сразу его редактируете, пишите текст, вставляете ссылки и пикчи. Ни одной строчки кода писать не нужно, хостинг не требуется. Есть аналитика метрик сайта и сотни уже готовых дизайнов от разрабов и коммьюнити.

— Слушай, я посмотрел у Тинькоффа — у них такие крутые анимации. Давайте и нам такие сделаем!

— Ну, у нас не финтех, мобильного приложения нет, и вообще — у нас CRM для логистов…

— Ну и что? Люди любят, когда красиво! Сделаем плавные графики, чтобы всё оживало. UX, UI, ты же понимаешь!

— У нас при этом не работают фильтры, отчёты формируются вручную, и у клиента падает система при импорте Excel. Может, сначала это починим?

— Ладно… Только кнопки тогда сделай с закруглениями, как в Тинькоффе. Хоть что-то красивое будет.

Выглядит лучше. Работает — так же плохо.

Потому что копировать обёртку, когда продукт внутри разваливается — это мёртворождение дизайна.

Вдохновение — не преступление.

Но копирование без понимания контекста — худший выбор.

У Тинькоффа и команда дизайнеров, и исследования юзабилити, и огромный бюджет, и полгода на rollout.

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

Оффтоп
Читайте больше у меня в профиле и в Telegram канале

🚀 День 12 как работаю над нашим конструктором форм!

- Сделал получше интерфейс для компонентов

Прорабатываю компоненты под разные страны, хочу сделать локализацию под страны которые занимают наибольшую долю в интернете: 

• Английский - 49.2%

• Испанский - 6.0%

• Немецкий - 5.8%

• Японский - 5.1%

• Французский - 4.4%

• Португальский - 4.0%

• Русский - 3.8%

• Итальянский - 2.8%

🛠 День 10: Разработка полным ходом.

Хочу поделиться прогрессом по нашему новому продукту, постарался тезисно собрать все что есть на данный момент:

📱 Мобильная версия

• Полнофункциональный интерфейс на телефоне- Можно создавать формы и просматривать ответы прямо с телефона

🔧 Конструктор форм

• Drag & Drop

• Автосохранение

• Заголовки (title, description)

• Брендинг: обложка, логотип (картинка, текст или эмодзи)

• 20+ типов полей: текст, email, телефон, рейтинги, файлы, дата, время

• Бизнес-поля: ИНН, ОГРН, КПП, БИК, СНИЛС, паспорт - с валидацией и проверкой хеша

• Рейтинги: 1-5 звёзд, 1-10

🌐 Переводы

• Уже есть RU / EN- Скоро сделаем ещё 48 языков

🗂 Папки и доступы

Папки с правами доступа - удобно делиться с командой

Уровни доступа:

• Владелец - полный контроль

• Администратор - всё, кроме удаления папки

• Редактор - формы и ответы

• Редактор форм - только формы

• Оператор - только просмотр/обновление ответов

• Платежи - доступ только к платежам

📋 Управление формами

• Поиск, фильтрация, сортировка

• Дублирование и удаление

• Шаблоны

🔗 Публикация

• Короткие ссылки (/f/abc1234)

• QR-коды

• Виджет для встраивания в сайт (iframe)

• SEO-метатеги

• Превью формы в соцсетях (OG, Twitter) с картинкой

• SSR-рендеринг форм

📊 Ответы и аналитика

• Фильтрация по дате, форме, IP

• Экспорт ответов в CSV

📎 Файлы

• Поддержка 20+ форматов

• Превью: изображения, PDF, CSV, текст и др.

Спустя 26 лет чуть не истёк срок действия домена half-life3.com. Домен был создан ещё в 1999 году и раньше перенаправлял на сайт The Orange Box. Однако 28 июня домен прекращал своё существование, из-за чего некоторые фанаты начали бить тревогу и даже связались со службой поддержки Valve, которая сообщила, что домен в безопасности — его продлили некоторое время назад.

Представлен сайт, где можно летать по миру на самолётике — благодаря Google Картам. Города полностью трёхмерные — для полётов доступны Париж, Токио, Рио, Брюссель и другие города.

Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.

Обновил сайт знакомств для айтишников

Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.

Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.

Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.

Как было раньше можно посмотреть в архиве интернета, с 2012 года.

Часть 2: итоги недели разработки вайбкодинга с агентами

Прошлый пост тут

1️⃣ Текущий прогресс по xsoulspace.dev привел к тому, что обнаружил что есть закономерность какие именно модели хороши для использования в проектировании layout страницы (спойлер - не записал какие 🤦‍♂️ кажется использовал Claude 4.0 thinking + Gemini 2.5 Pro).

Что попробовал сделать : нарисовал простой wireframe image -> сконвертировал в ACSII art, и затем скормил LLM для более корректного восприятия layout.

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

2️⃣обновил все flutter библиотеки, last answer, word by word, budget app до flutter 3.8 - пользовался агентами в окошках. В некоторых случаях правил руками, но в большей части работал по принципу PDSA (Plan Do Study Act), где я разрабатывал план, а агент по нему шел, потому изучал результаты и т.д.
Вывод - нужно сильнее нарабатывать промпты.

3️⃣внезапно получил спам-рассылку-письмо с возможностью потестить on device API для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:

1. Идея и этические принципы

2. Палитра и дизайн система на основе идеи и принципов

3. План работы

4. Имплементация через агентов + доп ресерчи чтобы агенты понимали какую информацию брать.

Удалось собрать прототип за 12 часов (рабочую, включая все экраны и дизайн систему). Следующий этап - буду модифицировать чтобы можно было тестировать на реальных промптах в проектах.

Опыт: понял как создавать и работать с ролями (опишу в следующем посте про MVP), разобрался как запускать LLM на устройстве.
Недостатки: нужно более точно прописывать тех стак, особенно ключевые места, такие как - синхронизация данных, тип хранилища и т.д. И хорошо если изначально можно давать wireframes, или подгенеривать на основании дизайн системы.

Хотелось сделать нечто среднее между игрой и обычным интерфейсом, но пока не получилось.

4️⃣Создал детальный план и начал прорабатывать новую систему сохранения данных. Для меня это оказалось большой проблемой - потому что Hive, Isar на flutter перестали поддерживаться, а другие библиотеки неудобно использовать (где-то перешел на Sembast).

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

Поэтому решил объединить все идеи и написать одну библиотеку которая будет из коробки давать синхронизацию с гитом, github и папками. Так надеюсь удастся побороть проблему долговечности и надежности хранения данных.
Пока агенты имплементировали 4 этапа из 5 (основную логику провайдеров данных), и как итог - собрал отдельное тестовое приложение (todo), чтобы протестировать работу (отдельный скриншот), понять недостатки и как можно быстрее завершить библиотеку чтобы начать интеграцию во все проекты. Это важно, потому что при одновременной интеграции сразу будет понятно что работает, а что нет, и таким образом будет проще получать feedback и развивать библиотеку качественно.

Спасибо за ваше время и хорошего дня!

p.s.:

Бумаги которые claude нашел по теме и одновременно не по теме)

• Towards Aligned Layout Generation via Diffusion Model with Aesthetic Constraints https://arxiv.org/abs/2402.04754

• CreatiLayout: Siamese Multimodal Diffusion Transformer for Creative Layout-to-Image Generation https://arxiv.org/abs/2412.03859

• Future of edge and on-device AI in gaming https://inworld.ai/blog/ml-advancements-that-will-make-on-device-ai-possible

• MobileExperts: A Dynamic Tool-Enabled Agent Team in Mobile Devices https://arxiv.org/abs/2407.03913

• From Cloud to Edge: Rethinking Generative AI for Low-Resource Design Challenges https://arxiv.org/html/2402.12702v1

• Generative Artificial Intelligence-Enabled Facility Layout Design Paradigm https://www.mdpi.com/2076-3417/15/10/5697

Попробую публиковать серию постов про мои новые эксперименты с вайбкодингом.

Не использую v0, bolt - так как они совсем почти no-code + генерят react приложения, а мне интересно сейчас проработать поработать с Dart проектами.

Начал с крафта нового сайта для xsoulspace.dev (мой основной сайт по проектам, давным давно писал на flutter и очень давно не обновлял).

Основная идея в том, чтобы:

1. Как можно больше проработать паттернов вайбкодинга

2. Как можно качественнее научиться работать с дизайнерской точки зрения

3. Научиться учить агента новой информации (новый пишу на jaspr - а на нем крайне мало информации - и скорее всего не обучалась ни одна модель, поэтому вайбкодить на нем тяжело - если агенту дать задачу без правил и промптов - он не сможет завершить задачу и закопается в ошибках).

Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)

Восстановил часть промптов которые были раскиданы по проектам.

Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..

Исходный код открытый, поэтому буду делиться результатами когда завершу делать :) (надеюсь что скоро)

Пока что было две идеи:

1. Сделать в виде интерактивной игры (получились вырвиглазные кнопки

2. Каким-то образом придумать бенто..

Спасибо за ваше время и хорошего дня!

P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(

P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..