От дизайна страницы до рабочего сайта, даже если вы никогда не программировали.
Лучшие инструменты для этого
Прочитайте эти главы
Claude · Глава 3.1 · 3 мин чтенияClaudeОт дизайна к настоящему сайту
Claude · Глава 3.5 · 3 мин чтенияClaudeЧто такое Claude Code
Claude · Глава 6.1 · 3 мин чтенияClaudeCanvas: тексты и код рядом с чатом
ChatGPT · Глава 1.10 · 3 мин чтенияChatGPTCanvas
Gemini · Глава 1.11 · 3 мин чтенияGemini
Готовые промпты для копирования
Спроектировать посадочную страницу для моей услуги
Цель. Страница, которая объясняет мою услугу, побуждает людей связаться со мной и выглядит профессионально.
Открыть. Claude Design (платный тариф); ваша дизайн-система, если она есть.
Посадочная страница для [услуга] от [название бизнеса], для [кого]. Сначала ширина компьютера, затем версия для телефона. Разделы сверху вниз: заголовок, который называет главную пользу меньше чем в 8 словах; одна строка под ним; одна большая область для картинки; три короткие причины выбрать нас; простое «как это работает» в 3 шага; один отзыв клиента; цены или «от [сумма]»; блок контактов с [телефон / email / форма]. Стиль: [тёплый / чистый / смелый], цвета [бренд или предложи], скруглённые кнопки. Одна понятная кнопка призыва к действию, повторённая дважды. Скажи, что ты предположил, чтобы я мог заменить заглушки.
Что вы получите · Осторожно
Что вы получите. Страница на холсте, затем макет для телефона; Claude перечисляет свои допущения.
Осторожно. Напишите заголовок и три причины до начала работы. Перед выгрузкой замените все заглушки (часы работы, адрес, отзыв). Если застряли: главы 3.1, 3.2.
Цель. Посадочная страница, которую я спроектировал, становится настоящим сайтом, который можно выложить в интернет.
Открыть. Claude Design (для передачи макета), затем Claude Code (Part 6), платный тариф; пустая папка.
Сделай по этому макету простой статический сайт: одна страница, HTML и CSS, без фреймворков, быстро грузится на телефонах. Сохрани расположение, цвета и текст точно как в макете. Замени заглушки: часы работы [часы], адрес [адрес], телефон [телефон], email [email]. Сделай так, чтобы кнопки работали: Order (Заказать) открывает [ссылка], Menu (Меню) прокручивает к разделу меню, Visit us (Как нас найти) открывает ссылку на карту. Запусти сайт у меня на компьютере и дай адрес, который нужно открыть. Затем простыми словами расскажи о трёх способах выложить его в интернет и сколько стоит каждый.
Что вы получите · Осторожно
Что вы получите. Папка с сайтом, адрес для локального просмотра и объяснение вариантов хостинга.
Осторожно. Хостинг — отдельный шаг с небольшой оплатой; решите это до начала работы. Меняйте макет и передавайте его заново, а не правьте сайт вручную. Если застряли: главы 3.5, 6.1.
Цель. Мои товары выложены в интернет-магазине, с описаниями, за полдня.
Открыть. Cowork с коннектором Shopify (платный тариф); аккаунт магазина; фото товаров в папке или в приложении к сообщению. *Нужен инструмент вне Claude.*
Я продаю [что] для [кого]. Голос бренда: [3 слова]. Вот мои товары: [название, цена, размеры/варианты, по 2 факта о каждом] и фото. 1. Напиши для каждого название, описание на 60 слов и 3 факта списком, моим голосом. 2. Покажи мне их все в таблице на утверждение. 3. После моего утверждения создай товары в магазине через коннектор, в коллекции [название], как черновики (не опубликованные). 4. Скажи, чего не хватает, чтобы я мог опубликовать (доставка, налоги, правила).
Что вы получите · Осторожно
Что вы получите. Таблица на утверждение, затем товары-черновики в магазине и список дел перед запуском.
Осторожно. Создавайте черновики; публикуйте сами после проверки цен. Факты о материалах и размерах должны идти от вас, а не быть придуманы. Если застряли: главы 1.9, 2.10.
