Наконец-то разобрался, почему UI, сгенерированные Claude, выглядят как «ИИ-шлак», и как это исправить
У меня бывают задачи — нужно быстро сделать прототип лендинга или форм для дальнейшей доработки дизайнером и верстальщиком. Иногда хочется пропустить этап дизайна и вёрстки, сразу получить что-то рабочее, что можно отправить на сайт и тестировать на реальных пользователях в рекламе.
Сложность в том, что дизайн с помощью ИИ получается очень базовым, сразу узнаваемым — видны эти градиенты «вырви глаз». Чтобы этого избежать, Claude выпустила Skills, которые помогают решить эту задачу. Статью можно почитать по ссылке.
Если вы пробовали сделать пару страниц на сайте в едином стиле, то знаете — нужно прилично потрудиться, чтобы создать что-то визуально приятное.
Пробуем создать свой таск-менеджер
Например, попросите Claude:
Создай интерфейс таск-менеджераРезультат — стандартный интерфейс, не проработанный с точки зрения UX/UI, с градиентами, разными шрифтами и слабой типографикой.
Подключаем web-artifacts-builder, пишем идентичный запрос и получаем следующий результат:
Открыть страничку с интерактивным таск-менеджером можно по ссылке.
Таким образом, мы получаем красивый дизайн в единой стилистике shadcn/ui с интерактивными элементами — можно добавлять, удалять задачи, менять статусы. Дашборд упакован в один файл task-manager.html и весит всего 390 КБ. Удобно презентовать, обсуждать и делиться результатом.
Но это не вся прелесть. Если Skills установить через CLI Claude Code в папку, то мы получим Production Ready приложение, готовое к развёртыванию на сервере.
Итак, что под капотом?
web-artifacts-builder — это фреймворк от Anthropic, предназначенный для создания сложных интерактивных веб-приложений (артефактов) с использованием современного стека: React 18, TypeScript, Tailwind CSS и shadcn/ui компонентов.
Какие задачи может решать:
Прототипирование и MVP-разработка
Без web-artifacts-builder Claude создавал стандартные приложения. С использованием skill-архитектуры ИИ теперь генерирует полнофункциональные приложения с улучшенным UI за счёт shadcn/ui компонентов.
Приложения управления задачами (Task Manager)
Полноценные приложения с формой создания новых задач, поддержкой категорий и сроков выполнения, встроенными компонентами из shadcn/ui вместо базовых HTML-элементов.
Enterprise-решения
Интеграция с корпоративными проектами — использование умений (Skills) для кодирования брендинга компании: цвета, типография, стандарты оформления. Таким образом, каждый создаваемый артефакт автоматически соответствует фирменному стилю.
Документооборот с PDF
Комбинация web-artifacts-builder с Claude Projects позволяет загружать PDF-документы компании и генерировать инструменты на основе этих данных.
Плюсы
- Благодаря shadcn/ui компонентам и Tailwind CSS артефакты выглядят профессионально и избегают стереотипного «AI slop» (фиолетовые градиенты, избыток округлений)
- Состояние и маршрутизация: поддержка сложной логики через React, в отличие от простых HTML-артефактов
- Производительность: Parcel автоматически бандлит всё в один HTML-файл, которым можно делиться
- Инициализация через скрипт и bundle-процесс минимизируют использование токенов в Claude
- Воспроизводимость: артефакты можно развёртывать через GitHub Pages или Replit за минуты
- Навык web-artifacts-builder помогает быстро создавать production-ready приложения для бизнеса, обучения, аналитики и автоматизации
Как установить web-artifacts-builder
Нужно скачать файл web-artifacts-builder.zip с GitHub. Для этого можно перейти по ссылке https://minhaskamal.github.io.
Если вы используете веб-версию Claude, заходим в https://claude.ai/settings/capabilities и загружаем полученный файл по ссылке выше.
Не забываем включить в настройках нужный навык.
После чего можно переходить в чат и создавать красивые артефакты вместо стандартных.
Например — делаем интерактивный таск-менеджер
Просим:
Создай интерфейс таск-менеджера, используя web-artifacts-builderВ результате получаем приличный интерфес с shadcn/ui. Несколько примеров, что удалось сделать с пары строк текста, за 5 минут.
Сервис для загрузки и хранения файлов
Создай приложение, похожее на Яндекс Диск
Дашборд из изображения
Находим в интернете картинку нужного дашборда.
Пишем запрос:
Создай идентичное приложение, сохрани цвета, шрифты, типографику
Да, есть некоторые моменты с контрастом и адаптивом, но это решается чуть более детальным промптом. Открыть страничку с интерактивным дашбордом можно по ссылке.
Копируем случайно взятый шаблон с сайта shadcraft.com.
Загружаем скрин дашборда и добавляем промпт:
Create a pixel-perfect replica of this dark dashboard interface using web-artifacts-builder.
Результат можно посмотреть по ссылке.
Пробую доработать промпт, чтобы результат был лучше:
You will be creating an exact replica of a user interface design using web-artifacts-builder. Your goal is to recreate the interface with pixel-perfect accuracy, matching the layout, typography, spacing, and styling of the original design.
Here is the description of the interface design you need to replicate:
<image_description>
{{IMAGE_DESCRIPTION}}
</image_description>
Before you begin coding, carefully analyze the design in a scratchpad:
<scratchpad>
In your analysis, identify and note:
1. **Layout Structure**: Overall page layout, grid system, container widths, sections and their arrangement
2. **Typography**: Font families, font sizes, font weights, line heights, letter spacing, text colors
3. **Spacing**: Margins, padding, gaps between elements (measure these carefully)
4. **Colors**: Background colors, text colors, border colors, accent colors (note exact values if visible)
5. **Components**: Buttons, inputs, cards, navigation elements, and their specific styling
6. **Positioning**: Exact placement of elements - left/right/center alignment, vertical spacing
7. **Visual Hierarchy**: Which elements are prominent, sizing relationships between elements
8. **Responsive Considerations**: How elements should be arranged and sized
</scratchpad>
When building the interface with web-artifacts-builder, follow these requirements:
**Accuracy Requirements:**
- Match the exact positioning and alignment of all elements
- Replicate typography precisely (font family, size, weight, line-height)
- Maintain identical spacing (margins, padding, gaps)
- Use the same color scheme throughout
- Preserve the visual hierarchy and proportions
- Ensure layout structure matches the original
**Technical Implementation:**
- Use semantic HTML elements appropriately
- Apply CSS styling to match the design exactly
- Use flexbox or grid for layout as appropriate to achieve the exact positioning
- Include all visual details like borders, shadows, rounded corners, etc.
- Ensure text content is positioned and styled identically
- Pay attention to small details like icon sizes, button states, and spacing
**Best Practices:**
- Write clean, well-organized HTML and CSS
- Use appropriate class names that reflect the component purpose
- Structure your code logically with proper indentation
- Comment your code if there are complex layout decisions
Your final output should be the complete code for the web artifact. The code should render an interface that is visually identical to the described design.
Результат промпта можно посмотреть по ссылке.
Промптинг: как ставить задачу дизайна модели
Мы можем добиться значительно лучших UI-генераций от Claude без постоянных расходов на контекст, создав skill для фронтенд-дизайна. Ключевая идея — думать о фронтенд-дизайне так, как думал бы фронтенд-инженер. Чем точнее вы можете связать эстетические улучшения с реализуемым фронтенд-кодом, тем лучше Claude сможет их выполнить.
Используя эту идею, мы определили несколько областей, где целевой промптинг работает хорошо: типографика, анимации, фоновые эффекты и темы. Все они чётко транслируются в код, который Claude может написать. Реализация этого в ваших промптах не требует детальных технических инструкций — достаточно использовать целенаправленный язык, который побуждает модель более критически думать об этих дизайнерских осях, чтобы получить более сильные результаты. Это тесно согласуется с рекомендациями из нашей статьи о контекстной инженерии — промптить модель на правильной «высоте», избегая двух крайностей: низкоуровневой жёсткой логики (вроде указания конкретных hex-кодов) и размытых высокоуровневых указаний, предполагающих общий контекст.
Типографика
Чтобы увидеть это в действии, начнём с типографики как одного измерения, на которое мы можем влиять через промптинг. Промпт ниже специально направляет Claude на использование более интересных шрифтов:
<use_interesting_fonts>
Типографика мгновенно сигнализирует о качестве. Избегай использования скучных, типовых шрифтов.
Никогда не используй: Inter, Roboto, Open Sans, Lato, системные шрифты по умолчанию
Вот несколько примеров хороших, выразительных решений:
- Кодовая эстетика: JetBrains Mono, Fira Code, Space Grotesk
- Редакционный стиль: Playfair Display, Crimson Pro
- Технический стиль: семейство IBM Plex, Source Sans 3
- Отличительные: Bricolage Grotesque, Newsreader
Принцип сочетания: высокий контраст = интересно. Display + моноширинный, антиква + геометрический гротеск, вариативный шрифт с разными начертаниями.
Используй крайности: начертания 100/200 против 800/900, а не 400 против 600. Скачки размера 3x+, а не 1.5x.
Выбери один отличительный шрифт, используй его решительно. Загружай из Google Fonts.
</use_interesting_fonts>Результат, сгенерированный с базовым промптом:
Результат, сгенерированный с базовым промптом и секцией типографики:
Интересно, что требование использовать более интересные шрифты, похоже, побуждает модель улучшать и другие аспекты дизайна.
Типографика сама по себе даёт значительное улучшение, но шрифты — лишь одно измерение. А что насчёт целостной эстетики всего интерфейса?
Темы
Ещё одно измерение, для которого мы можем задать промпт — это дизайны, вдохновлённые известными темами и эстетиками. Claude обладает богатым пониманием популярных тем; мы можем использовать это для передачи конкретной эстетики, которую хотим воплотить в нашем фронтенде. Вот пример:
<always_use_rpg_theme>
Всегда используй RPG-эстетику в дизайне:
- Фэнтезийные цветовые палитры с насыщенными, драматичными тонами
- Изысканные рамки и декоративные элементы обрамления
- Текстуры пергамента, стилизация под кожаный переплёт, состаренные материалы
- Эпическая, приключенческая атмосфера с драматичным освещением
- Антиква средневекового стиля с украшенными заголовками
</always_use_rpg_theme>Это даёт следующий UI в стиле RPG:
Типографика и темы показывают, что целевой промптинг работает. Но вручную задавать каждое измерение утомительно. Что если объединить все эти улучшения в один переиспользуемый ресурс?
Универсальный промпт
Тот же принцип распространяется на другие измерения дизайна: промптинг для движения (анимации и микровзаимодействия) добавляет полировку, которой не хватает статичным дизайнам, а направление модели к более интересным фонам создаёт глубину и визуальный интерес. Здесь комплексный skill проявляет себя во всей красе.
Объединив всё вместе, мы разработали промпт объёмом около 400 токенов — достаточно компактный для загрузки без раздувания контекста (даже при загрузке как skill) — который сильно улучшает фронтенд-результаты по типографике, цвету, движению и фонам:
<frontend_aesthetics>
Ты склонен сходиться к типовым, «на распределении» результатам. Во фронтенд-дизайне это создаёт то, что пользователи называют эстетикой «AI slop». Избегай этого: создавай креативные, отличительные фронтенды, которые удивляют и радуют.
Сосредоточься на:
- Типографика: выбирай шрифты, которые красивы, уникальны и интересны. Избегай типовых шрифтов вроде Arial и Inter; выбирай вместо них отличительные решения, которые поднимают эстетику фронтенда.
- Цвет и тема: придерживайся целостной эстетики. Используй CSS-переменные для единообразия. Доминирующие цвета с резкими акцентами превосходят робкие, равномерно распределённые палитры. Черпай вдохновение из тем IDE и культурных эстетик.
- Движение: используй анимации для эффектов и микровзаимодействий. Отдавай предпочтение решениям только на CSS для HTML. Используй библиотеку Motion для React, когда доступна. Фокусируйся на моментах высокого воздействия: одна хорошо оркестрованная загрузка страницы с каскадным появлением элементов (animation-delay) создаёт больше восторга, чем разбросанные микровзаимодействия.
- Фоны: создавай атмосферу и глубину, а не используй по умолчанию сплошные цвета. Наслаивай CSS-градиенты, используй геометрические паттерны или добавляй контекстные эффекты, соответствующие общей эстетике.
Избегай типовой AI-сгенерированной эстетики:
- Заезженные семейства шрифтов (Inter, Roboto, Arial, системные шрифты)
- Банальные цветовые схемы (особенно фиолетовые градиенты на белом фоне)
- Предсказуемые макеты и паттерны компонентов
- Шаблонный дизайн без контекстно-специфичного характера
Интерпретируй креативно и делай неожиданные выборы, которые ощущаются как действительно созданные для данного контекста. Варьируй между светлыми и тёмными темами, разными шрифтами, разными эстетиками. Ты всё равно склонен сходиться к распространённым решениям (Space Grotesk, например) между генерациями. Избегай этого: критически важно, чтобы ты мыслил нестандартно!
</frontend_aesthetics>В примере выше мы начинаем с предоставления Claude общего контекста о проблеме и о том, что мы пытаемся решить. Мы обнаружили, что предоставление модели такого высокоуровневого контекста — полезная тактика промптинга для калибровки результатов. Затем мы определяем векторы улучшенного дизайна, которые обсуждали ранее, и даём целевые советы, чтобы побудить модель мыслить более креативно по всем этим измерениям.
Мы также включаем дополнительные указания в конце, чтобы предотвратить переход Claude к другому локальному максимуму. Даже с явными инструкциями избегать определённых паттернов модель может по умолчанию выбирать другие распространённые решения (например, Space Grotesk для типографики). Финальное напоминание «мыслить нестандартно» усиливает креативное разнообразие.
Выводы:
Пока добиться полной идентичности не удалось, но буду пробовать использовать ещё ряд скиллов — посмотрим, что получится.
