LibreAI / Дизайн / Webstudio
// design · webstudio-is/webstudio

Webstudio

Webstudio — проект с открытым исходным кодом из категории «Дизайн» от webstudio-is (webstudio-is/webstudio на GitHub). У него 9 021 звезда на GitHub и 1 620 форков, он распространяется по лицензии AGPL-3.0 и последний раз обновлялся на GitHub 3 октября 2026.

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports…

★ 9,0 тыс. звёзд⑂ 1,6 тыс. форковAGPL-3.0обновлено окт. 2026
▦ визуал — в README этого проекта нет встраиваемого скриншота,
поэтому здесь заглушка. Руководство ниже в любом случае полное.
// факты о проекте

Факты о проекте

Репозиторий
webstudio-is/webstudio
Звёзды GitHub
9 021
Форки
1 620
Лицензия
AGPL-3.0
Последнее обновление на GitHub
3 октября 2026
Категория
Дизайн
Тип страницы
Полное руководство по установке
Официальный сайт
Official site
// как это работает

Как это работает

  1. Choose your starting point

    A blank canvas, an existing screenshot, or a text prompt describing what you want.

  2. Design visually

    Drag, drop, and edit with real components — what you see is actual code underneath.

  3. Let AI assist

    Generate layouts from screenshots or prompts, then refine by hand where it matters.

  4. Export production code

    Ship clean React/Tailwind/CSS you can actually maintain, not a dead mockup.

// возможности

Почему его любят

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
// запустите сами

Запустите сами

  1. 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
  2. Step 2 — Install dependencies

    Use the package manager the project specifies (check for pnpm or yarn lockfiles).

    npm install
  3. Step 3 — Start it

    Launch the dev server or build, per the README.

    npm run dev
// сценарии использования

Что можно создать

Advertisement
// вопросы и ответы

Вопросы и ответы

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.

// продолжить изучение

Похожие инструменты

Дизайн

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 тыс. звёздApache-2.0
Смотреть руководство →
Дизайн

Penpot

Penpot: The open-source design platform for Product teams that need scalable collaboration

★ 60,6 тыс. звёздMPL-2.0
Смотреть руководство →
Дизайн

Screenshot To Code

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

★ 80,0 тыс. звёздMIT
Смотреть руководство →
Дизайн

dembrandt

Extract any website's design system — logo, colours, typography and tokens — in one command.

★ 3,6 тыс. звёздMIT
Смотреть руководство →
Дизайн

archify

Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill

★ 79,8 тыс. звёздMIT
Смотреть руководство →
Дизайн

GrapesJS

Free and Open source Web Builder Framework. Next generation tool for building templates without coding

★ 26,3 тыс. звёздCustom (check repo)
Смотреть руководство →
// альтернативы

Альтернативы: Дизайн

Другие проекты из категории «Дизайн» с наибольшим числом звёзд в каталоге LibreAI — реалистичный список альтернатив, если Webstudio вам не подходит.

// ещё в категории design

Больше проектов: Дизайн

Соседние проекты из категории «Дизайн» в каталоге, ближайшие по числу звёзд к Webstudio — продолжайте изучать полку по обе стороны от него.

Получить Webstudio

Бесплатно и открыто — забирайте исходный код, ставьте звезду репозиторию и начинайте создавать.