Тот же сайт в другой дизайн-системе

Текст

Промт: тот же сайт в другой дизайн-системе

Исходник — сайт из примера 01 (04 Результат/01 Лендинг суфлёра.html) и две дизайн-системы из примера 02 (04 Результат/02 Дизайн-система Granit.html и 04 Результат/04 Дизайн-система Volt.html). Из сайта Claude берёт всё содержание, меняется только оформление.

Как давал Павел — дословно

Одним сообщением Павел попросил две вещи: выложить готовый сайт на хостинг (это пример 06) и сделать ещё две версии в других стилях:

Итак в параллельных чатах ты уже сделал нам сайт для телесуфлёра. Теперь возьми, пожалуйста, вот этот вот сайт и загрузи на наш хостинг. В ещё одном параллельном чате я тебе уже всё-все данные по хостингу прислал, ты можешь через браузер открыть и всё дальше настроить. Следующая задача— параллельно её делай. Возьми вторую дизайн-систему, которую мы тоже разбирали в параллельном чате, и для неё сделай такой же сайт, только уже во втором стиле. И у нас ещё есть третья дизайн-система. Сделай третий сайт в её стиле. И таким образом у тебя будут на нашем домене сайты с основной, который ты уже сделал, Второй сайт— это он будет находиться на странице Slash 2, третий сайт на странице Slash 3. Вот мне на выходе нужно от тебя три страницы в разных дизайн-системах. Как будет готово, присылай мне ссылки на эти страницы.

«Slash 2» — это адрес /2/: основная версия в корне сайта, вторая по адресу сайт.ru/2/, третья — сайт.ru/3/.

Как Claude расписал задачу помощнику

Claude запустил двух помощников параллельно — по одному на дизайн-систему — и каждому дал подробное задание. Его удобно взять целиком как свой промт. Пути и названия заменены на [квадратные скобки], служебные детали (порт, имена инструментов) убраны:

Ты делаешь вторую версию лендинга сервиса [название] (всё по-русски). Одна страница, чистый HTML/CSS/JS.

ИСХОДНИК СОДЕРЖАНИЯ: [папка сайта]/index.html — основная версия (её НЕ трогай). Прочитай целиком. Возьми из неё ВСЁ содержание: все секции, тексты, порядок, демо и его поведение, кнопку CTA с константой CTA_URL, якоря. Тексты не переписывай, только если стиль требует короче заголовки — тогда сократи заголовок, смысл сохрани.

ДИЗАЙН-СИСТЕМА: [папка дизайн-системы] (DESIGN.md, kit/*.css, kit/*.js, kit/icons.svg, kit/fonts/*.woff2). Сначала прочитай DESIGN.md и CSS целиком — используй её классы и токены, правила цвета, типографику, иконки спрайтом. Папку дизайн-системы НЕ меняй — скопируй нужные файлы к себе. Если какого-то компонента в kit нет — допиши стили в своём файле на токенах системы.

КУДА: [папка сайта]/2/ → index.html + подпапка assets/ (копии css, js, icons.svg, fonts/). Все пути ОТНОСИТЕЛЬНЫЕ (страница будет жить по адресу https://…/2/). Никаких внешних CDN — шрифты локально из kit. Проверь, что в CSS пути к шрифтам совпадают с твоей раскладкой.

Качество: адаптив до 360px без горизонтального скролла, фокус с клавиатуры, prefers-reduced-motion. Картинок-фото нет — не выдумывай стоковых, используй типографику и приёмы системы.

ПРОВЕРКА (обязательно, сам): открой страницу в браузере. Скриншоты на компьютере и на ширине 375, консоль без ошибок, шрифты реально загрузились, демо работает, меню на телефоне открывается. Исправь найденное.

НЕ выкладывай на сервер. В конце — короткий отчёт: что сделано, какие компоненты системы использованы, что пришлось дописать, что проверено и чем.

Для третьей версии — то же задание с другой дизайн-системой и папкой /3/.

Короткий вариант для себя

Промт собран по уроку:

Возьми сайт из папки [папка сайта] и сделай две его копии в других стилях:
/2 — по дизайн-системе из папки [дизайн-система 1], /3 — по дизайн-системе из папки [дизайн-система 2].
Содержание, тексты и демо не меняй — меняется только оформление. Правила каждой системы — в её DESIGN.md.
Все пути относительные, шрифты положи рядом с сайтом. Делай обе версии параллельно.
Проверь каждую на компьютере и на телефоне (ширина 375) и пришли скриншоты.

Что получилось

• Volt (/2/): чёрный фон, лаймовый акцент, крупные заголовки капсом. Демо суфлёра перенесено целиком.
• Granit (/3/): тёмный фон, спокойный крупный текст Golos, песочно-жёлтая кнопка. Демо сделано по готовому «экрану суфлёра» из самой дизайн-системы. Помощник попутно исправил три мелких сбоя вёрстки, которые были и в шаблоне Granit.
• Claude сам проверил обе версии на компьютере и на телефоне: шрифты загружены, ошибок в консоли нет, вбок ничего не уезжает.
• Одну мелочь оставил на решение: в Granit на ноутбуке 1440×900 большой заголовок сдвигает кнопки демо ниже первого экрана.
• Все три страницы Павел показал по временному (тестовому) адресу хостинга, пока домен ещё настраивался. Сравнил их в кадре: «благодаря тому, что мы использовали разные дизайн-системы, у нас три разных сайта». Больше всего ему понравилась Granit — «вот этот вот с красивой типографикой».

Результат: 04 Результат/03 Лендинг в Granit.html и 04 Результат/05 Лендинг в Volt.html. Обе страницы открываются двойным щелчком, шрифты встроены. Сайту в этих версиях уже дано имя «Текстовод»: к этому моменту Павел выбрал имя (пример 05).