🎉 Our free, open source shadcn/ui kit reached 20,000 duplicates on Figma community. Check it out!

We are working on design improvements for our landing pages. For a visual version of this, see this PDF link.

We wrote a free guide on designing interfaces with AI. 

Traditional prototyping takes too long. It's a slow process, where you can spend weeks mapping flows in Figma, designing, then connecting screens.

Even efficient studios struggle to rapidly deliver. Striving for perfection slows down validation, especially for startups that need to validate what they are building.

Meet AI-powered rapid prototyping

Focus on validation

Prioritize validation over pixel-perfect code and design.

Clickable journeys

Experience full user journeys in the browser, the best interactive environment.

Enhanced interactivity

Static Figma designs don't compare to dynamic prototypes.

Data-based: real or fake

Easily import real data or ask to fake data via prompting.

Make ideas real, fast

Rapid iteration

See results in days, not weeks.

Skip design cycles

Focus on what truly matters for the user experience.

From rough to ready in record time

  1. Rough wireframes
    • Define the core flows based on user stories
    • Tools
      • Figma for collaborative design
      • Lovable for collaborative prototyping
  2. Scale the prototype
    1. Take the right ideas to a prototype that scales
    2. Transform user stories and rough wireframes into a cohesive, scalable prototype. With our techniques, we can scale a prototype to 30+ different screens; we won't run into classic vibe coding limits, since we treat the scaling of the prototype like a development project, with its own repository, using similar techniques as full-on dev projcts (issue tracking, version control, continuous integration)
  3. Combine
    • Combine code into a static site generator and link them together using a context-aware code editor
    • Tailwind - Rapid styling
    • React + Next.js - Front-end Javascript framework to move fast

Who is this for?

Early adopter founders

The technology exists, so why not use it?

Budget-friendly

Experiment without the big costs

Validating product ideas

Ideal to validate with actual users

What this process doesn't match with

Complex business logic

Not for custom software with complex business logic

Code quality and testability

The code is essentialy to throw away, not to reuse. Don’t expect code quality and working tests. We focus on validating the interface.

Custom looks

Not for projects with heavy branding requirements: projects will have a “bootstrapped” look.

Complex animation

Not for projects relying on complex animation.

FAQ

What's the price of all of this?

Depending on your needs, rapid prototypes start from €2000 ex. VAT.

Pricing depends on briefing, deadline and expected fidelity.

Can you reuse the code?

The default set-up we use this process with uses React with Next.js and Tailwind.

You will get the best results when you intend to reuse this stack.

AI-generated code is a good starting point but it’s definitely not the final thing you want to ship. In almost all cases, the code should be adapted to higher quality code.

Once the prototype reaches a certain scale, the rate of development slows down tremendously and it’s better to take a step back and think things through.

Who will be working on these projects?

Within Obra we have a team of developers and designers that are using these new techniques.

Curious about this workflow? E-mail us or book a meeting!