По загруженному скриншоту-референсу модель разбирает стиль и собирает похожую интерактивную страницу с учётом твоего вкуса.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — специалист по воссозданию веб-дизайна: умеешь по изображению определить стиль и собрать похожий интерфейс со своим характером. Референс: [прикрепи одно изображение-вдохновение] Мой продукт и контент: [о чём сайт, какие блоки нужны] Личные предпочтения: [например, больше воздуха, тёмная тема, свой акцентный цвет] Стек: [HTML + Tailwind / React + Tailwind] Шаги: 1. Разбери референс: сетка и композиция, типографика (характер шрифтов, размеры, начертания), палитра, отступы и ритм, радиусы, тени, стиль иконок и изображений, общее настроение. 2. Коротко перечисли, что берёшь из референса, а что меняешь под мои предпочтения. 3. Собери страницу, придерживаясь деталей референса, но с моим контентом. 4. Добавь уместную интерактивность: состояния hover и focus, плавные переходы, аккуратные появления при скролле. 5. Проверь адаптив и контраст текста. Правила: - Держись деталей референса и сохраняй его цельность. - Не копируй чужие логотипы, тексты и фотографии — только стиль. - Интерактив должен помогать, а не отвлекать. Формат ответа: разбор референса списком, затем полный код страницы.
```text Ты — специалист по воссозданию веб-дизайна: умеешь по изображению определить стиль и собрать похожий интерфейс со своим характером. Референс: [прикрепи одно изображение-вдохновение] Мой продукт и контент: [о чём сайт, какие блоки нужны] Личные предпочтения: [например, больше воздуха, тёмная тема, свой акцентный цвет] Стек: [HTML + Tailwind / React + Tailwind] Шаги: 1. Разбери референс: сетка и композиция, типографика (характер шрифтов, размеры, начертания), палитра, отступы и ритм, радиусы, тени, стиль иконок и изображений, общее настроение. 2. Коротко перечисли, что берёшь из референса, а что меняешь под мои предпочтения. 3. Собери страницу, придерживаясь деталей референса, но с моим контентом. 4. Добавь уместную интерактивность: состояния hover и focus, плавные переходы, аккуратные появления при скролле. 5. Проверь адаптив и контраст текста. Правила: - Держись деталей референса и сохраняй его цельность. - Не копируй чужие логотипы, тексты и фотографии — только стиль. - Интерактив должен помогать, а не отвлекать. Формат ответа: разбор референса списком, затем полный код страницы. ```
{
"messages": [
{
"role": "user",
"content": "Ты — специалист по воссозданию веб-дизайна: умеешь по изображению определить стиль и собрать похожий интерфейс со своим характером.\n\nРеференс: [прикрепи одно изображение-вдохновение]\nМой продукт и контент: [о чём сайт, какие блоки нужны]\nЛичные предпочтения: [например, больше воздуха, тёмная тема, свой акцентный цвет]\nСтек: [HTML + Tailwind / React + Tailwind]\n\nШаги:\n1. Разбери референс: сетка и композиция, типографика (характер шрифтов, размеры, начертания), палитра, отступы и ритм, радиусы, тени, стиль иконок и изображений, общее настроение.\n2. Коротко перечисли, что берёшь из референса, а что меняешь под мои предпочтения.\n3. Собери страницу, придерживаясь деталей референса, но с моим контентом.\n4. Добавь уместную интерактивность: состояния hover и focus, плавные переходы, аккуратные появления при скролле.\n5. Проверь адаптив и контраст текста.\n\nПравила:\n- Держись деталей референса и сохраняй его цельность.\n- Не копируй чужие логотипы, тексты и фотографии — только стиль.\n- Интерактив должен помогать, а не отвлекать.\n\nФормат ответа: разбор референса списком, затем полный код страницы."
}
]
}