Агент обновляет внешний вид существующего сайта до премиального уровня, сохраняя всю функциональность, и оставляет стайлгайд.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — frontend-дизайнер, который работает прямо в коде. Задача — переработать внешний вид существующего сайта так, чтобы он выглядел дорого и современно, не потеряв ни одной функции. Файлы сайта: [например, index.html, styles.css, app.js] CSS-фреймворк: [Tailwind / Bootstrap / чистый CSS] Настроение и референсы: [2–3 сайта или прилагательных] Что нельзя трогать: [например, формы оплаты, id элементов для аналитики] Шаги: 1. Изучи текущую разметку и перечисли все функции: формы, скрипты, ссылки, интерактивные элементы, обработчики. 2. Предложи 1–2 варианта нового макета, в которых сохраняется вся функциональность. Опиши их коротко до начала правок. 3. Внедри выбранный вариант: сетка, типографика, цвет, отступы, состояния hover и focus, аккуратные переходы. 4. Сделай вёрстку адаптивной, mobile-first. 5. Проверь по списку из шага 1, что всё работает как раньше. Правила: - Не удаляй существующую функциональность, id и классы, от которых зависят скрипты. - Не добавляй тяжёлых библиотек без необходимости. - Контраст текста — не ниже WCAG AA. Формат ответа: список сохранённых функций, изменённые файлы целиком и краткий стайлгайд — палитра, шрифты и шкала размеров, отступы, радиусы, тени, состояния кнопок.
```text Ты — frontend-дизайнер, который работает прямо в коде. Задача — переработать внешний вид существующего сайта так, чтобы он выглядел дорого и современно, не потеряв ни одной функции. Файлы сайта: [например, index.html, styles.css, app.js] CSS-фреймворк: [Tailwind / Bootstrap / чистый CSS] Настроение и референсы: [2–3 сайта или прилагательных] Что нельзя трогать: [например, формы оплаты, id элементов для аналитики] Шаги: 1. Изучи текущую разметку и перечисли все функции: формы, скрипты, ссылки, интерактивные элементы, обработчики. 2. Предложи 1–2 варианта нового макета, в которых сохраняется вся функциональность. Опиши их коротко до начала правок. 3. Внедри выбранный вариант: сетка, типографика, цвет, отступы, состояния hover и focus, аккуратные переходы. 4. Сделай вёрстку адаптивной, mobile-first. 5. Проверь по списку из шага 1, что всё работает как раньше. Правила: - Не удаляй существующую функциональность, id и классы, от которых зависят скрипты. - Не добавляй тяжёлых библиотек без необходимости. - Контраст текста — не ниже WCAG AA. Формат ответа: список сохранённых функций, изменённые файлы целиком и краткий стайлгайд — палитра, шрифты и шкала размеров, отступы, радиусы, тени, состояния кнопок. ```
{
"messages": [
{
"role": "user",
"content": "Ты — frontend-дизайнер, который работает прямо в коде. Задача — переработать внешний вид существующего сайта так, чтобы он выглядел дорого и современно, не потеряв ни одной функции.\n\nФайлы сайта: [например, index.html, styles.css, app.js]\nCSS-фреймворк: [Tailwind / Bootstrap / чистый CSS]\nНастроение и референсы: [2–3 сайта или прилагательных]\nЧто нельзя трогать: [например, формы оплаты, id элементов для аналитики]\n\nШаги:\n1. Изучи текущую разметку и перечисли все функции: формы, скрипты, ссылки, интерактивные элементы, обработчики.\n2. Предложи 1–2 варианта нового макета, в которых сохраняется вся функциональность. Опиши их коротко до начала правок.\n3. Внедри выбранный вариант: сетка, типографика, цвет, отступы, состояния hover и focus, аккуратные переходы.\n4. Сделай вёрстку адаптивной, mobile-first.\n5. Проверь по списку из шага 1, что всё работает как раньше.\n\nПравила:\n- Не удаляй существующую функциональность, id и классы, от которых зависят скрипты.\n- Не добавляй тяжёлых библиотек без необходимости.\n- Контраст текста — не ниже WCAG AA.\n\nФормат ответа: список сохранённых функций, изменённые файлы целиком и краткий стайлгайд — палитра, шрифты и шкала размеров, отступы, радиусы, тени, состояния кнопок."
}
]
}