Beta

A web design tool made for the AI era

Inception is a creative AI tool that lets you experiment with design ideas backed by production-grade code - read more

Design process, Reimagined. Iterate on ideas 10x faster and get exactly what you see in production.

Find your style

Choose from a variety of creative styles instead of starting from scratch

  • Choose a style
  • Choose emotion
  • Choose color and layout
Explore

Explore ideas on an infinite canvas instead of drawing rectangles

  • Generate many versions in parallel
  • Get creative inspirations fast
Make it your own

Refine designs with edits without wasting time moving pixels around

Remix

Found an interesting direction? Create a new frame using the current frame as a starting point to explore it further

Code-first approach

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

Webstudio Logo Mark

Generated with Inception

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, and 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.

Webstudio Logo
Inception Beta is here

Last 30 days

Cloudflare logo
209.3M
Requests
Cloudflare logo
8.5 TB
Data served
Github logo
6
Issues closed
Github logo
113
Merged PRs

Built to scale

Total

Webstudio logo
180.2K
Projects
Github star
7.7K
GitHub stars
Discord logo
5.2K
Discord members
Webstudio logo
90.5K
Users
globe