Scripts2026年4月1日·1 分钟阅读

Screenshot to Code — Convert Designs to Code

Screenshot to Code converts screenshots, mockups, and Figma designs into clean code using AI. 72.1K+ GitHub stars. HTML, React, Vue, Bootstrap. MIT.

TO
TokRepo精选 · Community
快速使用

先拿来用,再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

# Clone and run
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# Backend
cd backend && echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install && poetry run uvicorn main:app --reload --port 7001

# Frontend
cd frontend && yarn && yarn dev
# Open http://localhost:5173

# Or Docker
docker-compose up -d --build

介绍

Screenshot to Code converts screenshots, mockups, and Figma designs into clean, functional code using AI. With 72,100+ GitHub stars and MIT license, it supports multiple output formats (HTML/Tailwind, React, Vue, Bootstrap, SVG), leading AI models (Claude, Gemini, GPT), and video/screen recording conversion. Hosted version available at screenshottocode.com.

Best for: Developers converting designs to code without manual implementation Works with: Claude Code, OpenAI Codex, Cursor, Gemini CLI, Windsurf


Key Features

  • Screenshot/mockup to code conversion
  • HTML/Tailwind, React, Vue, Bootstrap, SVG output
  • Claude, Gemini, GPT model support
  • Video/screen recording conversion
  • Figma design import
  • Hosted version at screenshottocode.com

FAQ

Q: What is Screenshot to Code? A: AI design-to-code converter with 72.1K+ stars. Screenshots to HTML/React/Vue. Claude, Gemini, GPT. MIT.

Q: How do I use it? A: Clone repo, run backend + frontend, or use Docker. Or visit screenshottocode.com.


🙏

来源与感谢

abi/screenshot-to-code — 72,100+ GitHub stars

相关资产