Training Example: Webstudio – Review the Data, Give Your Score & Compare to the Real AI Evaluation

NewInception - an AI tool for design exploration
[H1] Custom frontend without custom code
Webstudio Builder is an open source tool that empowers creators to build highly maintainable and fast websites using modern web standards.Explore designs with InceptionGet started with Builder
[IMG: Webstudio open source website builder]
[IMG: Webstudio open source website builder]
[H2] Frontend for any web experience
MarketingDirectoriesCMSEcommerce
[H3] Marketing
Full power of CSS in a visual tool to control every property, unit, and breakpoint. Optimize for search engines as perfect Lighthouse scores are highly attainable. Iterate quickly, without writing code.All features
[IMG: Style panel and components in no code visual editor with tokens]
[H2] Other platforms are stuck in 2015
[H3] Can't rearrange classes
paddingRename classDuplicate classRemove classpadding-smallmargin-autoYou must do it perfectly right the first time.
[H3] You get a class, you get a class!
Div 1021Div 1019Div 1020Div 10016Div 1017Div 1018Div 1012Div 1013Div 1014Div 1015Div 1007Div 1008Div 1009Div 1010Div 1011Div 1001Div 1002Div 1003Div 1004Div 1005Div 1006Div 1023Div 1025Div 1024Div 1022Div 1026
[H3] "Our CMS is the best"
[IMG: Airtable logo]
[IMG: Supabase logo]
That favorite tool of yours is not welcome.
[H3] v2.13.please_dont_break
There is a new version of SEOify available. Update now.The site is experiencing technical difficulties.(This is fake)
[H3] "We own your stuff"
Price is going up3 days agoAnd there's no good export option.Tired of these problems?
[H3] Visual CSS, Reimagined. Create consistently with reusable styles and access to every CSS property.
Tokens
[H3] Reusable styles without classes.
Create consistent designsDitch the pain of combo classesRearrange and remove Tokens
[IMG: Style Sources with Tokens and option menu expanded]
Local Styles
[H3] Style without naming.
Create one-off stylesOverride other stylesExperiment
[IMG: Local style selected in style sources]
All CSS properties
[H3] Create exactly what you want with access to all CSS properties and values.
[IMG: display flex aligned center with gap]
CSS variables
[H3] Create a global design system for colors, gradients, sizes, and more. Build consistent and maintainable websites.
[IMG: CSS variables in dropdown]
[H2] Integrate any external content from your favorite tools in your designs.
[IMG: ghost logo]
[IMG: payload logo]
[IMG: hygraph logo]
[IMG: notion logo]
[IMG: strapi logo]
[IMG: Baserow logo]
[IMG: Directus logo]
[IMG: WordPress logo]
[IMG: airtable logo]
[IMG: drupal logo]
Resources
[H3] Fetch data from any API to create blogs, directories, and other structured content.
[IMG: Various CMS logos orbiting around webstudio logo]
Dynamic Routing
[H3] One template for all your records. Create a template for each content type, such as blog posts.
[IMG: Rotating team members in the URL then a layer that is fetching that team member, and finally that team member output on the website]
Data Bindings
[H3] Blend external data in your design.
[IMG: list of variables connected to their output on the website]
Collection List
[H3] Display all the CMS records and choose the fields to display.
[IMG: Blog, reviews, and catalog overview collection lists]
Dynamic Sitemaps
[H3] Build a dynamic sitemap visually. Integrate external content into the sitemap.
[IMG: dynamic sitemap with team member URLs highlighted]
[H2] Dynamic at the speed of static. Cloud hosting puts your site milliseconds away from any user on Earth.
Dynamic rendering
[H3] Add filters, appease search engines, and scale content infinitely.
[IMG: URL with query params, the server processing them, the output on the website, and finally google traffic chart going up]
One-click publish
[H3] With one click, your site is published to cloud hosting.
[IMG: publish dialog pointing to Cloudflare]
Infrastructure
[H3] Webstudio Cloud hosting is backed by Cloudflare. Get ludicrously fast performance, world-class security, and scalability.
[IMG: globe with dots indicating servers]
Separation of concerns
[H3] Published sites are isolated from other sites and the builder, improving stability and performance.
[IMG: two sections: webstudio builder and live website]
Optimized image rendering
[H3] Images load quickly. Upload high-quality images, and visitors will load converted (WebP/AVIF), compressed, and responsive images.
[IMG: png getting uploaded at 3.6mb and downloaded as a webp at 642kb]
[H2] Open source website builder. Customizable, private, and transparent.
Self-hosting
[H3] Deploy anywhere, without paying Webstudio. You're in control of your hosting, pricing, security, and compliance.
[IMG: webstudio cli logo with github pages, netlify, cloudflare pages, and vercel logos]
Privacy
[H3] We do not track users, our analytics are completely anonymized, and data is hosted within Europe.
[IMG: secure shield pointing out to no tracking icons]
Transparency
[H3] Public roadmap, code, and community ensure you stay informed and influence the product's direction.
[IMG: kanban board, contributors, and release history]
Community
[H3] Join thousands of passionate website creators in Discord.
[IMG: community member icons and discord screenshot]
[IMG: Webstudio Logo Mark]
[H2] Built with Webstudio
[IMG: Webstudio Example Unsloth (SaaS)]
[IMG: Webstudio Example Chris Wood (Personal/portfolio)]
[IMG: Webstudio Example dooodles (SaaS)]
[IMG: Webstudio Example Matheus]
[IMG: Webstudio Example TEYUTO (SaaS)]
[IMG: Webstudio Example Airdokan (Agency)]
[IMG: Webstudio Example Hope Design Studio (design)]
View Gallery
[H2] Webstudio in the words of designers, developers, and startup founders
The sites load blazingly fast - considerably faster than Webflow.
[IMG: Chris Wood Picture]
Chris WoodUI/UX DesignerMy mind is blown. It's like an open-source Webflow, but that truly only tries to be the frontend and lets other tried-and-true services power the backend.
[IMG: Chase Raz picture]
Chase RazFounder of RCR Business VenturesOnce you realize the power & potential Webstudio has to offer, you can see through the limitations of Framer and Webflow.
[IMG: Ankur Puri picture]
Ankur PuriSoftware EngineerI really like Webstudio. It's super fast and super clean.
[IMG: Samuel Gregory picture]
Samuel Gregory (Webflow and Code)Engineer, Designer, Content Creator
[IMG: Webstudio Logo]
Build and publish pro websitesGet started with Builder

