Frontend Engineer – Apply As Soon As Possible

AI-generated frontend code is increasingly being evaluated not only by how good it looks in a browser, but by whether the underlying implementation is actually sound. That distinction matters when AI systems are being trained to produce reliable web interfaces rather than pages that only appear correct at one screen size.

This Frontend Engineer contract with Mercor focuses directly on that problem. Instead of building websites for a client, engineers compare a reference website against two AI-generated implementations and determine which reproduction is more faithful, responsive, and technically well constructed.

The advertised rate is $90 per hour, with each evaluation unit expected to take roughly two to three hours. The work requires contiguous working time rather than scattered short sessions, because each assignment involves downloading files, running sites locally, testing interactive states, inspecting source code, and writing evidence-based judgments.

This is not a role for someone who only knows modern component frameworks or relies entirely on visual inspection. The listing specifically emphasizes handwritten HTML and CSS, legacy web layouts, browser DevTools, command-line workflows, JavaScript comprehension, and the ability to explain precisely why one implementation is better than another.

What matters most here is evaluation judgment. You need to be able to look beyond a screenshot and identify whether the code genuinely reproduces the reference or simply creates the appearance of correctness at one viewport.

Many people assume frontend expertise automatically means being suited to code-evaluation work, but in reality the role requires a particular combination of visual fidelity, source-code analysis, responsive-layout knowledge, and written reasoning.

This is evaluation work, not authoring. Your job is to inspect someone else’s implementation, test it, identify defects or strengths, and justify your preference with concrete evidence.

Role Overview

The project is designed to create a high-quality dataset of human preference judgments on AI-generated frontend code.

Each task provides a reference webpage captured from the real internet, including a complete zipped site tree and screenshots of its default view. Some tasks also include additional screenshots representing states reached through actions such as hovering, clicking, or scrolling.

You will receive two model-generated attempts, A and B. The models created their versions from screenshots rather than from the original source. Your responsibility is to run all versions locally, interact with them, inspect their source code, and determine which implementation performs better according to the project’s rubric.

Key Responsibilities

• Render the reference page and both candidate implementations at a 1920×1080 viewport.
• Interact with each implementation to reach all required states.
• Compare visual fidelity state by state.
• Evaluate box model, spacing, typography, colors, borders, assets, z-order, and overflow.
• Inspect HTML, CSS, and JavaScript source code.
• Identify hardcoded positioning and other implementation shortcuts.
• Assess whether the layout uses appropriate document flow, flexbox, grid, or legacy techniques.
• Test responsive behavior at different viewport sizes.
• Identify defects that may not be visible at 1920px.
• Distinguish genuine implementation quality from screenshot-based visual tricks.
• Write specific, evidence-based explanations supporting every preference.
• Use the task’s broken-task escape hatch appropriately when a task genuinely cannot be evaluated.

Required Qualifications

• 3–8 years of professional web development experience.
• Professional experience primarily in frontend or full-stack development.
• Strong command of handwritten HTML and CSS.
• Understanding of semantic HTML, flexbox, grid, media queries, floats, and table-based layouts.
• Ability to read and reason about legacy web layouts.
• Strong browser DevTools skills.
• Ability to set and evaluate exact browser viewport dimensions.
• Command-line comfort with tasks such as unzipping archives and running local static servers.
• Enough JavaScript knowledge to understand scripts and DOM changes.
• Professional written English.
• Ability to produce detailed written justifications rather than unsupported preferences.
• Desktop or laptop capable of displaying a 1920×1080 viewport.
• Administrator rights on your own computer for installing and running a local server.
• At least one completed Mercor engagement delivered in full.

Important Experience Requirement

The listing states that this project is not onboarding net-new experts. Applicants need at least one completed Mercor engagement that was delivered in full before they can be onboarded to this project.

That requirement is particularly important because it means strong frontend experience by itself may not be sufficient for this particular seat.

Technical Skills That Matter

• Handwritten HTML and CSS.
• Semantic markup.
• Flexbox and CSS Grid.
• Responsive media queries.
• Legacy float-based layouts.
• Table-based website structures.
• Browser DevTools.
• DOM inspection.
• Computed-style analysis.
• Basic JavaScript and DOM behavior.
• Command-line workflows.
• Local static-server setup.
• Visual comparison and pixel-level fidelity analysis.

What the Work Actually Feels Like

A typical assignment is more investigative than creative. You download the reference and two candidate site trees, start them locally, and open them at the required viewport. You then move through the specified states and compare what you see.

After that, you inspect the actual implementation. For example, an apparently accurate page may rely on absolute positioning that breaks when the viewport changes, while another may use normal document flow and responsive layout techniques. Your job is to recognize that difference and explain it.

The quality of the written reasoning matters. The project does not simply want a selection of A or B. It wants a defensible explanation showing the evidence behind that choice.

You’ll do well here if you can combine the eye of a pixel-conscious frontend developer with the skepticism of a code reviewer. You should be comfortable asking not only, “Does this look right?” but also, “Why does it look right, and will the implementation continue to behave correctly?”

Nice to Have

• Prior RLHF or preference-labeling experience.
• AI model evaluation experience.
• Structured code-review experience.
• Pixel-perfect design-to-code experience.
• Accessibility expertise, including ARIA and semantic landmarks.
• Understanding of common LLM-generated coding failures.
• Web scraping or web archiving experience.
• DOM parsing experience.
• More than one completed Mercor project.
• Availability for contiguous multi-hour work sessions.

