CruxDevCruxDev Tools Studio Prompts
components Utility • Zero-Server Privacy • 100% Client-Side

UI Mockup & Wireframe Studio

Design app and web screens in your browser: device frames, auto layout, components with overrides, a UI kit, clickable prototypes and dev-mode export to HTML, CSS, Tailwind, SVG, PNG and PDF.

Overview

An editor for app and website screens that runs entirely in your browser. Draw device frames for iPhone, Android, iPad or a 1440 desktop, build layouts with auto layout, reuse components with per-instance overrides, switch Light and Dark token modes, wire up a clickable prototype with hover states and smart animate, and hand off HTML, CSS, Tailwind, React or Vue code. Nothing is uploaded and no account is needed.

How It Works

Start from a template such as a login screen, dashboard, landing page or mobile onboarding flow, or add a blank device frame. Draw with the frame, rectangle, ellipse, line and text tools, drop in images, pick icons, or insert ready-made UI kit pieces like buttons, inputs, cards, navbars, tab bars, modals and tables in a wireframe or clean style. Shift+A adds auto layout, Ctrl+Alt+K makes a component, and Prototype mode links any layer to a frame so Play opens a clickable preview.

Step-by-Step Usage Guide

  1. Pick a template or add a device frame such as iPhone 16, Android or Desktop 1440 from the toolbar.
  2. Insert UI kit components and icons from the Assets tab, or draw shapes and text with the F, R, O, L and T tools.
  3. Select a group of layers and press Shift+A to stack them with auto layout, then set gap, padding and fill or hug sizing.
  4. Switch to Prototype mode, select a button and drag its handle onto another frame, then press Play to click through.
  5. Open Dev mode to copy CSS or Tailwind classes, or use Export for PNG at 1x to 3x, SVG or a multi-page PDF.

Technical Specifications & Standards

Auto layout is a real stack engine rather than a visual trick. Each frame lays out its children along one axis with a gap, four padding values, packed or space-between distribution and start, centre, end or stretch alignment, can wrap onto new lines or become an equal-column grid, and every layer can be fixed, hug its contents or fill the remaining space within optional min and max sizes. A child can override the frame's alignment or opt out of the flow with absolute positioning. Nested stacks are resolved inside out, so a fill child that is itself a stack reflows at its assigned width. Free-form frames apply constraints instead: left, right, left and right, centre or scale, cascading through nested frames when you resize a parent. Components keep a single main layer tree and can be combined into variant sets with properties such as State or Size, plus boolean, text and instance-swap properties; each instance is rebuilt from it at render time with your text and colour overrides layered on top, so editing the main updates every copy while overrides survive, and Detach bakes the result into ordinary layers. Shared colour and text styles act as design tokens with optional modes such as Light and Dark, set per frame and exported as themed CSS custom properties. A lint check flags low-contrast text against WCAG AA, colours that match no token and detached instances. Dev mode shows the CSS for any layer and exports a frame as HTML with CSS, using flexbox for auto layout frames and absolute positioning elsewhere, or as Tailwind arbitrary-value classes. The canvas, SVG, PNG and multi-page PDF exports all draw from the same resolved tree, so what you export matches what you see. Work autosaves to IndexedDB and can be saved as a .cruxui file.

Targeted Use Cases

  • Wireframing a mobile app flow before any code is written, using the greyscale kit.
  • Mocking up a SaaS dashboard or marketing landing page at 1440 pixels wide.
  • Building a clickable onboarding prototype to test with users on a laptop.
  • Handing a developer the CSS, flexbox HTML or Tailwind classes for a finished screen.
  • Keeping brand colours and type sizes as tokens and exporting them as CSS variables.
  • Sketching an idea on a locked-down machine where installing a desktop design app is not allowed.

Notes & Gotchas

  • Use auto layout for anything that holds text, so buttons and cards grow with their labels instead of clipping.
  • Turn repeated pieces such as buttons or list rows into components early and override text per instance rather than copying.
  • Bind fills to colour styles so a single token edit restyles every screen and the exported CSS variables stay in sync.
  • Save a .cruxui file before clearing browser data, because the autosave lives only in this browser's IndexedDB.

Frequently Asked Questions

Is this a free Figma alternative?

It covers the core Figma workflow for UI screens: frames, auto layout, components with overrides, styles, prototyping and dev handoff. It runs in the browser for free with no account. It does not offer real-time multiplayer editing, and files stay on your device.

How does auto layout work here?

A frame with auto layout stacks its children horizontally or vertically with a gap and padding. Children can be fixed size, hug their content or fill the free space, and the frame itself can hug its children. Alignment supports start, centre, end and stretch, and distribution supports packed or space between.

Can I export my design to HTML and CSS?

Yes. Dev mode exports any frame as a standalone HTML file with CSS. Auto layout frames become flexbox with matching gap, padding and alignment, other layers use absolute positioning, and colour styles become CSS variables. A Tailwind version with arbitrary-value classes is also available.

Do instances update when I change the main component?

Yes. Instances are rebuilt from the main component every time it changes, including size changes from auto layout. Text and colour overrides you set on an instance are kept, and Detach turns an instance into regular editable layers.

Where is my work saved?

It autosaves to IndexedDB in this browser a moment after each change, and Ctrl+S downloads a .cruxui file you can open later or on another computer. Nothing is sent to a server, including images you place.

What do the prototype transitions do?

Interactions fire on click, hover, press or after a delay, and can navigate, open an overlay, go back, scroll to a layer, open a link, switch a token mode or change a component to another variant. Transitions are instant, dissolve, slide in from any side, or smart animate, which tweens layers with matching names. The player shows phone and tablet frames inside a device bezel, keeps a back stack, and briefly highlights hotspots when you click somewhere that is not linked.

Related tools

  • Graphic Designer (Posters, Social Posts & Thumbnails) - Design posts, thumbnails, posters, flyers and newsletters from 114 editable templates. Parent pages, threaded text, columns, text wrap, CMYK swatches, preflight and vector PDF with bleed and crop marks, all in your browser.
  • Vector Editor (SVG, Pen Tool & Boolean Paths) - Draw and edit vector art in your browser: pen, pencil, shapes and text, gradients, boolean path operations, layers, snapping and smart guides, then export clean SVG, PNG up to 4x or a vector PDF. Nothing is uploaded.
  • CSS Grid Builder - Visually design CSS Grid layouts with drag-free controls. Get production-ready CSS instantly.
  • Glassmorphism Generator - Tune backdrop-filter blur, background opacity, and border. Get copy-ready frosted-glass CSS instantly.
  • UI/UX Component Atlas - 300+ canonical components across Flutter, Jetpack Compose, SwiftUI, React Native, React, Vue, Tailwind & HTML/CSS — live previews, copy-ready code, official docs, and a full ecosystem map.
  • CSS Keyframe Animation Timeline Studio - Design smooth keyframe animations with easing curves, timeline previews, and production-ready @keyframes CSS.