Design
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,9 mil estrelasApache-2.0
Ver o guia →// design · webstudio-is/webstudio
Webstudio
Webstudio é um projeto de design de código aberto de webstudio-is (webstudio-is/webstudio no GitHub). Tem 9.021 estrelas no GitHub e 1.620 forks, é publicado sob a licença AGPL-3.0 e foi atualizado pela última vez no GitHub em 3 de outubro de 2026.
Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports…
★ 9,0 mil estrelas⑂ 1,6 mil forksAGPL-3.0atualizado out 2026
▦ visual: o README deste projeto não inclui nenhuma captura incorporável,
então aqui vai um marcador. O guia abaixo está completo mesmo assim.
então aqui vai um marcador. O guia abaixo está completo mesmo assim.
// dados do projeto
Dados do projeto
- Repositório
- webstudio-is/webstudio
- Estrelas no GitHub
- 9.021
- Forks
- 1.620
- Licença
- AGPL-3.0
- Última atualização no GitHub
- 3 de outubro de 2026
- Categoria
- Design
- Tipo de ficha
- Guia de instalação completo
- Site oficial
- Official site
// como funciona
Como funciona
- Choose your starting point
A blank canvas, an existing screenshot, or a text prompt describing what you want.
- Design visually
Drag, drop, and edit with real components — what you see is actual code underneath.
- Let AI assist
Generate layouts from screenshots or prompts, then refine by hand where it matters.
- Export production code
Ship clean React/Tailwind/CSS you can actually maintain, not a dead mockup.
// recursos
Por que as pessoas gostam tanto
Visual editing
Design directly on the canvas with real components and styles.
AI generation
Screenshot-to-code and prompt-to-UI that produce editable results.
Real code output
Exports are maintainable codebases, not locked-in proprietary files.
Collaboration
Multiplayer editing and commenting for teams.
Self-hostable
Your design files live on your infrastructure.
Open formats
No proprietary lock-in on your own work.
Advertisement
// execute você mesmo
Execute você mesmo
- Step 1 — Clone the repo
Download the source and move into the project folder.
git clone https://github.com/webstudio-is/webstudio.git cd webstudio - Step 2 — Install dependencies
Use the package manager the project specifies (check for pnpm or yarn lockfiles).
npm install - Step 3 — Start it
Launch the dev server or build, per the README.
npm run dev
// casos de uso
O que você pode criar
- Build marketing sites visually.
- Prototype apps with AI-generated starting points.
- Hand developers clean, real code.
- Run a private Figma-style workspace.
Advertisement
// perguntas frequentes
Perguntas frequentes
Can AI-generated UI be production quality?
As a starting point, yes — expect to refine by hand, which these tools are built for.
Figma replacement?
For many workflows, increasingly yes — especially teams wanting self-hosting or code output.
Who maintains Webstudio?
It is an open-source project at webstudio-is/webstudio with 1,620 forks. Check the repo's contributors and recent commits to see how active maintenance is.
What code does it export?
Typically React with Tailwind or plain HTML/CSS, depending on the tool.
Is it free?
The open-source tools here are free to use and self-host.
Do I need design skills?
AI-assisted starting points lower the bar a lot, but taste still helps.
// continue explorando
Ferramentas semelhantes
Design
Penpot
Penpot: The open-source design platform for Product teams that need scalable collaboration
★ 60,6 mil estrelasMPL-2.0
Ver o guia →Design
Screenshot To Code
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
★ 80,0 mil estrelasMIT
Ver o guia →Design
dembrandt
Extract any website's design system — logo, colours, typography and tokens — in one command.
★ 3,6 mil estrelasMIT
Ver o guia →Design
archify
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
★ 79,8 mil estrelasMIT
Ver o guia →Design
GrapesJS
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
★ 26,3 mil estrelasCustom (check repo)
Ver o guia →// alternativas
Alternativas em Design
Os outros projetos de Design com mais estrelas no catálogo do LibreAI — a lista realista de alternativas se Webstudio não for o ideal para você.
- Excalidraw★ 134,0 mil
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
- Screenshot To Code★ 80,0 mil
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
- archify★ 79,8 mil
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
- AFFiNE★ 73,2 mil
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★ 63,6 mil
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
// mais em design
Mais em Design
Projetos de Design próximos no catálogo, os mais próximos em estrelas de Webstudio: continue explorando dos dois lados dele.
- vscode-drawio★ 9,5 mil
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
- cursor-talk-to-figma-mcp★ 7,0 mil
TalkToFigma — an MCP bridge letting Cursor, Claude Code or Codex read and modify Figma designs.
- Checkmate★ 10,9 mil
Checkmate is an open-source, self-hosted tool designed to track and monitor server hardware, uptime, response times, and incidents in real-time with beautifu…
- flat★ 6,4 mil
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.
- ui★ 12,1 mil
Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.
- OpenPencil★ 6,1 mil
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts…
Baixe o Webstudio
Grátis e aberto: pegue o código-fonte, dê uma estrela no repositório e comece a criar.