Design UI with AI.

Mockwell is an AI-powered design canvas that lets you ideate freely, iterate visually, and export clean Tailwind code.

Start Building Free See Features

No credit card required.

Describe what you need

Start from an empty canvas. Tell AI what to build.

Watch it come to life

Your component appears instantly on the canvas.

Refine with a prompt

Iterate on the design with natural language.

Placeholder

Placeholder text

Saved

Generating UI...

Support App Inbox

Inbox

Sarah Jenkins 12:45 PM

Issue with subscription billing

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this?

Billing

Marcus Thorne 10:20 AM

API Documentation Question

I'm trying to integrate the webhooks but I keep getting a 403 error. Is there a specific IP range I need to whitelist?

Elena Rodriguez Yesterday

New Feature Request

Would love to see a dark mode option for the dashboard. Any plans for this in the roadmap?

Tom Wilson Yesterday

The app keeps crashing when I try to log in via Google on my Android device.

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

12:48 PM John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Generating UI...

Copy & paste

Explore ideas by duplicating and modifying existing components.

Select elements deeply

Dive into component structure and styles with the design inspector.

Manual edits

Make precise changes to your design.

Placeholder

Placeholder text

Saved

Support App Inbox

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Support App Inbox 2

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

...div.flex

Display

Base

Direction

Base

Justify

Base

Align

Base

Gap

Base

Width

Base

Height

Base

Max W

Base

Max H

Base

Min W

Base

Min H

Base

Aspect Ratio

Base

Font

Base

Weight

Base

Background

Base

—

Shadow

Base

Corners

Base

Borders

Base

Background Image

Insert Image

Adds an <img> tag inside this element

Padding

Base

Margin

Base

⌘C

⌘V

Zoom and inspect

Pinch to zoom into any detail on your canvas.

Resize with precision

Drag handles to resize any component.

Granular AI edits

Have AI modify specific parts of your design, without affecting the rest.

Placeholder

Placeholder text

Saved

38%

Support App Inbox

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Support App Inbox 2

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Regenerating UI...

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Copy any element

Right-click to copy elements between components on your canvas.

Paste and replace

Replace any element with a copied design in one click.

Placeholder

Placeholder text

Saved

Support App Inbox

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

Note: Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Support App Inbox 2

Sarah Jenkins

Active now

Today

Sarah Jenkins 12:45 PM

Hi there, I noticed that I was charged twice for this month's subscription. Could you help me look into this? I've attached a screenshot of my bank statement below.

John Doe (You)

Hello Sarah! I'm sorry to hear about the double charge. Let me check your account billing history right away. One moment please.

John Doe (You) 12:48 PM

Checked Stripe logs. Transaction #4829 and #4830 were both processed within 2 minutes. Likely a double-click on checkout.

Sarah Jenkins 12:52 PM

Thanks John, appreciate the quick response!

Knowledge Base V1

Help Center Getting Started

Setting up your professional profile for the first time

John Doe

Oct 24, 2023

6 min read

Welcome to the platform! Your profile is the heart of your experience. Taking a few minutes to set it up correctly will help your team members find you and ensure you get the most relevant notifications.

1. Accessing your settings

To begin, click on your avatar in the bottom-left corner of the sidebar and select Workspace Settings . From here, navigate to the "Profile" tab.

Pro Tip: Use a clear photo

Profiles with clear, professional photos receive 40% more engagement from team members in collaborative projects.

2. Customizing notifications

Don't get overwhelmed by pings. You can customize exactly what triggers a notification and through which channels (Email, Desktop, or Mobile).

Set your "Do Not Disturb" hours to protect your focus time.
Enable desktop notifications for direct mentions only.
Choose weekly digests for low-priority project updates.

Was this article helpful?

142 people found this useful

Knowledge Base V2

Knowledge Base

Setting up your workspace

Setting up your workspace for maximum productivity

Alex Rivera

Updated 2 days ago

5 min read

Welcome to the team! This guide will walk you through the essential steps to configure your workspace. Whether you're a developer, designer, or project manager, these settings will help you stay organized.

1. Personalize your profile

First impressions matter. Navigate to Settings > Profile to upload a clear avatar and set your local timezone. This helps teammates know when you're available for collaboration.

Pro Tip: Setting your timezone correctly will automatically adjust notification schedules to prevent pings during your off-hours.

2. Join relevant channels

Workspaces are organized by channels. We recommend joining at least three:

#announcements — For company-wide updates.
#general — For casual conversation and watercooler chat.
#team-product — Or your specific department's main hub.

3. Configure Notifications

To avoid burnout, we suggest "Direct Mentions Only" for most busy channels. You can override these settings for specific high-priority projects.

Was this article helpful?

1,248 views

And that's just the start

Beyond AI generation and canvas editing, Mockwell gives you everything to go from idea to production.

Export Component

Preview

Code

Jane Doe

</h3>

Product Designer

</p>

</div>

Copy HTML

Download

Export Clean Tailwind

Your designs export as production-ready Tailwind CSS. Hand it to engineering — or ship it yourself.

Drop images on canvas

100%

Drop in Images

Add screenshots, assets, or reference images. Arrange them alongside your AI-generated components.

Generated image

An illustration of a rocket launching from a laptop for the onboarding empty state...

New Image

512 x 512 px

Generate

AI Image Generation

Generate images right on the canvas with a prompt. No need to leave Mockwell for visual assets.

Share "Landing Page"

Invite teammates to collaborate

Email address

Jamie Carmody

[email protected]

Owner

Alex Kim

[email protected]

Editor

[email protected]

Pending invite

Viewer

Share & Collaborate

Invite your team to a shared canvas. See each other's changes as they happen.

Go from idea to shipped UI in one sitting.

No design handoff. No rebuilding in code. Just describe, refine, and export.

Get Started for Free

Design UI with AI.

Describe what you need

Watch it come to life

Refine with a prompt

Placeholder

Inbox

Copy & paste

Select elements deeply

Manual edits

Placeholder

Inbox

Inbox

Zoom and inspect

Resize with precision

Granular AI edits

Placeholder

Inbox

Inbox

Copy any element

Paste and replace

Placeholder

Inbox

Inbox

Help Center

Collections

Quick Links

Setting up your professional profile for the first time

1. Accessing your settings

Pro Tip: Use a clear photo

2. Customizing notifications

Was this article helpful?

Knowledge Base

Setting up your workspace for maximum productivity

1. Personalize your profile

2. Join relevant channels

3. Configure Notifications

Was this article helpful?

And that's just the start

Export Clean Tailwind

Drop in Images

AI Image Generation

Share & Collaborate

Go from idea to shipped UI in one sitting.