Skip to content
don’t make it ugly
All resources

ToolAgent Resources, Tools

screenshot-to-code

Drop in a screenshot or design and get working HTML, Tailwind or React back.

Open source
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of screenshot-to-code

What it is

screenshot-to-code is an open-source tool that converts screenshots, mockups and Figma designs into code using vision models, with output in HTML and Tailwind, React, Vue or Bootstrap. Self-host it with your own API keys, or use the hosted version.

Why it’s here

Useful as a first pass when you have a reference and want structure fast. The output needs a design pass afterwards; treat it as a wireframe generator, not a finished page.

Best for

  • turning references into scaffolds
  • rapid prototyping
  • recreating a layout

Can my agent use this?

Agent good agent friendliness

Partly. It's a separate tool rather than something your agent calls. Generate the scaffold here, then give the output to your agent to refine and restyle.

Good: Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.

Access methods

  • GitHub
  • Public website

Related resources

  • v0
    Preview of v0

    v0

    Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation.

    Toolgood agent friendliness
  • 21st.dev Magic MCP
    Preview of 21st.dev Magic MCP

    21st.dev Magic MCP

    Describe a component in your agent and get a polished one generated from a large library.

    MCP serverOpen sourceexcellent agent friendliness
  • Playwright MCP
    Preview of Playwright MCP

    Playwright MCP

    Give your agent a browser so it can see and test what it built.

    MCP serverFreeOpen sourceexcellent agent friendliness
    Staff pickUsed by me
  • Iconify
    Preview of Iconify

    Iconify

    One API and one component for two hundred thousand icons from every major set.

    Asset libraryFreeOpen sourceexcellent agent friendliness