Как получить супердизайн сайта или приложения с помощью AI? Простой пошаговый план для ленивых + готовый промпт
Автор: Алексей Крол Время от нуля до результата: 20-30 минут Что получите: кликабельный HTML-прототип уровня Figma, но без Figma и без дизайнера
Обычно дизайн делают так: бриф → дизайнер в Figma → согласования → правки → ещё правки → верстальщик → ещё правки. Это недели и тысячи долларов.
А можно так: вы описываете, что хотите → AI находит лучшие примеры → анализирует паттерны → генерирует ТЗ → создаёт рабочий прототип. Вы открываете HTML-файл в браузере, кликаете по кнопкам, смотрите как всё выглядит. Не нравится — говорите «измени вот это». Через 20-30 минут у вас дизайн, от которого сносит крышу.
Прежде чем просить AI что-то дизайнить, определитесь с базовыми вещами:
- Тип проекта: SaaS, маркетплейс, лендинг, интернет-магазин, портфолио, блог?
- Ниша: образование, финтех, e-commerce, здоровье, B2B?
- Аудитория: кто ваши пользователи?
- Что уже есть: существующий сайт (дайте URL) или с нуля?
Если у вас уже есть сайт — просто дайте ссылку. Если нет — приведите 2-3 ссылки-референса и скажите «хочу примерно так». AI разберётся.
Сразу создайте папку проекта на компьютере — туда будет всё складываться.
Идёте в любой AI с Deep Research (Perplexity, Claude, ChatGPT) и ставите задачу:
«Найди 10-20 лучших, общепризнанных примеров дизайна в нише [ваша ниша]. Критерии: самый современный дизайн 2025-2026, функциональный, успешный коммерчески. Для каждого примера опиши: что именно сделано хорошо (навигация, hero-секция, карточки, типографика, цвета, мобильная версия). Приведи URL.»
Этот шаг можно делать в Perplexity (Deep Research) или прямо в Claude Cowork — он может заходить на сайты через Chrome и анализировать их визуально.
На основе найденных примеров просите AI:
«Проанализируй все найденные референсы и выяви общий паттерн современного дизайна в этой нише. Что общего у лучших сайтов? Какая структура страниц, какие обязательные секции, как устроена навигация, какие цвета и шрифты, какие элементы конверсии. Также выяви антипаттерны — чего избегают лучшие сайты.»
На выходе вы получите «золотой стандарт» дизайна в вашей нише.
Теперь просите AI превратить паттерн в конкретное ТЗ:
«На основе выявленного паттерна создай подробное техническое задание на дизайн сайта [описание вашего проекта]. Включи: структуру всех страниц, описание каждой секции, цветовую палитру (конкретные HEX-коды), типографику (шрифт, размеры, вес), спецификации компонентов (кнопки, карточки, формы), responsive breakpoints. Также подготовь все необходимые файлы окружения для Claude Code: CLAUDE.md с полным ТЗ и инструкцией, JSON с данными для прототипа.»
Важно: попросите включить в CLAUDE.md указание на полную автономию — чтобы AI не дёргал вас на каждом шаге, а работал самостоятельно.
Положите все файлы из Шага 4 в папку проекта. Откройте терминал в этой папке, запустите claude. Он прочитает CLAUDE.md и начнёт работать.
Что сказать:
«Прочитай CLAUDE.md и все файлы в проекте. Если есть вопросы — задай. Если нет — начинай работать.»
Режим автономии: запускайте с флагом --dangerously-skip-permissions или отвечайте «да» на все запросы разрешений в начале. Claude Code должен работать, а не спрашивать разрешение на каждый файл.
На выходе: набор HTML-файлов. Двойной клик по index.html — и вы видите свой сайт в браузере. Кликаете по кнопкам, переходите между страницами, смотрите мобильную версию.
Смотрите результат и говорите:
- «Сделай hero-секцию темнее»
- «Добавь ещё карточек»
- «Измени шрифт заголовков на более жирный»
- «Секция отзывов выглядит пусто — добавь фото и звёзды»
Каждая итерация — 1-2 минуты. Через 5-10 итераций у вас финальный дизайн.
Когда дизайн утверждён:
«Вот у меня есть рабочий HTML-прототип и полное ТЗ. Теперь перекинь это в [React / Next.js / WordPress + Elementor / что угодно]. Сначала фронтенд, потом бэкенд.»
Скопируйте промпт ниже, замените всё в [квадратных скобках] на свои данные, и вставьте в Claude Cowork или любой другой AI. Он проведёт вас через все шаги.
Ты — senior AI-консультант по дизайну и UX. Твоя задача — провести меня через полный
цикл создания современного дизайна сайта/приложения: от исследования до готового
HTML-прототипа.
## МОЙ ПРОЕКТ
- Тип: [SaaS / маркетплейс / лендинг / интернет-магазин / блог / портфолио / другое]
- Ниша: [образование / финтех / e-commerce / здоровье / B2B / другое]
- Описание: [опишите в 2-3 предложениях, что делает ваш продукт]
- Аудитория: [кто ваши пользователи, язык, география]
- Существующий сайт: [URL или "с нуля"]
- Референсы: [2-3 URL сайтов, которые вам нравятся, или "найди сам"]
## ЧТО МНЕ НУЖНО
Проведи меня через 4 этапа. После каждого этапа покажи результат и спроси,
готов ли я двигаться дальше.
### ЭТАП 1: ИССЛЕДОВАНИЕ
Найди 10-20 лучших примеров дизайна в моей нише. Для каждого:
- URL
- Что конкретно сделано хорошо (навигация, hero, карточки, типографика, цвета, CTA)
- Скриншоты или описание ключевых экранов
Критерии: самый современный дизайн 2025-2026, высокая конверсия, отличный UX,
mobile-friendly.
### ЭТАП 2: ПАТТЕРН
На основе исследования выяви:
- Обязательные элементы (что есть у всех лучших сайтов)
- Структура страниц (какие страницы, какие секции на каждой)
- Дизайн-система (цвета, шрифты, отступы, компоненты)
- Антипаттерны (чего избегать)
- Конкретные рекомендации для моего проекта
### ЭТАП 3: ТЕХНИЧЕСКОЕ ЗАДАНИЕ
Создай полное ТЗ, включающее:
1. **Спецификацию дизайна:**
- Цветовая палитра (точные HEX-коды для каждого элемента)
- Типографика (шрифт, размеры H1-H3-body-small, line-height, font-weight)
- Spacing (отступы секций, контейнер, gap, border-radius)
- Компоненты (кнопки, карточки, формы, навигация, футер)
2. **Структуру каждой страницы** (top to bottom, каждая секция):
- Домашняя страница
- Страница продукта / лендинг (если применимо)
- Другие ключевые страницы
3. **Файлы окружения для Claude Code:**
- `CLAUDE.md` — полное ТЗ + инструкция, ОБЯЗАТЕЛЬНО включи:
"У тебя ПОЛНАЯ АВТОНОМИЯ. Не спрашивай разрешение. Принимай решения сам."
- `data/content.json` — контент для прототипа (тексты, данные, заглушки)
- Структуру папок проекта
4. **Технические требования к прототипу:**
- Статический HTML + CSS + JS (работает через file://, без сервера)
- Responsive (mobile-first)
- Кликабельные ссылки между страницами
- Плейсхолдер-изображения (picsum.photos или SVG)
- Без jQuery, без Bootstrap — кастомный CSS (можно Tailwind CDN)
- Шрифт через Google Fonts CDN
- Микроанимации (scroll reveal, hover effects)
### ЭТАП 4: ФИНАЛИЗАЦИЯ
Покажи мне итоговый набор файлов, объясни структуру, и дай инструкцию:
как открыть терминал, запустить Claude Code, и что ему сказать.
## ВАЖНО:
- Весь контент на [русском / английском / другом языке]
- Дизайн должен быть на уровне лучших примеров из ЭТАПА 1
- Это прототип для утверждения дизайна, не production-код
- Структура и визуал — финальные, контент — заглушки
- В CLAUDE.md ОБЯЗАТЕЛЬНО укажи полную автономию
Начинай с ЭТАПА 1.
Если вы совсем ленивые: просто скопируйте промпт выше, заполните [квадратные скобки] и вставьте в Claude Cowork. Он будет вести вас за руку через каждый этап.
Если хотите быстрее: можете пропустить Этапы 1-2 и сразу дать свои референсы + описание того, что хотите. AI сразу перейдёт к ТЗ.
Для максимальной скорости в Claude Code: используйте режим, который не требует подтверждения каждого действия. Пусть AI работает автономно — он создаст все файлы, CSS, JS, и HTML-страницы без вашего участия. Вы просто смотрите результат в конце.
Итерации — это нормально. Первый результат будет на 80% хорош. Скажите «измени X» — и через минуту будет на 95%. Ещё пара правок — и готово.
От HTML к продакшену: когда HTML-прототип утверждён, скажите Claude Code: «Перепиши это в React/Next.js/WordPress». Он сделает. Это следующий этап, но дизайн уже зафиксирован.
Весь процесс от «у меня есть идея» до «вот мой кликабельный прототип» занимает 20-30 минут. Раньше на это уходили недели и тысячи долларов.
thank you!