Open source alternative to Google Stitch, Locofy.ai, Builder.io, Banani AI and Alloy
Last verified
Convert screenshots, mockups, and Figma designs into working HTML, React, Vue, or Bootstrap code using AI with no manual coding required.
Drop in a Figma export or design screenshot and generate a working React or HTML scaffold in seconds. The output gives you the layout structure, Tailwind classes, and component hierarchy to refine, instead of writing it from scratch.
Skip if your designs rely heavily on complex animation states that static screenshots cannot represent. The tool works best on relatively clean, static layout compositions.
Convert a reference website screenshot or a rough wireframe into a starting HTML and Tailwind layout. For developers who are not designers, this collapses the gap between wanting a layout and having a working starting point.
Skip if you need production-ready accessible components with full ARIA attributes. The generated code is a structural scaffold, not a finished accessibility-reviewed component.
Export a frame from Figma and generate React and Tailwind code a developer can copy into a component file. Asset extraction with a Gemini API key pulls real images from the frame rather than substituting placeholders.
Skip if your Figma designs rely on auto-layout breakpoints or component variants that need design-system-aware generation. The tool reads the visual output, not the Figma layer structure.
Record a screen capture of a target website in action and generate a functional prototype. This is faster than reading the site's source HTML, especially when JavaScript-rendered content makes the DOM messy.
Skip if the site uses heavy animation frameworks with complex keyframe sequences. The generated code captures the static layout structure, not animation timing or motion choreography.
Translating a visual design into clean frontend code is a labor-intensive step that stalls prototyping. A designer hands off a Figma file or a screenshot, and the developer spends hours recreating margins, font weights, layout logic, and component hierarchy by hand. For teams iterating quickly on MVPs or redesigns, this handoff gap is one of the most reliable time sinks.
The alternatives are unattractive: manually copying CSS values from Inspect mode, paying for proprietary design-to-code subscriptions with per-seat or per-export pricing, or maintaining fragile design-token pipelines that break every time the design system changes. Screen recordings of interactive sites are even harder to translate, since capturing animation and state transitions manually requires significant extra effort on top of the static layout work.
Outputs code in six stacks: HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. Choosing React and Tailwind is the most common path for teams that want output they can copy directly into a component library.
Works with OpenAI (GPT-5.5, GPT-5.4 Mini), Anthropic (Claude Opus 4.6, 4.8), and Gemini (3 Flash, 3.1 Pro). Adding multiple API keys lets the app automatically pick the strongest model mix per generation; single-key setups use that provider's models only.
When a Gemini API key is supplied, the tool extracts real logos, images, and icons directly from the screenshot rather than substituting placeholders. This produces code that references the actual assets, cutting the gap between generated output and the finished design.
Accepts video screen recordings of live websites and converts them into functional prototypes. Useful for replicating a reference site's layout and interactions without accessing its source code. Requires a Gemini API key.
An optional Chromium-based preview mode renders the generated page in a headless browser and lets the AI model visually inspect its own output. Enabled automatically when Playwright installs Chromium, or included by default in the Docker image.
When a Replicate API key is supplied, the tool adds image editing and background removal capabilities. Generated pages can reference edited or cleaned-up asset versions, reducing manual post-processing after code generation.
Locofy.ai is a paid AI design-to-code tool that integrates directly with Figma and converts designs into React, Gatsby, or Next.js code. It is a proprietary service with a subscription model; there is no self-hosted option.
| Feature | screenshot-to-code | Locofy.ai |
|---|---|---|
| License | MIT | Proprietary |
| Self-hosting | Yes (Docker Compose) | No |
| Input types | Screenshots, Figma exports, video recordings | Figma plugin integration |
| AI models | OpenAI, Anthropic, Gemini (your keys) | Proprietary model |
| Output stacks | HTML, React, Vue, Bootstrap, Ionic (Tailwind options) | React, Gatsby, Next.js |
| Pricing | Free self-hosted; AI API costs only | Subscription |
screenshot-to-code is the better pick when you do not use Figma as your primary design tool, when you want to control which AI model generates the code, or when you need to keep designs off third-party servers. Locofy.ai has an advantage for teams working exclusively in Figma who want native plugin integration that reads layer names and component structure, not just the visual output.
Builder.io is a visual development platform with a design-to-code feature that generates React and Angular code from designs. It is primarily a managed hosting and visual CMS tool; the code export feature is part of a broader paid subscription.
| Feature | screenshot-to-code | Builder.io |
|---|---|---|
| License | MIT | Proprietary |
| Self-hosting | Yes | No |
| Primary use case | Screenshot or recording to code | Visual CMS with code export |
| Output stacks | HTML, React, Vue, Bootstrap, Ionic | React, Angular, Vue |
| Cost model | Free self-hosted | Subscription platform |
Builder.io makes sense when you want a full visual CMS and content editing workflow alongside code generation. screenshot-to-code is a better fit when you only need the image-to-code step, without paying for a broader platform you will not use.
Self-hosting runs the frontend and backend together using Docker Compose.
```bash
git clone https://github.com/abi/screenshot-to-code.git
docker-compose up -d --build
```The software is MIT licensed and free to run on your own server. You do need at least one API key from OpenAI, Anthropic, or Google Gemini, and those providers charge per token. At typical usage, generating code from a screenshot costs a few cents. A hosted version is also available at screenshottocode.com for teams who prefer not to self-host.
It supports Gemini 3 Flash Preview and Gemini 3.1 Pro Preview, GPT-5.5 and GPT-5.4 Mini, and Claude Opus 4.6 and Opus 4.8. The README recommends Gemini as the best model for screenshot-to-code accuracy and requires Gemini specifically for asset extraction from screenshots and for the video (screen recording) input mode.
Yes. The tool has a React/Vite frontend and a FastAPI Python backend. The easiest path is Docker Compose: set your API keys in a .env file and run docker-compose up -d --build. The Docker image includes Chromium for the optional screenshot preview feature. Manual setup uses Poetry for the backend and pnpm for the frontend.
It outputs HTML with Tailwind CSS, HTML with plain CSS, React with Tailwind, Vue with Tailwind, Bootstrap, and Ionic with Tailwind. The six stacks cover the most common frontend environments. You select the target stack before generating.
The primary differences are self-hosting, model choice, and cost model. screenshot-to-code is MIT licensed, runs on your own server, and lets you pick from three AI provider families. Locofy.ai and Builder.io are proprietary SaaS tools with subscription pricing. screenshot-to-code also accepts screen recordings as input, which most paid alternatives do not support.
Alternative to
Figma
Visual React editor where every design change writes real code
Alternative to
Builder.io
Open source drag-and-drop page editor for any React app
Alternative to
Plasmic
Your design canvas is backed by real files in git
Alternative to
QFluentWidgets
Fluent UI component library for Qt Widgets in C++17 and Python
Alternative to
BBEdit
Native Apple text and Markdown editor with safe file sync
Alternative to
TinyPNG
Free desktop image optimizer. Files stay on your machine.
Featured
Alternative to
Grok Bot
AI teammates you own: your keys, your model, your machine.
Alternative to
Superhuman
AI email assistant that drafts replies and clears your inbox
Alternative toClaude Managed Agents
Open-source agent deployment API. Self-host or use Omnara Cloud.
The projects we add and every new guide. Free, unsubscribe any time.
Claude Code to 
OpenCode
Jira to 
Windshift
Notion to 
AppFlowy
Slack to 
Mattermost
Linear to 
GitLab
Wispr Flow to 
Handy
CapCut to 
Concat
Grok Bot to 
rakazo
Superhuman to 
Inbox Zero
Airtable to 
AITable
Muse to 
OpenClaw
GitHub Copilot to 
Cline
Datadog to 
Netdata
Microsoft Teams to 
Rocket.Chat
Pinecone to 
Qdrant
Zapier to 
n8n
Devin AI to 
OpenHands
Firebase to 
Supabase
1Password to 
KeePassXCConfluence to 
Docmost
Contentful to 
Strapi
Adobe Premiere Pro to 
Shotcut
ChatGPT to 
AnythingLLM
LangSmith to 
Langfuse
