Mockup UI with AI in Seconds

Build and edit high fidelity user interfaces using natural language with leading large language models such as GPT-4o and Claude 3.5 Sonnet

START BUILDING UI WITH AI TODAY
Laptop computer and mobile phone with screens of the prototypr ui_w/ AI Studio experience on a white background

WATCH THE VIDEO DEMO

YouTube #short: Watch GPT-4o Generate UI in seconds on prototypr.ai

Generate UI with Leading AI Models

GPT-4o

The flagship model developed by OpenAI

Claude 3.5 Sonnet

A very capable code generation model developed by Anthropic

Gemini 1.5 Flash

A lightweight and efficient model developed by Google

Llama 3 70b

A blazing fast, open source model by Meta

An AI Data Flywheel for improving your UI Outputs

Train Claude 3.5 Sonnet to speak your design language with a personalized UI Data flywheel that aligns outputs to your style as you save more UI

LEARN HOW THIS DATA FLYWHEEL WORKS
An AI Data Flywheel for improving Generative UI output with Claude 3.5 Sonnet

BUILD WITH NATURAL LANGUAGE

Describe an interface with natural language and output a design in seconds with AI

Building user interfaces with AI is fast, fun and easy! Try ui_w/ AI Studio today!

START BUILDING TODAY
a description of a prompt to generate an ecom page using ui_w/ AI Studio
A feed of version history cards for ui_w/ AI Studio

SMART VERSION CONTROL

Keep track of your UI changes with an intuitive Version History

Roll back changes simply by clicking on a version history card. Think of it as better undo functionality that you can scroll through and watch your ui designs come to life

BUILD AI UI's TODAY

GENERATE HIGH QUALITY IMAGES

Edit your AI generated UI with beautiful imagery powered by OpenAI's incredible DALL·E 3

Generate high quality images using the world's number one image generating model in DALL·E 3. Simply click on any image within an AI generated UI and a side menu opens up enabling you to swap in a DALL·E 3 image into your new design. It's that easy.

START BUILDING UI WITH AI
click on a placeholder image in ui_w/AI Studio to bring up DALL·E 3

GENERATE AND DOWNLOAD HTML WITH NO CODE x AI

When you are done generating a UI prototype with AI, export the code and share it with your team

Prototypr makes it easy to export your UI to code. When you are satisfied with your design, just open AI Chat and ask the model to show you the code. It's that easy.

GENERATE UI WITH AI TODAY
an illustration of code
Examples of UI, ads and landing page interfaces on prototypr.ai

SMARTER RESEARCH WITH AI

Get feedback on your UI prototypes with user research studies and analyze results with AI Chat

prototypr.ai offers generative survey ai tools that help you build and edit short surveys in seconds. Accelerate time to insights and get feedback on your designs. Launch a research study with AI today.

LEARN ABOUT AI SURVEYS

FASTER UI GENERATION WITH LLAMA-3

Unlock faster UI editing capabilities with Llama 3

Rapidly edit your designs with natural language using leading open source language models from Meta. Llama 3 is the fastest model on prototypr.ai!

GENERATE UI WITH AI TODAY
Prompt: a llama blasting off into space, pixar inspired, 3d render, ray tracing

MOCKUP A DASHOBARD WITH AI

Imagine taking a mockup of a dashboard and converting it to code in seconds

ui_w/ AI Studio is powered by OpenAI's GPT-4 with Vision, one of the world's most advanced multi-modal large language models. Upload a drawing and output code.

BUILD UI WITH AI TODAY

A DATA FLYWHEEL STEP BY STEP TUTORIAL

How to Build a Generative UI Data Flywheel in ui_w/ AI Studio

STEP ONE

Generate UI, then save it to a UI Collection

The first thing you need to do is to create your first ui and save it using the save menu and tag it as a type of collection.

START BUILDING A UI FLYWHEEL TODAY
A view of a geneative ui landing page, which is then saved as part of a ui collection in ui_w/ AI Studio
The prompt caching menu in ui_w/ AI Studio where you cache your UI collections into a Claude 3.5 Sonnet prompt

STEP TWO

When creating a new UI, load your saved UI Collection into your prompt and cache it

