Разовая задача: по готовому функциональному ТЗ и референс-экранам собрать финальные макеты всех экранов веб-системы в статичном HTML/CSS/JS. Результат — комплект готовых экранов с проработанными состояниями, из
которых дальше вырастет боевой UI. Дизайн + вёрстка в одном.
Что за продукт
Веб-платформа для проведения строительных/закупочных тендеров: тендерный специалист собирает коммерческие предложения (КП) от поставщиков в одном окне, поставщики подают КП через личный кабинет, система сводит
всё в сравнительную таблицу. Внутренний b2b-инструмент, не лендинг.
Объём работы (результат на выходе)
Комплект из ~18–22 HTML-экранов, сгруппированных по бизнес-сценариям, с единым UI-китом (типографика, сетка, таблицы, формы, карточки, бейджи статусов, боковое меню, модалки) и с проработкой состояний каждого
экрана: пусто / заполнено / загрузка / ошибка / нет доступа / ключевые статусы (черновик, отправлено, на рассмотрении, ок/не ок).
Список экранов
A. Каркас: вход, боковое меню, дашборд, дерево «портфель — проект — подпроекты», страница проекта.
B. Тендеры: реестр тендеров с фильтрами и выгрузкой в Excel; рабочее пространство тендера (автосводка КП, сравнение поставщиков бок-о-бок, прогресс, лента изменений); сравнительная таблица (итоги по разделам,
сворачивание, версии КП, подсветка мин/макс и отклонений цен); панель ИИ-подсказок поверх таблицы.
C. КП: входящие «почтовый ящик» (список с выделением новых, фильтры); карточка КП (контрагент, сумма, сроки, вложения, история версий, комментарии); загрузка Excel-шаблона с превью онлайн-формы.
D. Поставщики (внутренний контур): реестр контрагентов и карточка поставщика (реквизиты, анкета, участие в тендерах, лента, согласие на ПДн); экран квалификации с отметкой «ок / не ок».
E. Поставщик (внешний контур): квалификационная анкета (публичная форма самозаполнения + финансовый блок + согласие на ПДн); личный кабинет поставщика (подача КП по персональной ссылке, только свои поля,
автоитоги, кнопка «Подать»).
F. Справочники и отчёты: справочник видов работ, аналитика с выгрузкой в Excel, админка ролей и прав.
G. Информационная безопасность (второй блок, объём уточним): MFA-вход админа, журнал событий, экран инцидентов, маскирование финансового блока.
Технические требования к результату
– Статичный HTML/CSS/JS без сборки (без React/Vue/webpack), открывается двойным кликом по файлу.
– Семантичная вёрстка, десктоп-адаптив (это рабочий инструмент), единый набор переиспользуемых компонентов.
– Простой интерактив на vanilla JS для демонстрации состояний (табы, разворачивание разделов таблицы, открытие карточки).
Что предоставляю для работы
– Детальное функциональное ТЗ по блокам (что за экран, что на нём происходит, критерии).
– 6 готовых демо-экранов как референс стиля — их приводим к единому UI.
– Список экранов и состояний.
Про сроки и оценку
Задача под готовое детальное ТЗ и с референсами, отлично ускоряется современными AI-инструментами (Claude Code, Cursor, v0 и т.п.) — их использование приветствуется. Ориентир по сроку — 1–2 недели на весь
комплект. Оценку стоимости за весь объём предложите сами, исходя из этого; бюджет как за ручную попиксельную отрисовку 20 экранов с нуля здесь не закладывается.
Что приложить к отклику
– 2–3 примера реальных реализованных интерфейсов (дашборды, CRM, админки, b2b-системы), не только концепты.
– Срок и стоимость за весь объём.
– По желанию — тестовый экран из блока B (сравнительная таблица) или E (анкета), решённый по этому описанию.
Приёмка поэкранно, группами A–G.
Опубликован 06.07.2026 в 10:41