デザイン
Onlook
The Developer Tool for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's…
★ 26.9k スターApache-2.0
ガイドを見る →Screenshot To Codeは、abiが公開しているオープンソースのデザインプロジェクトです（GitHub: abi/screenshot-to-code）。GitHubスターは79,959、フォークは9,776で、MITライセンスの下で公開されています。GitHubでの最終更新は2026年9月29日です。
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
A blank canvas, an existing screenshot, or a text prompt describing what you want.
Drag, drop, and edit with real components — what you see is actual code underneath.
Generate layouts from screenshots or prompts, then refine by hand where it matters.
Ship clean React/Tailwind/CSS you can actually maintain, not a dead mockup.
Design directly on the canvas with real components and styles.
Screenshot-to-code and prompt-to-UI that produce editable results.
Exports are maintainable codebases, not locked-in proprietary files.
Multiplayer editing and commenting for teams.
Your design files live on your infrastructure.
No proprietary lock-in on your own work.
Download the source and move into the project folder.
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-codeIsolate dependencies so nothing clashes with your other projects.
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activateInstall the requirements, then follow the README's launch command (it varies per project).
pip install -r requirements.txtReaders working through the Design shelf also stop at Smart-AI-Resume-Analyzer, AI resume analyzer — ATS-friendly templates and job-winning optimization. Also on this shelf: Eva01 — modular AI being with voice, face recognition and plug-and-play tools. The Design shelf also holds free-ai-resources-x — Curated collection of free AI tools, APIs, datasets and learning resources.
As a starting point, yes — expect to refine by hand, which these tools are built for.
For many workflows, increasingly yes — especially teams wanting self-hosting or code output.
It is an open-source project at abi/screenshot-to-code with 9,776 forks. Check the repo's contributors and recent commits to see how active maintenance is.
Typically React with Tailwind or plain HTML/CSS, depending on the tool.
The open-source tools here are free to use and self-host.
AI-assisted starting points lower the bar a lot, but taste still helps.
The Developer Tool for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's…
Penpot: The open-source design platform for Product teams that need scalable collaboration
Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports…
TalkToFigma — an MCP bridge letting Cursor, Claude Code or Codex read and modify Figma designs.
Models-as-code tool for the C4 software architecture model
An AI slide-deck generator built on Vue 3: describe your topic and it produces
LibreAIカタログに掲載されたデザインプロジェクトの中で最もスターの多いもの — Screenshot To Codeが合わなかった場合に検討したい、現実的な候補リストです。
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge base that brings planning, sorting and creating all together. Pri…
draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0
Penpot: The open-source design platform for Product teams that need scalable collaboration
カタログの中でScreenshot To Codeとスター数が近いデザインプロジェクト — 前後の棚もそのまま見て回れます。
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
AI thumbnail generator for high click-through YouTube art.
There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge base that brings planning, sorting and creating all together. Pri…
Free design tool that ai-powered presentation generator — pure html+css+vanil.
draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0