раздел 02

Дизайн в код

Красивая картинка - это хорошо, но в проект нужен код. Claude отдаёт именно его: не макет-изображение, а рабочую вёрстку. На входе - текст или скриншот, на выходе - HTML с CSS или компонент React.

Дизайн-в-код означает простую вещь: то, что вы увидели в предпросмотре, можно забрать кодом и вставить в свой сайт. Картинку - нельзя, код - можно.

Из текста в код

Опишите интерфейс словами - Claude сразу пишет вёрстку. Уточните формат, в котором хотите результат:

Свёрстай лендинг для кофейни: первый экран с заголовком и кнопкой,
блок «меню» из трёх карточек, футер с адресом.
Отдай как один HTML-файл со встроенным CSS, адаптивно под мобилку.

Или для проекта на React:

Сделай компонент карточки товара на React: картинка, название, цена,
кнопка «В корзину». Стили на Tailwind. Отдай один файл компонента.

Из скриншота в код

Прикрепите к сообщению картинку - скриншот чужого сайта, фото наброска, экран из Фигмы - и попросите повторить:

Вот скриншот экрана. Свёрстай похожий интерфейс на HTML + CSS.
Цвета и расположение блоков сохрани, тексты можешь заменить на рыбу.
1
Дайте вход
Текстовое описание или картинку-референс. Можно совмещать: «как на скриншоте, но кнопку сделай зелёной».
2
Задайте формат
HTML+CSS одним файлом или React-компонент. Скажите, какие стили - обычный CSS или Tailwind.
3
Опишите стиль и тон
Минимализм, тёмная тема, дружелюбный или строгий - см. ниже.
4
Заберите код
Claude отдаёт готовые файлы - их переносят в проект (раздел 03).

Промпты на стиль и тон

Без указаний Claude сделает аккуратно, но усреднённо. Чтобы получить нужный вид, опишите стиль прямо в промпте:

Стиль: минималистичный, много воздуха, скруглённые углы, мягкие тени.
Палитра: тёмно-синий и белый, акцент - оранжевый.
Тон: дружелюбный, без формализма.
Шрифт без засечек, заголовки крупные.
Задавайте палитру
Назовите 2-3 цвета или дайте hex-коды. Иначе получите дефолтные синие оттенки.
Задавайте настроение
Строгий банк, игривый стартап, спокойный медтех - тон сильно меняет результат.
Дайте референс
«В стиле сайта X» или скриншот - быстрее, чем описывать словами.

Что отдать в проект

Просите Claude отдать результат в удобном для переноса виде:

  • HTML + CSS одним файлом - проще всего: открыл в браузере, скопировал в проект.
  • React-компонент одним файлом - если ваш проект на React/Next.js.
  • С Tailwind или обычным CSS - уточните, что используется у вас, чтобы не переделывать.