Take the tour

One app, from first frame to final code.

Real screenshots of Xecil UI working on the Maison fashion app, one of the 45 complete templates included.

Xecil UI design mode with the Maison app screens and the Add effect menu

Prototype mode showing curved flow links between ten Maison screens

Code mode with React and Tailwind code beside a live preview

Import dialog with a pasted React component

Templates panel with the Xecil template pack of 45 complete apps and websites

Full size

01 / DESIGN

A canvas built for app screens

Frames, shapes, text, images, icons and a vector pen, with the precision controls you expect.

Auto layout, constraints and 36 device frames
Components with variants and overrides
Inner and drop shadows, blurs, noise, texture and glass
Image adjustments, masks and blend modes

02 / PROTOTYPE

Link the flow in any direction

Drag from any layer to a screen. Links curve forward, arch back, go up or down, so a busy flow stays readable.

Click, hover, change and after-delay triggers
Navigate, back, overlays, toggles and links
Slide, push, fade and smart animate
Appear, hover, press and loop animations on any layer

03 / CODE

Real React, as you design

Every screen becomes a readable React + Tailwind component with a live preview right beside it.

Edit the code and apply it back to the design
Buttons, links and screen navigation wired up
Export a ready-to-run Vite project
Preflight checks that the code compiles

04 / IMPORT

Code to design

Bring existing work in and keep editing it as real layers, not flat pictures.

HTML pages and whole website folders
React components, Tailwind classes included
Figma files, straight from a link
Images, logos and SVG

05 / TEMPLATES

45 complete apps and websites included

Start from a finished app instead of a blank page. Every screen and every flow is editable.

Fashion, grocery, food delivery and e-commerce
Fintech wallet, ride sharing and flight booking
Stays, real estate, courses, events and fitness
Salon and doctor booking

06 / PREVIEW

Tap through it for real

Run the prototype in a device frame on your desktop, or mirror it live to your phone.

Scan a QR code to open it on your phone
Stays on your local network
Updates as you edit
Share a single-file HTML prototype

Who it's for

New to design or a pro, it fits you.

For beginners

Start from something great.

Pick a premium template and make it yours. Change the words, swap the pictures, try a colour. You learn by doing, on a real app.

Templates with every screen already linked
Design checks point out text that's too small or hard to read
Animation presets you can play right on the canvas
Test it on your own phone with one scan

For pros

Go from idea to handoff, fast.

All the tools you expect, with no subscription. Build systems, prototype real flows and hand developers code they can ship.

Auto layout, components, variants and design tokens
Smart animate, custom easing and motion export
Clean React, Tailwind and HTML, or your original code kept as is
Import from Figma, websites and React

From idea to handoff in four steps.

Every step happens in the same file, so nothing gets lost between design, prototype and code.

Start

Open a complete app template, import a website, React code or a Figma file, or begin on a blank frame.

Design

Lay out screens with auto layout, components and effects. Design checks keep it accessible.

Prototype

Link the flow, add transitions and animations, then test it on your own phone.

Ship

Export React + Tailwind, a Vite project, HTML, images, PDF or design tokens.

Design it. Prototype it.
Ship the code.