[H3] Design process, Reimagined. Iterate on ideas 10x faster and get exactly what you see in production.
Find your style
[H3] Choose from a variety of creative styles instead of starting from scratch
Choose a styleChoose emotionChoose color and layoutExplore
[H3] Explore ideas on an infinite canvas instead of drawing rectangles
Generate many versions in parallelGet creative inspirations fastMake it your own
[H3] Refine designs with edits without wasting time moving pixels around
Remix
[H3] Found an interesting direction? Create a new frame using the current frame as a starting point to explore it further
Code-first approach
[H3] There’s no translation from design to code -everything you see is exactly what you get in production in Webstudio Builder or any other tool that works with HTML/Tailwind
[IMG: Webstudio Logo Mark]
[H2] Generated with Inception
Show more
[H3] Pricing
[H3] Credits-based pricing
Charge your account with creditsUse them for generating designsLess output costs less, more output costs moreFor example, asking the AI to generate a hero section might cost a few cents, while generating a full page with lots of details can cost 70 cents.
[H2] Frequently Asked Questions
#›What is Inception for in plain terms?Inception is a new kind of AI-first design tool made for design exploration. It is backed by HTML/Tailwind code, so it will never generate designs that cannot be built on the web. The designs it produces don't need translation or reimplementation in code. You actually see what you get.#›Who is using Inception?The problem we are solving with Inception: Lots of people who are not full-time designers struggle to get started with the builder. They ask for templates, but templates are only good when there is a huge variety, and that takes years to build. We have had it out in the open for a week now, and I see professional designers actually using it, with amazing results. We bet it saved them a crazy amount of time instead of moving pixels around and drawing every rectangle by hand.#›How is Inception different from Bolt, Lovable, and other codegen tools?Those tools generate tons of JavaScript and aren't good at designing. They also don't have a design workflow that is made specifically for exploration—meaning generating lots of designs and picking what you like to explore further. Inception generates only HTML and Tailwind, which allows it to be great as a design exploration tool and still produce production-ready code, which can be used everywhere else, including in the above-named tools as well as in Webstudio.#›How is Inception different from Figma?It's not meant to provide the high level of control like Figma. After the exploration phase, you can paste the code into Webstudio and continue working on it, adjusting every detail of the design.#›Can I generate multiple designs in parallel?Yes, up to 4 frames in parallel.#›Can I iteratively improve the initial generation?Yes, you should. You can select the frame and write edit prompts to modify it. You can also use the remix button to create a new frame based on the selected one, then continue experimenting with a separate frame.#›How can I organize my work in Inception?You have projects, boards, and frames. Your account can have many projects. Each project can have many boards. Each board can have many frames.#›Can I scroll the frame?Yes, we have an interaction mode that can be toggled using a shortcut, using a button in the prompt panel, as well as by double-clicking the frame.#›Can Inception clone sites?Not yet.#›Can I copy the code from Inception and use it in any code editor?Yes, you can copy the code from Inception and use it in any code editor.#›Can I insert code from Inception into the Webstudio Builder?Yes.#›I made a wrong prompt, can I restore the previous state?Yes, we have a history of prompts you made in the menu above the frame, and you can choose every version you made.#›Is it working on mobile devices?Yes, even though it's not our primary device for testing, it does work on mobile.#›How much is it going to cost to use Inception?Creating an account doesn't require a subscription at the moment, but you need to pay for token usage. Token usage generally depends on your input and output size. The more content in the frame you generate, the more expensive it gets. A very long page can cost 50 cents, while a single hero section may cost a few cents. Inception uses the best models on the market, such as Claude and others, some of them are expensive.#›How can I reduce token usage?When you are exploring designs, try to generate only a single section, e.g., only the hero section. Once you like it, you can add more sections. If you generate a full page every time, you will use much more tokens as well as wait much longer.#›Can I BYOK?Not at the moment. We don't think this will be possible, because we need the flexibility to change out models at any given time when we improve the product. Additionally, we want to be able to provide you with maximum stability of the product and quality of what you get.#›Is Inception a replacement for AI in the Builder?No, Inception is a separate product that is focused on design exploration. You can use it to generate designs and then paste the code into the builder to continue working on it.
[IMG: Webstudio Logo]
Inception Beta is hereWatch demo on YouTubeGet started with Inception

