Генерация симпатичных и консистентных интерфейсов при помощи HTML брендбука

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

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

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

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

Делается это так:

(1) Разделяем генерацию UI на шаги: сперва LLM-кой создаем HTML-гайд по желаемому стилю (чтобы и описывал и показывал примеры). Если что-то не нравится, то исправляем прямо там, пока не ушли в дебри проекта.

(2) Пакуем все в "мини-фреймворк" в одном файле: при генерации гайда можно попросить LLM-ку сделать прямо HTML+CSS микрофреймворк по бренду, отдать его дизайнеру на проверку, и использовать это для всех UI-проектов. Этот файл и будем вставлять в промпт или проект (Claude Project), в котором нужно сверстать или изменить интерфейс.

(3) Сначала верстаем интерфейсы в Claude Web UI на базе гайда (они получаются у клода симпатичнее, чем Gemini/ChatGPT итп), а потом копируем в основную среду разработки и просим интегрировать.

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

Пользуетесь чем-то подобным? Кидайте тоже в комментарии скриншоты своих интерфейсов и гайдов!

Ваш, @llm_under_hood 🤗

Docs as code: инструкция по использованию. Часть 2 / Хабр https://share.google/MOYSGACXLRQ19Qo70

ГОСТ ЕСКД для документирования информационных систем – зло или благо? / Хабр https://share.google/vSOeEe1qdDnbdZ7YD

Промпт-инжиниринг мёртв? Почему «как спросить» больше не важно, и что приходит на смену / Хабр https://share.google/4qaXaM5A6AKGujHf9

В России начали преподавать отечественные JavaScript — язык буквально перевели на русский и начали обучать ему студентов Пензенского госуниверситета.

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

P. S. Если вдруг хотите посмотреть задачи на импортозамещённом JS, то сделать это можно тут.

Пришлось поработать несколько вечеров, чтобы Claude Code создал приложение с нуля (на основе фреймворка).
В общем, затратила около 60 долларов на создание. Много денег взяли дополнительные фичи. И безопасность. Хреновый безопасник Claude Code (он сам мне в этом признался) зарубил мне готовое приложение своим топорным пентестом. Потом все переделал, и за это еще денег срубил. В общем, с нуля (если сам не программер) не так все просто разработать, даже с подробным ТЗ с этапами (я его подготовила) + фреймворк. Получилось вот что:
🎯 Основные функции

💬 AI Чат с GPT-4/4o - Интеллектуальные диалоги с потоковой передачей ответов в реальном времени (Server-Sent Events)
🔐 Безопасная аутентификация - Email/Password и GitHub OAuth через Supabase Auth
💾 История диалогов - Все разговоры сохраняются в PostgreSQL с Row Level Security
📱 Адаптивный интерфейс - Полностью responsive дизайн для desktop, tablet и mobile
🔒 Личные API ключи - Каждый пользователь использует свой OpenAI API ключ (безопасно, без общих затрат)

🌟 Уникальные возможности
📎 Загрузка файлов (6 форматов)

🖼 Изображения - PNG, JPG, GIF, WebP (анализ через GPT-4o Vision)
📄 Документы - PDF, DOCX (извлечение текста)
📊 Данные - CSV, JSON (парсинг и анализ)
📝 Текст - TXT, Markdown, HTML
🔍 OCR - Автоматическое распознавание текста на сканах через Tesseract.js

📥 Экспорт чатов (4 формата)

📕 PDF - Красиво оформленный документ с метаданными
💾 JSON - Полный дамп чата со всеми данными
📝 Markdown - Универсальный текстовый формат
📄 TXT - Простой текстовый файл

🔍 Поиск и организация

Полнотекстовый поиск - По всем чатам с подсветкой совпадений
Переименование чатов - Удобное управление историей
Удаление чатов - С каскадным удалением сообщений
📊 Статистика - Отслеживание токенов, сообщений, стоимости.

https://modernchat2025.vercel.app/

«Мера востребована временем». В IT-комитете Госдумы поддержали ограничение регистрации в Telegram и WhatsApp. Это нужно для «благоприятного развития нашего мессенджера».

Ранее стало известно, что мобильные операторы перестали присылать SMS-коды и звонки подтверждения для регистрации новых пользователей в Telegram и WhatsApp. Первый замглавы думского комитета по информационной политике, информационным технологиям и связи Александр Ющенко сказал изданию «Подъём», что «в законодательном плане» эта мера не обсуждалась, но назвал её резонной.

«Понятно, что с появлением нашего мессенджера будет предпочтение отдаваться нашему мессенджеру, и вся возможная регулировка будет нацелена на благоприятное развитие нашего мессенджера и затруднение иностранных мессенджеров. Пока для пользователей это плохо, потому что активной конкуренции пока не видно и не слышно». По мнению депутата, все, кто хотел зарегистрироваться в Telegram и WhatsApp, уже давно это сделали, а все остальные могут пользоваться МАХ, и «это нормально». «Я думаю, что это такая достаточная мера, вызванная временем для поддержки нашего мессенджера, наверное, правильная. Это по пользователю не так сильно бьёт, чем вот, например, заглушённые голосовые вызовы. Сейчас для пользователя это гораздо сложнее».

Замглавы этого комитета Олег Матвейчев в комментарии «Подъёму» отметил, что поддерживает такое ограничение только для WhatsApp. «До сих пор как было, так и осталось: компания никак не взаимодействует с российским государством, не выполняет требования российского законодательства, и в конечном итоге, наверное, надо сворачивать её деятельность на территории России. Как вы относитесь, например, к незаконному мигранту, который приехал, живёт у нас и нарушает законы? Вот WhatsApp живёт у нас и нарушает наши законы. Наверное, тоже здесь какая-то нужна депортация».

