Сайт без дизайн-системы: точка отсчёта

Текст

Промт: точка отсчёта — сайт без дизайн-системы

Это антипример урока, а не образец. Павел предупредил сразу:

Сразу скажу, что не надо будет давать ему делать сразу сайт без какой-нибудь дизайн-системы. Потому что он тогда будет делать примитивный сайт. Давайте сейчас покажу пример.

И после промта:

На основании этого он сделает страницу, которая на самом деле выглядеть будет практически так же, как у миллионов других людей, кто использует Claude. И если на старте вам может это показаться прикольно, вау! То спустя какое-то время вы будете видеть, что, слушайте, это вот точно сделано с нейросетью. И вот тут наша задача не просто сделать этот сайт, а сделать так, чтобы он чем-то отличался, чтобы он был уникальным.

Сделайте этот шаг, чтобы было с чем сравнить. Дальше — своя дизайн-система (пример 02) и та же страница в её стиле (пример 03).

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

Павел продиктовал голосом («Telesofler» — это Телесуфлёр):

Сделай мне, пожалуйста, посадочную страницу для нашего сервиса Telesofler и используй для этого стандартные скиллы клода, а не те, которые мы уже скачали.

Больше ничего не объяснял: Claude нашёл проект в памяти и взял тексты из описания сервиса. «Стандартные скиллы» — встроенные правила оформления Claude, без скачанных дизайн-скиллов и без дизайн-системы.

Как повторить у себя

Промт собран по уроку: у вас Claude проекта не знает, поэтому описание прикладываем файлом. Приложите 02 Исходник/01 Лендинг суфлёра — описание сервиса.md (или описание своего продукта по тем же разделам) и вставьте:

Сделай посадочную страницу для сервиса [название]. Описание сервиса — во вложении.
Используй стандартный скилл Claude frontend-design, скачанные дизайн-скиллы не бери.
Тексты бери из описания. Цифры, отзывы и логотипы клиентов не выдумывай.
Один файл index.html, чтобы открывался двойным щелчком.
Покажи превью и проверь, как страница выглядит на телефоне.

Что Павел сказал о результате

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

Правка словами — дословно

В ролик этот кусок не вошёл — оставили как пример, как править текст голосом.

Первая версия вышла с «Маком» и без приложения на компьютере. Павел продиктовал правку («маг» — это Mac):

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

Claude поменял «Мак» на «компьютер (Mac или Windows)», добавил карточку про приложение и нейросеть от Сбера, раздел «Текст откуда угодно» и в ответе перечислил, что именно изменил. Шаблон такой правки:

Поправь текст на сайте: [что сейчас] → [как должно быть]. Скажи, что именно изменил.

Что сделал Claude

• Первый экран: заголовок «Текст едет за вашим голосом» и живое демо экрана суфлёра — текст сам едет под метку, подсвечивается читаемое слово, демо само делает «стоп» и «назад». В демо можно кликнуть и управлять пробелом и стрелками.
• Дальше: цвета метки, схема «компьютер слушает, планшет показывает», голосовые команды, возможности, клавиши, запуск в четыре шага, частые вопросы, финальный призыв.
• Цифр и отзывов не выдумывал — брал только то, что есть в описании.
• Проверил страницу в браузере, нашёл и поправил слишком сжатый «барабан» в демо.
• Спросил, куда вести кнопку «Оставить заявку». Пока ответа нет, она ведёт на раздел «Запуск». Адрес меняется в одном месте — константа CTA_URL в конце файла.

Что проверить в своём результате

• Страница открывается двойным щелчком, на телефоне ничего не уезжает за край.
• Все тексты есть в вашем описании: чего там нет, Claude не должен был придумать.
• Кнопка ведёт туда, куда вы хотите: в бота, на почту, в форму.
• Положите рядом страницу по своей дизайн-системе (пример 03) и сравните шрифт, цвета и акценты: в чём ваш сайт перестал быть «как у всех».