AI Engineering / Тестовое задание / 2026
Инженерия процесса.
Структурированный процесс с AI: от HR-брифа к исследованию, дизайн-токенам и двум работающим прототипам.
Смотреть в GitHub01_agents/ role contracts 02_research/ product reasoning 03_tokens/ design_tokens.json 05_design_system/ component architecture 06_ui_design/ employee prototype 07_review/ validation notes 08_landing_page/ B2B prototype
Под контролем человека. С проверяемыми артефактами.
Задача была не только в дизайне HR-портала. Важно было сделать ход решений понятным: как бриф превращается в модель продукта, решения — в систему, а система — в работающий код.
01 / WORKFLOW
Процесс, который можно проверить
Шесть специализированных промптов структурируют работу. Контекст передаётся через файлы, а направление задают решения человека и этапы проверки. Это ролевые конфигурации, а не автономный сервис оркестрации.
02_research/*.md03_tokens/design_tokens.json06_ui_design + 07_review02 / PRODUCT MODEL
Один бриф. Два связанных продукта.
Работа с запросами сотрудников и B2B-лендинг для HR-аутсорсинга. Порталу нужны ясные роли, полный набор состояний и общая визуальная основа; лендингу — убедительная история для покупателя.
Сначала ответственность
Сотрудник создаёт запросы и отвечает. HR управляет обработкой и статусом. Интерфейс следует этой границе, не передавая сотруднику операторские функции.
Сначала токены
Примитивные, семантические и компонентные токены отделяют значения от назначения. Одна основа поддерживает портал и лендинг.
Сначала состояния
Восемь экранных артефактов охватывают пустой список, список, детали, создание, закрытие, решение, отсутствие результатов и перетаскивание.
03 / SYSTEM CONTRACT
Система вместо разрозненных значений
Фон боковой панели ссылается на семантический токен холста, а не отдельную тёмную тему. Проверка контраста также привела к более тёмным вариантам янтарного и изумрудного текста.
color.primitive.neutral.50#F5F7FAcolor.semantic.background.canvas{color.primitive.neutral.50}component.sidebar.background{color.semantic.background.canvas}04 / CODE EVIDENCE
Когда структура становится поведением
Избранные фрагменты реализации. HTML, CSS и JavaScript без фреймворка делают прототип понятным для проверки.
Контекст — явный вход
Роль архитектора токенов читает бриф и исследования, затем создаёт именованный артефакт. Передача контекста не скрыта в чате.
Analyze:
- brief.pdf
- 04_assets/brand/branding_color.png
- 02_research/research_ux_audit.md
- 02_research/product_design_direction.md
Create:
03_tokens/design_tokens.jsonОтвет продвигает запрос
Отправленный ответ меняет локальную модель. Ожидающие и решённые запросы возвращаются HR; для закрытого запроса записывается событие повторного открытия.
r.messages.push({ from: 'employee', text, time: 'Just now' });
if (r.status === 'waiting' || r.status === 'resolved')
r.status = 'with-hr';
else if (r.status === 'closed') {
r.status = 'with-hr';
r.messages.push({
from: 'system', text: 'Reopened by your reply'
});
}
render();Закрыть фон, а не форму
Кнопки внутри панели остаются доступными. Только прямой клик по затемнённому фону закрывает её.
if (e.target.classList.contains('scrim')) {
resetDraft();
navigate('/requests');
return;
}
const actionEl = e.target.closest('[data-action]');
if (!actionEl) return;
const action = actionEl.getAttribute('data-action');05 / DELIVERABLES
От артефактов к работающим прототипам
Прототип запросов поддерживает создание, фильтры, поиск и ответы. Лендинг включает запрос демо. Оба — фронтенд-демонстрации с локальным состоянием, без подключения к HR или CRM.
Запросы сотрудников
Открыть прототип ↗B2B-лендинг
Открыть прототип ↗06 / REFLECTION
Что показала проверка
Глубокое исследование и согласованная система важны, но не заменяют проверку взаимодействий и визуальное мастерство. Текущий код исправляет несколько ранних ошибок взаимодействия. Описание процесса всё ещё содержит прежний Figma-план и не является точным журналом выполнения.