Plain-AyI
← All projects
Coding assistants

screenshot-to-code

Turns a screenshot, design mockup or screen recording of a website into working web page code.

What it does

You give it a picture of a web page, such as a screenshot, a mockup or a Figma design, and it uses AI to write code that recreates that page. It can also take a screen recording of a website in action and turn it into a working prototype.

It can produce code in several common styles, including plain HTML with CSS or Tailwind, React, Vue, Bootstrap and Ionic. It relies on online AI models from OpenAI, Anthropic or Google Gemini, and can use Replicate (an online image service) to create or edit images.

You can run it yourself with your own API keys (password-like codes from AI services), or use the makers' hosted version on their website, which needs no setup.

Who it's for

Web designers and developers who want a quick starting point for building a page that looks like an existing design or website.

Can I use it without coding?

With some setup. Running it yourself takes a few commands or Docker plus API keys, though a hosted version is available in the browser. New to this? Start here.

Can I run it?

Cost
Free, but needs an AI accountThe software is free, but it uses an online AI service (like OpenAI or Anthropic), which usually charges for use.
Runs on
Web browser, Server
Computer
An ordinary computer is fine
Privacy
Sends what you give it to an online service
API key
Needed. An API key is a password-like code from an online AI service. What's that?

Try it

  1. Get an API key from at least one AI provider: OpenAI, Anthropic or Google Gemini.
  2. Install Docker, add your key to a settings file and start the app with Docker Compose.
  3. Open the app in your web browser and drop in a screenshot to get code.

Using Claude Code, Cursor or another AI coding assistant? Paste the prompt and it will walk you through the setup.New to this?

Before you install

  • Only download from the official GitHub page. Copies with similar names exist for many popular projects.
  • Plain-AyI is an independent guide and doesn't host or review the software it lists. Please check each project's official page before installing.
  • License (MIT): Very permissive: free to use, change and share, including for business.
  • Keep your API key private. Never paste it into websites or share it, and set a spending limit with the AI service.
  • What you type or upload is sent to an online service. Avoid sharing private or sensitive information.
  • More on staying safe

Where people are talking about it