Сайт уровня дизайн-студии с помощью Claude

Оформи на claude.ai подписку с доступом к модели Opus 5.5. Какие тарифы её включают, смотри на странице claude.com/pricing.

Без этого скиллы не работают.

1. В Claude нажми на своё имя или кружок с инициалами в левом нижнем углу.
2. В появившемся меню выбери Настройки (Settings).
3. Слева открой вкладку Возможности (Capabilities).
4. Найди пункт про выполнение кода и создание файлов (Code execution and file creation) и включи переключатель рядом с ним.

Скилл это набор инструкций, который превращает Claude в специалиста по одной задаче. Эти три отвечают за вкус в дизайне, плавность анимаций и готовые дизайн-решения. Claude сам скачает их и упакует в файлы.

1. В Claude открой новый чат (кнопка «New chat» слева вверху) и вставь этот промпт:

2. Скачай три ZIP-файла, которые пришлёт Claude.
3. В Claude в меню слева открой Customize → Skills, нажми +, выбери Create skill, затем Upload a skill и загрузи первый ZIP.
4. Повтори для двух остальных. В списке появятся design-taste-frontend, emil-design-eng и ui-ux-pro-max.

1. В Claude создай новый чат (кнопка «New chat» слева вверху) только для сайта. Не смешивай его с другими задачами.
2. В меню выбора модели (под полем ввода) выбери Opus 5.5.

Чем больше дашь сразу, тем меньше будет правок. Чего нет, Claude заменит метками, их можно заполнить потом.

• Что продаёшь, кому и главная мысль в одном предложении
• Старый сайт, если есть: ссылка или его код
• Фирменные цвета, шрифты, логотип
• 2-5 скриншотов сайтов, которые нравятся (референсы)
• Тарифы: названия, цены, что входит, ссылки на оплату, рассрочка
• Программа или список услуг
• Картинки для сайта: фото, скрины работ, отзывы, доказательства результатов
• Контакты: Telegram, почта
• Реквизиты продавца и ссылки на оферту, политику конфиденциальности и согласие на обработку данных

Скопируй, заполни строки в квадратных скобках и отправь в Claude в новый чат из шага 4 вместе с материалами из шага 5. Их можно прикрепить файлами и скриншотами.

• Отвечай конкретно. Не знаешь, так и пиши: Claude поставит метку.
• Выбирай стиль по картинкам. Пиши, что нравится и что нет: «цвета из варианта 2, шрифт из 4, фон светлее». Скриншот с пометкой работает лучше всего.
• Анимации включены по умолчанию. Плавное появление блоков, «живые» картинки, эффекты при наведении. Если что-то хочется спокойнее, так и напиши: «убери движение картинок в карусели».
• Правки маленькими шагами. Одно-три изменения за раз, иначе что-то потеряется.
• Хочешь коротко? Напиши: «исправляй молча, без извинений и объяснений, коротко отвечай "ок"».
• Не нравится совсем? Скажи прямо и пришли 2-3 референса. Стиль «Изибота» нашли примерно за 10 кругов правок, и это нормально.

Когда черновик устраивает полностью, напиши Claude: «Всё ок, пришли готовый сайт одним файлом». Claude пришлёт HTML-файл.

• Скачай его и открой двойным щелчком: сайт откроется в браузере, со всеми анимациями.
• Внутри этого файла и есть код твоего сайта. Сохрани его, он понадобится дальше.

1. Зарегистрируйся в SaleBot по ссылке: ПРОСТО НАЖМИ
2. Создай новый проект. При создании введи промокод ИЗИБОТ.

1. В проекте в меню слева открой раздел «Сайты» и создай сайт.
2. Создай в нём страницу, нажми «+» и добавь блок «HTML».
3. В блоке два поля: для HTML-кода и для CSS-кода. Пока оставь их пустыми, вкладку не закрывай.

Картинки для сайта в SaleBot хранятся в разделе «Файлы». Загрузи их туда, тогда Claude вставит в код готовые ссылки.

1. В проекте в меню слева открой раздел «Файлы».
2. Загрузи туда все картинки сайта: логотип, фото, скрины работ, отзывы.
3. Скопируй ссылку на каждый файл и сложи их в заметку в формате «что это — ссылка».

1. Найди файл salebot-landing.zip, который ты скачал(а) в боте.
2. Вернись в Claude. В меню слева открой Customize → Skills, нажми +, выбери Create skill, затем Upload a skill и загрузи этот ZIP, так же как три скилла в шаге 3.
3. В списке появится salebot-landing.

В Claude открой тот же чат, где делал(а) сайт, и отправь этот промпт со списком ссылок из шага 12:

1. Вернись в SaleBot к странице с HTML-блоком из шага 11.
2. На странице с кодом от Claude нажми «Скопировать HTML» и вставь в SaleBot в поле HTML (Cmd+V или Ctrl+V).
3. В Claude нажми «Скопировать CSS» и вставь в SaleBot в поле CSS.
4. Сохрани и открой сайт.

• Сайт на всю ширину экрана, без пустых полей по бокам
• Шапка остаётся наверху при прокрутке
• Блоки плавно появляются при прокрутке, кнопки и карточки мягко реагируют на курсор
• Все картинки видны, по клику открываются, карусели листаются
• Кнопки оплаты ведут на правильные тарифы
• С телефона ничего не вылезает за край, меню и тарифы читаются
• Внизу стоят реквизиты и ссылки на документы

Сделай скриншот, вернись в Claude в тот же чат и опиши, что видишь: