Дизайн-система презентации по референсу

Текст

Промт: дизайн-система по референсу

Павел надиктовал его голосом (запись 12-19-37, 5:45), поэтому текст как есть, с оговорками. Первая строка — ссылка на кейс SberTech; вместо неё поставьте свою.

https://www.behance.net/gallery/251530595/SberTech-Presentations
Посмотри, пожалуйста, и сделай из этого дизайн-систему в формате«атомы молекулы организма». Для того чтобы я на основании этого мог создавать любой дизайн презентации, сайты, да, что угодно.

Отдельно пропиши все ассеты, это фон, картинки, изображения, для того чтобы можно было эти вещи потом генерировать или создавать похожее с нейросетями.

Модель — Opus 5.5, режим — Extra: «Сейчас мы перейдём на режим, наверное, Extra, для того чтобы он продумал хорошенько» (8:07). Если переключили режим уже после отправки, допишите вдогонку «Доделай» — подробнее в гайде урока, раздел «Как подключить», пункт 2.

Что Claude сделал дальше сам

Больше Павел ничего не писал. Всё остальное Claude сделал по одному этому сообщению меньше чем за полчаса:

1. Скачал 13 кадров кейса и разобрал их вблизи.
2. Заменил чужой бренд: логотип и шрифт Сбера — на нейтральный знак «Лёд» и бесплатный шрифт Manrope.
3. Собрал токены: цвета двух тем, шрифты, отступы, радиусы, тени и свечения.
4. Из токенов собрал 12 атомов, из атомов 12 молекул, из молекул 15 организмов: 10 типов слайдов и 5 блоков сайта. Сверху — 4 шаблона: тёмная и светлая презентации, лендинг, пост 4:5.
5. Нарисовал 7 фонов и 2 набора кристаллов в SVG. На каждый ассет написал промт для нейросети.
6. Проверил контраст текста скриптом, снял шаблоны скриншотами и поправил ошибки вёрстки.

Первые демо-тексты в шаблонах Claude пересказал из кейса. Потом мы заменили их на свои — о сервисе Калита, с цифрами из открытых исследований. Стиль остался от референса, тексты теперь наши. Так же сделайте и вы: попросите «замени демо-тексты на тексты о моём продукте».

Всё, что получилось, собрано в одну страницу: 04 Результат/01 Дизайн-система Лёд.html. Откройте её в браузере: палитра, шрифт, кнопки, карточки, слайды и шаблоны, тёмная и светлая темы.

Если Claude не открывает ссылку

Behance часто не отдаёт страницу программам. Тогда:

• дайте Claude доступ к браузеру (урок про подключение браузера) — он откроет страницу как вы;
• или сохраните 5–10 кадров кейса скриншотами в рабочую папку и приложите их к промту вместо ссылки. Кадры нашего референса уже лежат в 02 Исходник/01 Референс SberTech.pdf: 13 кадров, автор и ссылка на первой странице.

Чтобы получилось как у нас

• Просите именно «атомы, молекулы, организмы»: так Claude собирает систему снизу вверх, и из неё потом собирается любой слайд или экран.
• Сразу просите описать ассеты для нейросетей. Тогда фоны и 3D-объекты в том же стиле можно догенерировать в ChatGPT или Nano Banana — как в примере 03 «Презентация в Лёде».
• Если у референса фирменный шрифт, попросите замену с кириллицей из Google Fonts: Manrope, Onest, Golos Text, Geologica.