Refining Your Vision
Generation is only the beginning. MockaUI provides a hybrid editing environment where you can balance perfect precision with AI-assisted expansion.
1. Visual Design Mode
Click any element to activate the Property Panel. This is best for small, precise tweaks where you want direct control over the values.
- Change Typography & Weight
- Adjust Sliders for Padding/Margin
- Pick Brand Colors with Precision
- Modify Border-Radius & Shadows
2. Component Mini-Prompts
Want to change the structure or add a complex state? Use a Mini-Prompt. Command the AI to rewrite just that specific element while leaving the rest of your design intact.
The Precise Workflow
Target
Click any element in the canvas to select it.
Adjust
Use panels for styling or input to double-edit text.
Refine
Apply mini-prompts for complex component logic.
Preview
Instantly see updates with Hot-Module-Previewing.
Export
Grab the final optimized code for your project.
The Toolbox
Theme Injector
Globally swap brand colors and font families across the entire design variant.
Tailwind Surgeon
Directly edit utility classes if you know exactly what you need.
History Engine
Multi-level undo/redo (Cmd+Z) to safely experiment with styles.
Pro Tip: Deep Selecting
Sometimes elements are nested deep inside wrappers. Use the Breadcrumb Navigation at the bottom of the editor to navigate up the DOM tree and select parent containers like Sections or Grids.