Протокол VLESS: Как он обходит цензуру в России и почему это работает / Хабр https://share.google/y6wn3StSj4RkTCE1r

Вайбкодинг становится менее доступным: OpenAI закручивает гайки / Хабр https://share.google/If49MYLOwYYU8Blgv

Почему я выбрал Warp, а не Cursor или Claude Code: мои инструменты, MCP, подход и конкретные приёмы разработки с LLM / Хабр https://share.google/tbb6KBpBbQEeHMBmE

Кого заменит искусственный интеллект?
Обычно как-то не сильно люблю этот вопрос и не люблю на него отвечать.
Но вчера я такого персонажа увидела в действии.
Понедельник - день тяжелый. Вчера именно у меня такой и был. Особенно, совещание по ОУД-4 с одним из российских банков.
Совещание было ужасное. Программист (ну очень узкий специалист в коде, прямо тупо кодер) совсем не понимает ИБ и ничего не понял, еще и гордится этим своим невежеством. Еще и повышал на нас голос.
Ну если ты такой уже непонятливый и только тупо кодер, возьми наш опросник, прогони в нейронке, там получишь ответы на уровне для третьеклассника.
Нет, надо всем показать свою узость мышления, что за пределами исходного кода, даже в смежных областях, ты просто туп.
Вот таких вот "узких специалистов" и заменит ИИ, он уже сейчас неплохо пишет код, сама проверяла 🙂
Очень долго программистам платили ну очень высокие зарплаты, они расслабились. В корпорациях, банках можно было сидеть годами на одних и тех же операциях, совсем не развиваться. Пришло время таких "специалистов" отправлять на свалку истории. А это еще совсем не старые люди (они же и эйджизм пропагандировали). Вот теперь бумеранг им вернулся.
В ближайшие годы подобных спецов ждут массовые увольнения.

Claude Code всё?

Ну что, друзья, Open Source LLMs для кодинга стремительно догоняют своих закрытых братьев сестер. Недавно вышли аж 3 значимых модели от китайцев - это Minimax M2, GLM 4.6 и Kimi K2 Thinking, очень мощные модели, догоняющие Sonnet 4.5 и GPT-5.

Я думаю, для многих не секрет, что китайцы сейчас, во-первых, начали предоставлять подписки на свои LLM (GLM, MiniMax), во-вторых, дают возможность юзать их из Claude Code.
Но, по мне, так ключевая проблема китайских подписок в Privacy - субъективно, вероятность того, что данные будут использованы для обучения (как минимум) существенно выше. И вот тут на сцене появляется сервис Synthetic

1. Synthetic подписка - Claude Code x3
Суть сервиса в том, что они предоставляют дешевый доступ к множеству современных LLM - но главное, умеют это делать по подписке. Так вот, даже в подписке за 20$ они пишут, что лимиты на лучшие модели x3 от тех, что Claude дают за те же деньги. Minimax M2, GLM 4.6 и Kimi K2 Thinking там есть. Важно, что они заверяют, что дата центры с их GPUшками находятся в US и EU, что компания у них американская и что данные юзеров для дообучения они никогда не используют.
С Claude Code (CC) они тоже умеют интегрироваться нативно и даже дают готовый конфиг, который позволяет легко и просто запускать их Claude Code с их подпиской одной командой:

# Add to  ~/.zshrc
synclaude() {
  ANTHROPIC_BASE_URL=https://api.synthetic.new/anthropic \
  ANTHROPIC_AUTH_TOKEN=${SYNTHETIC_API_KEY} \
  ANTHROPIC_DEFAULT_OPUS_MODEL=hf:moonshotai/Kimi-K2-Thinking \
  ANTHROPIC_DEFAULT_SONNET_MODEL=hf:MiniMaxAI/MiniMax-M2 \
  ANTHROPIC_DEFAULT_HAIKU_MODEL=hf:MiniMaxAI/MiniMax-M2 \
  CLAUDE_CODE_SUBAGENT_MODEL=hf:zai-org/GLM-4.6 \
  CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1 \
  claude "$@"
}

После этого просто пишем в терминале synclaude и радуемся специальному клоду (не забудьте задать ключи SYNTHETIC_API_KEY у себя в env). Я успел проверить - работает довольно бодро и стабильно.

Еще, люди в чатах жаловались, что подписки от китайцев на китайские модели работают довольно медленно. Мои быстрые эксперименты с Synthetic показали, что их модели прям шустренько отвечают.

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

2. API по подписке
Интересно, что любую из доступных always-on моделей можно так же использовать и через API по подписке.

3. Деплой своих моделей
Неочевидный приятный бонус - этот сервис так же умеет разворачивать почти любую LLM с HugginFace (on demand) и это прямо находка для тех, кто деплоит локальные ллмки в организациях - есть возможность очень быстро и дешево протестировать LLMку или ее кванты. Мною проверено - работает.

Приятная рефералка
Пользуясь случаем, поделюсь своей реф ссылкой на этой сервис https://synthetic.new/?referral=eWEfhLA6nZXwE1D - в случае подписки, +10$ на баланс прилетит и мне и вам.

@ai_driven

Как сэкономить 20$ на Cursor или «бюджетный вайб-кодинг» / Хабр https://share.google/HSAaXztx6gb6bE6BL