"Генерация симпатичных и консистентных интерфейсов при помощи HTML брендбука Сейчас разбирали с одной командой способы генерации красивых интерфейсов при помощи LLM. В интерфейсы им не очень хочется, душа стремится поскорее изучать кодинг больших проекты при помощи агентов. И всем кажется, что можно навайбкодить что-то симпатичное быстро. Проблема в том, что все эти навайбкоженные интерфейсы - они похожи друг на друга, как цыплята из инкубатора. Их сразу видно по схожим элементам дизайна и неряшливости. Скажем, на одной странице текст и секции могут быть оформлены одним образом, а на другой - совершенно иным. Шрифты скачут, отступы плывут, оттенки - переливаются. Это сразу портит впечатление от продукта. Кажется, что если интерфейс неряшливый, то и остальная начинка тоже сделана аналогичным образом. Поэтому я обычно прошу команды сделать одно достаточно простое упражнение - взять PDF бренд-бук компании и на его основе сформировать промпт, который будет выдавать по запросу консистентные интерфесы под задачу. Делается это так: (1) Разделяем генерацию UI на шаги: сперва LLM-кой создаем HTML-гайд по желаемому стилю (чтобы и описывал и показывал примеры). Если что-то не нравится, то исправляем прямо там, пока не ушли в дебри проекта. (2) Пакуем все в ""мини-фреймворк"" в одном файле: при генерации гайда можно попросить LLM-ку сделать прямо HTML+CSS микрофреймворк по бренду, отдать его дизайнеру на проверку, и использовать это для всех UI-проектов. Этот файл и будем вставлять в промпт или проект (Claude Project), в котором нужно сверстать или изменить интерфейс. (3) Сначала верстаем интерфейсы в Claude Web UI на базе гайда (они получаются у клода симпатичнее, чем Gemini/ChatGPT итп), а потом копируем в основную среду разработки и просим интегрировать. Чтобы было понятнее, как может выглядить такой ""исполняемый"" брендбук, см в комментариях скриншот одного из моих. Он помогает Claude и прочим агентам поддерживать единую стилистику в моем блоге. Пользуетесь чем-то подобным? Кидайте тоже в комментарии скриншоты своих интерфейсов и гайдов! Ваш, @llm_under_hood 🤗"