Who Should Not Apply

• Backend-only engineers.
• ML or data-science-only professionals without frontend experience.
• Mobile-native-only developers.
• DevOps-only engineers.
• Designers who do not code.
• Framework-only developers without experience authoring CSS outside component libraries.

The listing specifically emphasizes that familiarity with older web-development approaches is important because some reference pages come from real websites built using legacy techniques, including table-based layouts and image maps.

Contract and Payment Terms

• Employer / Platform: Mercor
• Employment Type: Independent Contractor
• Location: Remote, limited to the listed eligible countries
• Rate: $90 per hour
• Typical Unit: Approximately 2–3 hours
• Schedule: Flexible, but assignments require contiguous multi-hour work periods
• Payment: Weekly via Stripe or Wise
• Engagement: Projects may be extended, shortened, or concluded early depending on project needs and performance
• Eligibility: H1-B and STEM OPT candidates are not supported

Location Requirements

The supplied listing identifies eligible locations as Argentina, Austria, Belgium, Bolivia, Brazil, Bulgaria, Canada, Chile, Colombia, Costa Rica, Croatia, Cyprus, Czech Republic, Denmark, Dominican Republic, Ecuador, El Salvador, Estonia, Finland, France, Germany, Greece, Guatemala, Honduras, Hungary, Iceland, India, Ireland, Latvia, Liechtenstein, Lithuania, Luxembourg, Malta, Mexico, Netherlands, Norway, Panama, Paraguay, Peru, Poland, Portugal, Romania, Slovakia, Slovenia, Spain, Sweden, United Kingdom, United States, and Uruguay.

Applicants should verify their current country of residence against the official application page before applying. Nigeria is not included in the location list supplied for this vacancy.

Equipment

• Desktop or laptop capable of displaying a 1920×1080 viewport.
• Administrator access to the machine.
• Ability to install and run a local static server.
• Command-line environment suitable for working with downloaded site archives.

How to Apply

Click Here to Apply

This application link was supplied with the vacancy. Review the current eligibility requirements, including the prior Mercor engagement requirement and location restrictions, before submitting an application.

Sample ATS-Aligned CV

Curriculum Vitae

To download this CV as PDF, use your browser:
Press Ctrl + P → Select “Save as PDF”

Interview Preparation

Role-Specific Questions

• How would you compare two AI-generated frontend implementations against a reference page?
• What would you inspect when two pages look similar but have very different underlying implementations?
• How can you determine whether a layout is genuinely responsive?
• What problems can excessive absolute positioning create?
• How would you identify whether a candidate implementation is using a screenshot as an image rather than rebuilding the page?
• What CSS properties would you inspect when typography does not match the reference?
• How would you evaluate spacing and box-model differences?
• How would you test a page whose appearance changes after hovering, clicking, or scrolling?
• What would make you flag a task as genuinely broken?
• How would you write an evidence-based preference between implementation A and B?
• How comfortable are you reading legacy HTML structures such as table-based layouts?
• How would you troubleshoot a broken relative asset path in a downloaded website?

General Questions

• Tell us about your frontend development experience.
• Why are you interested in evaluating AI-generated frontend code?
• Describe a frontend project where attention to visual detail was important.
• How do you approach debugging an unfamiliar codebase?
• How do you manage detailed work under time constraints?
• Tell us about a time you identified a subtle technical problem others missed.
• How do you communicate technical findings to another reviewer?

Talking Points

• Explain that you evaluate both rendered output and underlying implementation.
• Demonstrate familiarity with handwritten HTML and CSS rather than only component-library abstractions.
• Discuss responsive design and why a page must be evaluated beyond a single viewport.
• Emphasize evidence-based technical reasoning.
• Show comfort with browser DevTools and source inspection.
• Be prepared to explain how you would distinguish a genuine layout from a visually convincing shortcut.
• Highlight any experience with GitHub, local development servers, JavaScript, and debugging.

Do’s & Don’ts

• Do: Give concrete examples of frontend work.
• Do: Demonstrate that you understand both visual and structural quality.
• Do: Explain your debugging process clearly.
• Do: Discuss responsive behavior using specific examples.
• Do: Be honest about your experience with legacy HTML and CSS.
• Don’t: Describe the role as ordinary frontend development.
• Don’t: Rely only on subjective statements such as “A looks better.”
• Don’t: Claim a completed Mercor engagement unless you actually have one.
• Don’t: Ignore the stated location restrictions.

Preparation Checklist

• Confirm that your country is included in the vacancy’s eligible location list.
• Confirm that you have completed at least one Mercor engagement in full.
• Prepare your strongest frontend projects for discussion.
• Review handwritten HTML and CSS fundamentals.
• Refresh flexbox, grid, media queries, floats, and table-based layouts.
• Practice using browser DevTools to inspect computed styles and DOM structure.
• Review responsive-layout debugging techniques.
• Practice explaining technical preferences with specific evidence.
• Confirm that your computer can run a local static server.
• Ensure you have administrator rights on your machine.
• Prepare for assignments requiring two to three hours of uninterrupted attention.

Recruiter insight: The strongest candidate is not simply someone who can build a polished interface. This project needs someone who can inspect an unfamiliar implementation, understand why it behaves the way it does, test it beyond the obvious viewport, and explain the evidence behind a technical preference.