[H1] Built with Webstudio
[IMG: Screenshot of Webstudio]
[H3] Webstudio
79 pages
[IMG: Screenshot of Horizon Church]
[H3] Horizon Church
11 pages
[IMG: Screenshot of Backstage Plugin Framework]
[H3] Backstage Plugin Framework
2 pages
[IMG: Screenshot of Daniliants Group]
[H3] Daniliants Group
1 page
[IMG: Screenshot of Dmytro Karaulov]
[H3] Dmytro Karaulov
1 page
[IMG: Screenshot of Motus]
[H3] Motus
1 page
[IMG: Screenshot of Lorenzo Nucaro]
[H3] Lorenzo Nucaro
13 pages
[IMG: Screenshot of Create Today]
[H3] Create Today
198 pages
[IMG: Screenshot of Chris Wood]
[H3] Chris Wood
5 pages
[IMG: Screenshot of Airdokan]
[H3] Airdokan
29 pages
[IMG: Screenshot of Advantage Constructions]
[H3] Advantage Constructions
2 pages
[IMG: Screenshot of Danny Bribiesca]
[H3] Danny Bribiesca
32 pages
[IMG: Screenshot of Genesis Cleaning Services]
[H3] Genesis Cleaning Services
2 pages
[IMG: Screenshot of Hope Design Studio]
[H3] Hope Design Studio
9 pages
[IMG: Screenshot of Julian Petermaier]
[H3] Julian Petermaier
1 page
[IMG: Screenshot of Rutics]
[H3] Rutics
4 pages
[IMG: Screenshot of Sift]
[H3] Sift
4 pages
[IMG: Screenshot of Simflow Plumbing]
[H3] Simflow Plumbing
13 pages
[IMG: Screenshot of Soulwrx]
[H3] Soulwrx
1 page
[IMG: Screenshot of Bright Workspace]
[H3] Bright Workspace
2 pages
[IMG: Screenshot of Vinicius Moreira]
[H3] Vinicius Moreira
1 page
[IMG: Screenshot of Unsloth AI]
[H3] Unsloth AI
31 pages
[IMG: Screenshot of Matheus Bitencourt]
[H3] Matheus Bitencourt
1 page
[IMG: Screenshot of 360Creators]
[H3] 360Creators
35 pages
[IMG: Screenshot of Aardvark]
[H3] Aardvark
5 pages
[IMG: Screenshot of Salt Lake City Duct Company]
[H3] Salt Lake City Duct Company
8 pages
[IMG: Screenshot of Dominik Mazura]
[H3] Dominik Mazura
12 pages
[IMG: Screenshot of Flagstaff Websites]
[H3] Flagstaff Websites
7 pages
[IMG: Screenshot of Ameer Khan]
[H3] Ameer Khan
2 pages
[IMG: Screenshot of Kannapolis Works]
[H3] Kannapolis Works
2 pages
[IMG: Screenshot of Rezenate Design]
[H3] Rezenate Design
4 pages
[IMG: Screenshot of Bodyform Physiotherapy]
[H3] Bodyform Physiotherapy
3 pages
[IMG: Screenshot of Irwin Outdoors]
[H3] Irwin Outdoors
17 pages
[IMG: Screenshot of Dooodles]
[H3] Dooodles
2 pages
[IMG: Screenshot of Teyuto]
[H3] Teyuto
94 pages
[IMG: Screenshot of Siberian Husky Dog Training]
[H3] Siberian Husky Dog Training
14 pages
[IMG: Webstudio Logo]
Build and publish pro websitesGet started with Builder

