Дмитрий Тамаров

Ai-инженер, разработчик

2 декабря, 2025

Как превратить Claude в дизайнера: избавляемся от розовых градиентов за 5 минут

Наконец-то разобрался, почему 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.