Human MCP Screenshot To Code

Screenshot to Code with Claude Code + Human MCP

Overview of an experiment: generating production-ready frontend code and assets from a single UI screenshot.

1. Current limitation of Claude Code

For the “screenshot-to-code” task, Claude Code is still relatively weak. The main reason is that its visual understanding (vision) is not yet on the same level as other models like GPT or Gemini (I’ve already shared test results on this before).

2. Why I built Human MCP

That limitation is exactly why I built “Human MCP”.

Human MCP does two important things:

• It gives Claude much stronger image comprehension. Claude can now read screenshots more accurately, and it can even analyze video.
• It lets Claude generate UI assets automatically, by calling the Gemini Nano API.

3. The experiment

In this test, I took a UI screenshot from Mobbin and asked Claude to convert it directly into code. I only used a single command. The result was surprisingly good.

4. Automatic asset generation

Claude didn’t just output HTML/CSS. It also automatically prompted Human MCP to generate the small “card wallet” visual that appears in the original design. The perspective of the generated asset is slightly different from the screenshot, but the similarity is already impressive.

5. Automatic background cleanup

Human MCP also includes a background removal tool. The image generated by “Nano Chuối” did not come with a transparent background. Claude Code analyzed that output, detected the issue, and then automatically called the remove-background tool to clean it.

In other words: the asset comes back ready to drop into the UI.

6. Why this matters for frontend

Using Claude Code for frontend work is no longer just “turn this screenshot into HTML/CSS.” The output now also includes usable visual assets that have already been cleaned. This directly improves the design quality of the UI you get at the end. It looks noticeably better. 😁

7. Visual reference

Left: original screenshot.

Right: generated result (HTML/CSS + assets).