[H1] Blog
[H2] Updates
[H3] Inception: a creative, code-first, AI-native design tool
Jul 4, 2025By Oleg Isonen3 min read time
[H3] Making Webstudio AI-ready with Tailwind support
Jun 27, 2025By Oleg Isonen3 min read time
[H3] The new component to render any HTML element
Jun 10, 2025By Bogdan Chadkin4 min read time
[H3] Native scroll-driven animations
May 3, 2025By Oleg Isonen2 min read time
[H3] Content Mode
Dec 28, 2024By Oleg Isonen3 min read time
[H3] Paste from Webflow
Sep 9, 2024By Oleg Isonen3 min read time
[H3] Webstudio CMS Beta and Experts Network
May 13, 2024By Oleg Isonen3 min read time
[H2] Strategy
[IMG: A robot working on UI]
[H3] Moving away from static interfaces in an AI-driven world
Jul 7, 2025By Oleg Isonen3 min read time
[IMG: 3.5:1 with classes and tokens stacked proportionally]
[H3] Study reveals Webflow sites have 256% more classes than Webstudio
Jan 9, 2025By John Siciliano9 min read time
[IMG: Parametric Design in a visual tool is the new No-Code.]
[H3] The future of no-code is parametric design
Oct 14, 2024By Oleg Isonen7 min read time
[H3] Webstudio: A No-Code Frontend for Headless CMS
May 10, 2024By John Siciliano10 min read time
[IMG: Futuristic looking article image. Credit: Milad Fakurian via Unsplash]
[H3] Webstudio's Architecture — an overview
Oct 1, 2023By Oleg Isonen7 min read time
[H3] No-code is inflexible, and code is hard. Here's what we can do about it
Apr 24, 2023By Oleg Isonen6 min read time
[H3] Sustainable Open Source
Mar 20, 2023By Oleg Isonen3 min read time
[IMG: Futuristic looking article image. Credit: Milad Fakurian via Unsplash]
[H3] Why Webstudio, why now?
Feb 27, 2023By Oleg Isonen4 min read time
[H2] Guides
[H3] The 3 Types of Website Builders & How Builders Rank
Jul 4, 2024By John Siciliano6 min read time
[H3] 7 Simple and Overlooked Technical SEO Tweaks for Your Blog
Jun 28, 2024By John Siciliano7 min read time
[IMG: Mac desktop with Webflow Desktop App open]
[H3] Webflow Desktop App: ETA, Workaround, and Alternative
May 2, 2024By John Siciliano4 min read time
[H2] Tools
[H3] 6 Best Drupal Alternatives (Unique Suggestions!)
Jul 2, 2024By John Siciliano11 min read time
[H3] 3 New Website Builder Tools: Modern Tools for Your Next Project
Jun 28, 2024By John Siciliano5 min read time
[H3] 7 Best WordPress Alternatives (Modern Platforms!)
Jun 24, 2024By John Siciliano17 min read time
[H3] 6 Best Open Source No-Code Platforms (Next-Gen Setup)
Jun 18, 2024By John Siciliano7 min read time
[H3] 6 Emerging Digital Transformation Platforms (+ Market Trends)
Jun 18, 2024By John Siciliano10 min read time
[H3] 3 Modern Open-Source Tools for Building Websites
Jun 12, 2024By John Siciliano6 min read time
[H3] Webstudio: Best Alternative in the Webflow vs Framer Debate?
Apr 30, 2024By John Siciliano14 min read time