Features
Everything you need to design, iterate, and ship beautiful interfaces.
Canvas
Your infinite design space
Design Without Limits
Start with an empty canvas. Drag, zoom, and pan across unlimited space. Drop in images, arrange components freely, and organize your work however makes sense to you.
Inbox
Hi there, I noticed that I was charged twice for this month's subscription...
I'm trying to integrate the webhooks but I keep getting a 403 error...
Would love to see a dark mode option for the dashboard...
The app keeps crashing when I try to log in via Google...
Sarah Jenkins
Sarah Jenkins
Schedule a call
Let's resolve this over a quick chat.
About Customer
Tags
Inbox
Hi there, I noticed that I was charged twice...
Sarah Jenkins
Components
Add, import, and rearrange your mockups
Generate with AI
Describe what you want and let AI create the first version. Refine from there with more prompts or manual edits.
Drag Elements Around
Move elements within your component. Drag a button from a card into the header, reorder list items, restructure layouts visually.
<div class="flex gap-4"><div class="rounded-full bg-blue-500"><img src="avatar.png" /></div>Import from Code
Bring your existing HTML and Tailwind designs to start working with on the canvas.
Copy & Delete
Duplicate or remove elements instantly with a single click.
Bulk Edits
Select multiple elements at once and modify them together. Change styles, spacing, or content across all selected elements.
Sarah Jenkins
Enterprise Account Manager
Reusable Elements
Convert any element into a reusable component. Lock it down so AI can't accidentally change your nav header or footer when editing other parts.
AI
Let AI handle the heavy lifting
AI-Powered Editing
Apply AI changes to an entire component, a single element, or multiple selected elements at once.
Generate Images
Create images with a prompt right on the canvas. No need to leave for visual assets.
Reference Other Components
Select components on your canvas to include as context for AI. Reference your design system or pull in elements from other designs when prompting.
Multi-Select AI
Shift-select multiple elements and apply a single prompt to all of them. Change how all your toggles look in one go.
Generate Variations
Have AI create multiple different takes. Swipe between options to find what works best for your layout or design direction.
Design Review
Get AI recommendations for improving your component's usability and visual design. Apply suggestions with one click.
Design Inspector
Fine-tune every detail with visual controls
Layout Controls
Toggle flexbox, set gap spacing, padding, and alignment. Control width, height, min/max dimensions.
Swap Icons Instantly
Browse and swap icons from the Lucide library. Search, preview, and apply in seconds.
Typography & Fonts
Pick any font from Google Fonts. Adjust size, weight, line height, and text color. Full typographic control.
Hello World
Description text
Edit Copy Directly
Mobile Breakpoints
View and edit mobile-specific values for any property. Hide elements on mobile, change layouts per breakpoint.
Colors, Borders & Shadows
Set background colors, border styles, and shadows. Full control over the visual styling.
Code & Export
Production-ready code, instantly
Card Title
Short description text here.
<div class="rounded-xl..."><img class="w-full..." /><h3 class="font-semibold">...</h3><p class="text-zinc-500">...</p><button class="bg-blue-600...">...</button></div>HTML & Tailwind at the Core
Components are real HTML and Tailwind from the start—not a proprietary format that converts later. AI designs directly in the same code you'll ship.
AI Agent Handoff
Export code for quick handoff to Claude Code or any other AI coding assistant.
Visual Code Panel
See the code in your design inspector. Edit it directly and watch changes reflect in the component.
Code Highlighting
Hover over code sections to see them highlight in your component. Understand the structure visually.
DOM Navigation
Move up and down the DOM tree. See all the code or just the code for the element you've selected.
Copy Code
Copy any component or element as clean HTML and Tailwind. Paste directly into your codebase.
Collaboration
Design together in real-time
Share & Collaborate
Invite your team to collaborate in real-time. Control permissions with Owner, Editor, and Viewer roles.