раздел 04

Шпаргалка

Соберём всё в одном месте: готовые промпты, чек-лист и ссылки на смежные темы.

Готовые промпты

Сгенерировать интерфейс с предпросмотром:

Сделай страницу [что за страница]: [блок 1], [блок 2], [кнопки].
Стиль [минимализм/строгий/игривый], палитра [цвета], адаптивно под мобилку.
Покажи в Artifacts.

Из скриншота в вёрстку:

Вот скриншот. Свёрстай похожий интерфейс на HTML + CSS одним файлом.
Расположение блоков и цвета сохрани, тексты замени на рыбу.

Под React-проект:

Сделай компонент [название] на React, стили на Tailwind.
Отдай один файл компонента, без лишних зависимостей.

Поправить итерацией:

Поменяй акцентный цвет на [цвет].
Сделай адаптивно: на телефоне в одну колонку.
Кнопку крупнее и по центру. Отступы между карточками больше.

Задать стиль и тон:

Стиль: [минимализм / много воздуха / скруглённые углы].
Палитра: [2-3 цвета или hex]. Акцент: [цвет].
Тон: [дружелюбный / строгий]. Шрифт [с засечками / без].

Чек-лист перед стартом

Опиши экран конкретно

Какие блоки, какие кнопки, что за страница. Размыто на входе - размыто на выходе.

Задай стиль и палитру

2-3 цвета и настроение. Иначе получишь усреднённый дефолт.

Укажи формат кода

HTML+CSS или React, обычный CSS или Tailwind - как в твоём проекте.

Проверь адаптивность

Сузь окно или открой на телефоне. Прямо проси «адаптивно под мобилку».

Дай референс

Скриншот или «в стиле сайта X» работает быстрее, чем длинное описание.

Помни про логику

Claude делает вёрстку. Данные и действия кнопок подключают уже в проекте.

Куда дальше

Cursor - AI-редактор, чтобы вставить интерфейс в проект и доработать.
Claude Code - агент в терминале для многошаговых правок проекта.
Основы веба - что такое HTML, CSS и как устроена страница.
Генерация картинок - иконки, иллюстрации и фоны для интерфейса.
MCP-серверы - связка с Figma и другими инструментами.