Персональная страница в тёплой светлой гамме с эффектом стекла, блоками для постепенного наполнения и ссылкой на Telegram-канал.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — веб-дизайнер. Сделай страницу «Обо мне»: красивую, понятную и удобную. О человеке: [имя, род занятий, чем полезен посетителям] Ссылки: [Telegram-канал, соцсети, контакты] Язык и шрифты: [например: русский; или персидский — тогда подбери подходящие веб-шрифты] Стек: [HTML + CSS + JS / Next.js + Tailwind] Стиль: glassmorphism в светлой тёплой гамме, ощущение бумаги и ручки — полупрозрачные карточки с размытием фона, тёплые нейтральные тона, аккуратные тени. Эффект стекла дозированный: текст всегда на достаточно плотной подложке, контраст не ниже WCAG AA. Содержимое: 1. Вступление: фото или аватар, имя, одна фраза о себе. 2. Блоки-шаблоны, которые можно заполнять постепенно: навыки, проекты, опыт, текущие занятия. Пустой блок не показывается. 3. Блок Telegram-канала: ссылка, короткое описание и кнопка подписки. 4. Полезные для посетителей элементы: контакты, FAQ, последние публикации. Управление контентом: без логина для посетителей. Контент хранится в одном файле данных (JSON или Markdown), чтобы владелец обновлял страницу правкой файла; опиши, как это сделать. Требования: адаптивность от 320px, семантическая разметка, `prefers-reduced-motion`, fallback для браузеров без `backdrop-filter`. Формат: краткое описание решения, затем полный код, затем инструкция по обновлению контента.
```text Ты — веб-дизайнер. Сделай страницу «Обо мне»: красивую, понятную и удобную. О человеке: [имя, род занятий, чем полезен посетителям] Ссылки: [Telegram-канал, соцсети, контакты] Язык и шрифты: [например: русский; или персидский — тогда подбери подходящие веб-шрифты] Стек: [HTML + CSS + JS / Next.js + Tailwind] Стиль: glassmorphism в светлой тёплой гамме, ощущение бумаги и ручки — полупрозрачные карточки с размытием фона, тёплые нейтральные тона, аккуратные тени. Эффект стекла дозированный: текст всегда на достаточно плотной подложке, контраст не ниже WCAG AA. Содержимое: 1. Вступление: фото или аватар, имя, одна фраза о себе. 2. Блоки-шаблоны, которые можно заполнять постепенно: навыки, проекты, опыт, текущие занятия. Пустой блок не показывается. 3. Блок Telegram-канала: ссылка, короткое описание и кнопка подписки. 4. Полезные для посетителей элементы: контакты, FAQ, последние публикации. Управление контентом: без логина для посетителей. Контент хранится в одном файле данных (JSON или Markdown), чтобы владелец обновлял страницу правкой файла; опиши, как это сделать. Требования: адаптивность от 320px, семантическая разметка, `prefers-reduced-motion`, fallback для браузеров без `backdrop-filter`. Формат: краткое описание решения, затем полный код, затем инструкция по обновлению контента. ```
{
"messages": [
{
"role": "user",
"content": "Ты — веб-дизайнер. Сделай страницу «Обо мне»: красивую, понятную и удобную.\n\nО человеке: [имя, род занятий, чем полезен посетителям]\nСсылки: [Telegram-канал, соцсети, контакты]\nЯзык и шрифты: [например: русский; или персидский — тогда подбери подходящие веб-шрифты]\nСтек: [HTML + CSS + JS / Next.js + Tailwind]\n\nСтиль: glassmorphism в светлой тёплой гамме, ощущение бумаги и ручки — полупрозрачные карточки с размытием фона, тёплые нейтральные тона, аккуратные тени. Эффект стекла дозированный: текст всегда на достаточно плотной подложке, контраст не ниже WCAG AA.\n\nСодержимое:\n1. Вступление: фото или аватар, имя, одна фраза о себе.\n2. Блоки-шаблоны, которые можно заполнять постепенно: навыки, проекты, опыт, текущие занятия. Пустой блок не показывается.\n3. Блок Telegram-канала: ссылка, короткое описание и кнопка подписки.\n4. Полезные для посетителей элементы: контакты, FAQ, последние публикации.\n\nУправление контентом: без логина для посетителей. Контент хранится в одном файле данных (JSON или Markdown), чтобы владелец обновлял страницу правкой файла; опиши, как это сделать.\n\nТребования: адаптивность от 320px, семантическая разметка, `prefers-reduced-motion`, fallback для браузеров без `backdrop-filter`.\n\nФормат: краткое описание решения, затем полный код, затем инструкция по обновлению контента."
}
]
}