УНИВЕРСАЛЬНЫЙ ПРОМТ: САЙТ-ПОРТФОЛИО С НУЛЯ
Karas Studio · t.me/karas_studio

Как пользоваться:
1. Откройте приложение Claude и включите режим Cowork. Подключите пустую папку, в которой будет жить сайт.
2. Скопируйте весь текст ниже (от строки «=== НАЧАЛО ПРОМТА ===» до конца) и отправьте одним сообщением.
3. Отвечайте на вопросы Claude и прикладывайте файлы, когда он попросит. Дальше он поведёт вас по шагам.

=== НАЧАЛО ПРОМТА ===

Ты — опытный веб-разработчик и арт-директор. Помоги мне сделать сайт-портфолио с нуля и выложить его в интернет на собственный домен. Я дизайнер и не пишу код, поэтому объясняй всё простыми словами, без терминов, а там, где нужно моё действие (регистрация, оплата, кнопки), давай короткие пошаговые инструкции.

КАК МЫ РАБОТАЕМ
— Идём строго по этапам из плана ниже. В начале каждого этапа коротко говори, что будем делать, а в конце — что сделано и что дальше.
— Перед началом работы задай мне вопросы из этапа 1. Не начинай делать сайт, пока не получишь ответы и контент.
— После каждого заметного изменения сам открывай сайт в браузере на ширине компьютера (1440 px) и телефона (390 px), смотри скриншоты и исправляй косяки до того, как показать мне.
— Если решение спорное, предлагай 2–3 варианта, а я выберу.
— Первая версия не будет идеальной, это нормально. Дальше мы будем дорабатывать сайт моими правками: я буду присылать скриншоты и списки «1. … 2. … 3. …».
— Никогда не проси меня писать пароли, коды подтверждения или данные карты в чат. Такие действия я делаю сам.

ЭТАП 1. ВОПРОСЫ И КОНТЕНТ
Спроси у меня:
1. Кто я: профессия, город, название бренда или имя.
2. Какие нужны разделы. По умолчанию: главная (первый экран, избранные проекты, обо мне, контакты), все проекты, страница проекта. Опционально: галерея одиночных работ (плакаты, иллюстрации), статьи.
3. Стиль: 3–5 слов про бренд, цвета (коды), шрифты, логотип (SVG). Попроси фрейм или подборку с логотипом и моими работами — это главный референс, интерфейс должен продолжать этот стиль.
4. Референсы: 3–5 скриншотов или ссылок и что из каждого взять — механику, композицию или настроение.
5. Где лежат проекты. Если они на Behance или Dprofile — возьми тексты и картинки оттуда сам по ссылке. Если в папке — попроси её.
Для каждого проекта нужны обложка, слайды, название, подзаголовок в одну строку, год, клиент и теги. Ещё нужны текст «Обо мне», фото, список услуг и контакты.
Проверь, чего не хватает, и составь мне короткий список.

ЭТАП 2. ПЛАН И ПЕРВАЯ ВЕРСИЯ
— Покажи план: какие будут страницы и что на каждой. Дождись моего «ок».
— Технические требования (их не нужно мне объяснять, просто соблюдай):
  · обычный статичный сайт на HTML, CSS и JavaScript, без фреймворков, без сборки и без конструкторов;
  · весь контент (проекты, тексты, контакты) лежит в одном файле с данными, чтобы новый проект можно было добавить, не трогая вёрстку;
  · все обложки приведены к одной пропорции, картинки сжаты в webp;
  · сайт работает, если открыть index.html двойным кликом;
  · черновики (draft: true) на сайте не показываются;
  · служебные файлы лежат в папках, которые начинаются с «_».
— Собери первую версию всех страниц на моём контенте и покажи скриншоты.

ЭТАП 3. ДОРАБОТКА
— Я присылаю правки, ты исправляешь и проверяешь себя на компьютере и телефоне.
— Отдельно предложи идею для первого экрана, которая продолжает мой бренд (не просто большая картинка). Если я пришлю ссылку на фрейм в Figma, перенеси раскладку оттуда: каждый объект — отдельная картинка с прозрачным фоном.

ЭТАП 4. ТЕЛЕФОН И ТЕМЫ
Проверь и доведи мобильную версию:
— шапка низкая: логотип слева, кнопка меню справа, всё второстепенное — внутри меню;
— проекты по две в ряд, обложки не обрезаются;
— если первый экран интерактивный, внизу есть кнопка «вниз»;
— карусели листаются свайпом влево-вправо, вертикальный свайп прокручивает страницу;
— кнопки не меньше 34 px.
Если делаем светлую тему, акцентный цвет не должен стоять на светлом фоне — проверь все страницы.

ЭТАП 5. ПОДГОТОВКА К ПУБЛИКАЦИИ
Спроси, какой будет домен, и сделай:
— картинку-превью 1200×630 и мета-теги для соцсетей и Telegram на всех страницах;
— favicon и apple-touch-icon;
— страницу 404 в стиле сайта;
— sitemap.xml и robots.txt;
— скрипт публикации, который собирает чистую копию сайта в папку репозитория GitHub, без черновиков и служебных файлов.

ЭТАП 6. GITHUB
Проведи меня по шагам:
1. Регистрация на github.com (я делаю сам).
2. Создание публичного репозитория для сайта.
3. Установка GitHub Desktop (desktop.github.com) и вход в аккаунт.
4. Клонирование репозитория в папку на компьютере (подскажи какую).
5. Сборка сайта скриптом публикации в эту папку.
6. Commit и Push в GitHub Desktop.

ЭТАП 7. ХОСТИНГ: TIMEWEB CLOUD APP PLATFORM
Проведи меня по шагам (timeweb.cloud/services/apps):
1. Регистрация и пополнение баланса (я делаю сам).
2. App Platform → Добавить → GitHub. Доступ — только к репозиторию сайта (Only select repositories).
3. Настройки: тип Frontend, фреймворк HTML/CSS/JS без сборки, ветка main, папка с сайтом — корень, автодеплой включён, регион Москва, минимальный тариф.
4. Дождаться статуса «Успешно» и проверить технический адрес вида *.twc1.net.
Если деплой упал, попроси у меня скриншот логов и разберись.

ЭТАП 8. ДОМЕН И SSL
1. Помоги выбрать и проверить свободный домен. Покупку и паспортные данные я ввожу сам. Удобно купить домен там же, в Timeweb.
2. Привязка домена к приложению в настройках App Platform.
3. Выпуск бесплатного SSL-сертификата Let's Encrypt.
4. Предупреди, что новый домен начинает открываться через 15 минут — несколько часов. Если не открывается, проверяй по порядку: статус деплоя → технический адрес → DNS (A-записи @ и www на IP приложения) → SSL. И только потом советуй писать в поддержку.

ЭТАП 9. КАК ОБНОВЛЯТЬ САЙТ
В конце напиши мне короткую памятку:
— как добавить новый проект;
— как собрать сайт для публикации;
— Commit → Push → через минуту сайт обновится;
— если на телефоне видна старая версия, закрыть вкладку и открыть сайт заново.

Начни с этапа 1: задай мне вопросы.

=== КОНЕЦ ПРОМТА ===