AI Engineering / Recruitment test task / 2026
Engineering the workflow.
A structured AI-assisted workflow that turns an HR brief into research, design tokens and two coded prototypes.
View in 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
Human-directed. Artifact-driven. Reviewable.
The challenge was not just to design an HR portal. It was to make the reasoning traceable: how a brief becomes a product model, how decisions become a system, and how that system becomes working code.
01 / WORKFLOW
A workflow you can inspect
Six specialist prompt briefs organize the work. Files pass context between stages; human decisions and review gates control the direction. These are role configurations—not an autonomous orchestration service.
02_research/*.md03_tokens/design_tokens.json06_ui_design + 07_review02 / PRODUCT MODEL
One brief. Two connected products.
An employee request experience and a B2B landing page for HR outsourcing firms. The portal needed clear ownership, complete request states and a shared visual foundation; the landing page needed a credible buyer narrative.
Ownership before interface
Employees submit and reply. HR owns triage and status. The product model follows that boundary instead of exposing operator controls to employees.
Tokens before screens
Primitive, semantic and component tokens separate raw values from intent. The same foundation supports the portal and the landing page.
States before happy paths
Eight screen artifacts cover empty, list, detail, creation, closed, resolved, no-results and drag states—not just one polished screen.
03 / SYSTEM CONTRACT
A system, not scattered values
The sidebar references the canvas semantic token rather than a separate dark theme. Contrast review also led to darker text variants for amber and emerald states.
color.primitive.neutral.50#F5F7FAcolor.semantic.background.canvas{color.primitive.neutral.50}component.sidebar.background{color.semantic.background.canvas}04 / CODE EVIDENCE
Where structure becomes behavior
Selected excerpts from the submitted implementation. Vanilla HTML, CSS and JavaScript keep the prototype readable and easy to inspect.
Context is an explicit input
The token role reads the brief and upstream research, then writes a named artifact. The handoff is explicit rather than hidden in a chat session.
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.jsonA reply moves the request forward
A submitted reply updates the local request model. Waiting and resolved requests return to HR; a closed request records a reopening event.
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();Close the backdrop—not the form
Delegated controls remain clickable inside the drawer. Only a direct click on the scrim closes it.
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
From artifacts to working prototypes
The requests prototype includes creation, filters, search and replies. The landing page includes a demo-request interaction. Both are front-end demonstrations with local state—not connected HR or CRM services.
Employee requests
Open prototype ↗B2B landing page
Open prototype ↗06 / REFLECTION
What the review taught me
Research depth and a coherent system are valuable, but they do not replace interaction testing or visual craft. The current implementation addresses several earlier interaction issues. The process writeup still contains an older Figma-oriented plan, so it should not be treated as a precise execution log.