LLM под капотом

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

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

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

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

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

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

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

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

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

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

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

Ваш, @llm_under_hood 🤗

👍47❤20🔥18🤗5🤔2

www.tgoop.com/llm_under_hood/672

9.63K viewsedited  Oct 3 at 08:56

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

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

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

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

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

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

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

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

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

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

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

Ваш, @llm_under_hood 🤗

BY LLM под капотом