screenshot-to-code
Drop a screenshot or Figma design and get clean HTML/Tailwind/React/Vue code generated by GPT-4o or Claude.
screenshot-to-code
screenshot-to-code converts screenshots, mockups, and Figma designs into production-ready frontend code using vision-capable LLMs. Support for HTML+Tailwind, React, Vue, Bootstrap, and Ionic means you can target your exact stack in one shot.
Key Features
- Multi-framework output: HTML/Tailwind, React+Tailwind, Vue+Tailwind, Bootstrap, Ionic, and SVG
- Video-to-app: record a screen interaction and generate a multi-step React app from the video
- Multi-model: GPT-4o, Claude 3.5 Sonnet, Gemini — swap via a dropdown; DALL-E 3 fills placeholder images
- Import from URL: paste any live URL and the tool scrapes + recreates the UI
- Eval framework: built-in evaluation suite to compare model outputs on a fixed benchmark set
- Docker-first: self-host the full stack (FastAPI backend + React frontend) with a single compose command
Quick Start
git clone https://github.com/abi/screenshot-to-code
cd screenshot-to-code
echo "OPENAI_API_KEY=your_key" > .env
docker-compose up --build
# Open http://localhost:5173 and drop a screenshot
Or run the backend directly:
pip install -r requirements.txt
poetry run uvicorn main:app --reload --port 7001
npx ai-supply add screenshot-to-code-generator
Curated mirror of the open-source screenshot-to-code (MIT). Get it from the source.
Compromise signals — malicious or tampered code (leaked secrets, backdoors, a dropped executable) — reduce the score, and known dependency CVEs carry a bounded penalty (they warrant review but never QUARANTINE — update the dependency to clear). Other dangerous-by-capability traits are risk surface, expected for some capabilities. Every finding is mapped to its OWASP control below.
Findings mapped to the OWASP Top 10 for LLM Applications (2025) and the OWASP Machine Learning Security Top 10. Expand any flagged control for the exact findings — compromise reduces the score; expected/risk-surface do not, except a known CVE, which carries a small bounded penalty (high/critical → Review).
The same gate an agent runs before installing (POST /api/v1/trust/screenshot-to-code-generator/check). Click a policy:
Consume screenshot-to-code programmatically. Authenticate with an API key or session — see Authorize an agent.
# Agents: CHECK BEFORE YOU INSTALL (no auth) — score, grade, level, capability manifest
curl https://ai-supply.store/api/v1/trust/screenshot-to-code-generator
# Gate against your org policy (returns { pass, violations })
curl -X POST https://ai-supply.store/api/v1/trust/screenshot-to-code-generator/check \
-H "Content-Type: application/json" \
-d '{"minGrade":"B","denyPermissions":["shell"],"denyUnknownEgress":true}'
# CLI
npx ai-supply add screenshot-to-code-generator
# REST (install → download)
curl -X POST https://ai-supply.store/api/v1/listings/screenshot-to-code-generator/install \
-H "Authorization: Bearer $AIM_KEY"
# MCP tool
install_listing({ "slug": "screenshot-to-code-generator" })OpenAPI spec →Curated mirror — latest upstream source. See the repository for tagged releases.