Figma проекта https://www.figma.com/design/O1ZFkM0Ugian1oUkMcq8qX/Untitled?node-id=1733-5461&t=uwr78V10NVNWzq6F-1
🔒 ТЕХНИЧЕСКОЕ ЗАДАНИЕ
ФРОНТЕНД-ВЕРСТКА ПО МАКЕТУ FIGMA
(БЕЗ БЭКЕНДА / БЕЗ ЛОГИКИ / БЕЗ ХРАНЕНИЯ)
1. Цель работ
Сверстать пользовательский интерфейс сайта строго по макетам Figma (pixel-perfect)
❗ Исключительно фронтенд-верстка, без реализации серверной логики, хранения данных и бизнес-процессов.
Результат работ должен быть полностью готов к последующему подключению бэкенда, но не содержать его реализации.
2. Источник дизайна
Единственный источник истины — макеты Figma
Верстка выполняется 1 в 1:
размеры
отступы
шрифты
цвета
состояния элементов
Любые отклонения от Figma запрещены без согласования
3. Границы ответственности фронтенда (КРИТИЧНО)
🚫 Фронтенд НЕ ИМЕЕТ ПРАВА:
Фронтенд ТОЛЬКО отображает интерфейс.
4. Формы (ОБЯЗАТЕЛЬНО)
4.1 Поведение форм
Все формы:
верстаются строго по Figma
содержат визуальную валидацию (required, error-state)
НЕ СОХРАНЯЮТ данные
НЕ ОТПРАВЛЯЮТ данные на сервер
4.2 Отправка формы
При submit:
console.log('Form submit mock', formData);
❗ Используется JS-заглушка, без fetch / axios / API.
5. Списки, карточки, таблицы
5.1 Источник данных
Все списки верстаются статично
Данные захардкожены (mock-data)
Структура HTML должна быть готова под API
Пример:
<div class="items-list">
<!-- items from API later -->
</div>
❗ Никакой логики загрузки данных.
6. Авторизация / регистрация
6.1 Строго только UI
Верстка экранов входа / регистрации
Поля, кнопки, состояния ошибок — только визуально
Никакой проверки логина/пароля
6.2 Поведение
console.log('Auth UI only');
❗ НЕТ:
JWT
cookies
localStorage
ролей
доступа
7. Кнопки и действия
7.1 Все кнопки
7.2 Поведение кнопок
console.log('Button clicked');
8. Модальные окна / попапы
9. Адаптивность
Обязательные брейкпоинты:
Верстка строго по адаптивным макетам Figma
Самовольные решения запрещены.
10. Технические требования
11. Подготовка под бэкенд (НО БЕЗ ЕГО РЕАЛИЗАЦИИ)
Фронтенд обязан:
<!-- backend: data will be injected here -->
12. Критерии приёмки
Работа принимается если:
Верстка визуально совпадает с Figma
Нет сетевых запросов
Нет хранения данных
Нет бизнес-логики
Весь интерактив — заглушки
Код готов для подключения бэкенда
13. Запрещено без согласования
❌ Самостоятельно:
ВСЁ ДОЛЖНО РАБОТАТЬ И ВЫГЛЯДЕТЬ КАК В ФИГМЕ!