When you load your UI into memory using Claude 3.5's Prompt Caching feature, you are signaling to the model that you want to create UI that has your style. The more UI you have in a collection, the more the output should align to your style.

ALIGN AI OUTPUTS WITH YOUR STYLE

STEP THREE

Generate UI with collection cached. Save output again to UI Collection. Repeat and improve your UI Outputs.

When you save UI in ui_w/ AI Studio, you can use that data to improve your design outputs. Generating and editing ui is simple as describing the interface you want to build. Happy Generating!

GENERATE UI WITH AI TODAY
A high level data pipeline for a Generative UI data flywheel

A huge THANK YOU to the first 5000+ people who signed up to prototypr.ai

-- Gareth Cull, creator of prototypr.ai, ex-Mozilla

gareth cull profile pic

READ THE LATEST FROM THE PROTOTYPR.AI BLOG - STARTUPSHIP ONE

Read how prototypr.ai is fine tuning models to make UI generation better

Apply how prototypr.ai is fine tuning to improve your own AI initiatives in this easy to follow tutorial.

READ ARTICLE
Prompt: fine tuning an AI model, minimalist abstract art, white background

ui_w/ AI Studio FAQ

What is ui_w/ AI Studio? >

ui_w/ AI Studio is the latest product developed by prototypr.ai. It helps people and businesses rapidly build user interfaces using natural language or with pictures.

What models does ui_w/ AI Studio use? >

ui_w/ AI Studio is powered by the latest natural language models by OpenAI, Anthropic and Meta AI. The models available for ui generation are:

GPT-4o - the flagship model from OpenAI

Claude 3.5 Sonnet - a very capable code generation model by Anthropic

Gemini 1.5 Pro - the flagship generative AI model developed by Google

Gemini 1.5 Flash - a lightweight model developed by Google, optimized for speed and efficiency

Llama 3 70b - powered by Groq and developed by Meta AI

GPT-4o mini Fine Tune - an experimental fine tuned model developed by prototypr.ai

There is also chat functionality in Studio which features GPT-4o. Llama 3 was also recently integrated and is available as a fast ui model to help users build user experiences faster with AI.

How long does it take to generate a user interface with AI? >

Time to ui generation really depends on the complexity of the requested interface and the load on the GPT-4 Turbo servers. Some of the example prompts that are available within the interface generate in approximately 30 seconds. If a request takes longer than 30 seconds, the request will timeout and you will have to try again. Prototypr.ai is currently researching ways to improve the speed to ui generation with fine tuning and other methods.

What are the benefits of using prompt caching for UI Generation? >

Prompt caching is an exclusive feature to Anthropic's Claude 3.5 Sonnet model. When you cache ui collection data in a prompt in Studio, Claude 3.5 Sonnet doesn't need to reprocess the entire prompt. This saves on compute, reduces inference time and the amount of input tokens used. In our case, caching ui collections helps to reduce latency, while producing outputs that align more with your saved ui collections. To read more about prompt caching with Claude 3.5 Sonnet, please read Prompt caching with Claude.

What are UI Collections? >

This is a relatively new feature in ui_w/ AI Studio. It's primary purpose is to help you organize your ui into folders or collections as we call it. These collections can be loaded into cache when using Claude 3.5 Sonnet. These cached examples are then used to guide the model's output towards the style of the cached UI collection, resulting in a more personalized LLM output. You can store different entire ui or different components that make up a UI in a collection

Is Claude Sonnet the only model that can cache ui prior to generation? >

Claude isn't alone in caching prompts. Google Gemini offers a prompt caching feature, which ui_w/ AI Studio is looking to implement in the near future for Gemini 1.5 Flash UI Generation. To learn more about Google Gemini's prompt caching capabilities, please visit: Context Caching - Google Gemini Support page

Is there a free trial? >

In this beta period, ui_w/ AI Studio uses credits per generation. When you first sign up you are given 25 credits to test out the platform for free.

How much does it cost after the free trial? >

Currently, ui_w/ AI Studio is free during a limited beta period, but will cost 1 credit per UI generation. You can purchase 50 credits for $25 CAD. There will also be a premium solution in the future in which ui_w/ AI Studio will be a part of.