I'm a product designer, and I built a 20+ screen AI video studio in Lovable. Here's what I learned

Lalita Deshmukh — Fri, 06 Nov 2026 17:24:55 +0000

I'm a senior product designer with 12+ years in fintech and B2B SaaS, not a developer. Over the last few weeks I built Reelpilot, a front-end template for an AI-assisted video creator studio, using Lovable.

It has 20+ screens: a dashboard, content library, analytics, a record and upload flow, a "Create with AI" flow, and a five-step editor that goes from edit to publish. It works in light and dark mode and on mobile.

👉 Live demo: https://reelpilot-story-to-screen.lovable.app/

Here's the design thinking behind it, and what I learned along the way.

The core idea: AI suggests, the creator decides

Most AI tools either do too little or take over completely. For creators, the second one is scary. It's their name on the video.

So I set one rule for every AI feature: it has to be visible, explained, editable and labelled. In practice, that turned into four patterns.

Confidence labels

Every AI suggestion for a title, description, tags or category shows high, medium or low confidence. A low-confidence category suggestion tells the creator "double-check this one" without them having to guess.

"Why suggested"

Each suggestion can be expanded to explain its reasoning. On the thumbnail screen, every AI-picked frame has a "why this frame" note. Trust goes up a lot when the AI shows its work.

Accept, edit or reject

Nothing is applied automatically. Every suggestion has three clear actions, and editing is treated as just as normal as accepting.

Labels that can't be removed

If a video includes AI-generated scenes, the publish screen shows an "AI-generated content" label that the creator can't switch off. It's a small detail, but it shows the product takes honesty seriously.

Designing the states nobody designs

The happy path is easy. The interesting work was in the in-between states:

Upload drops halfway. The upload pauses at 62%, says the connection was lost, confirms the draft is saved, and offers "Resume upload". There's even a demo toggle to simulate the network drop.
A/B testing thumbnails. The result doesn't just name a winner. It says how confident the test is ("95% confident this is real, not luck"), so creators don't overreact to noise.
Publishing with warnings. The publish screen lists things to check, each with a "Fix" link that jumps straight back to the right spot in the editor, but it still lets you publish if you choose to.
What I learned building in Lovable as a designer
Go screen by screen, flow by flow. Asking for one complete flow at a time and reviewing it carefully worked far better than asking for the whole app at once.
Be specific about states. Lovable builds what you describe. Empty, loading, error and success states only appeared when I asked for them.
Review like a design QA. After each build I went through every screen and sent back a list of fixes, just as I would with an engineering team.
Simulated data is enough to test the UX. No backend was needed to feel whether a flow made sense.
The stack

React, TypeScript, TanStack Start, Vite, Tailwind CSS and shadcn/ui. All front end, with sample data.

Try it

👉 Live demo: https://reelpilot-story-to-screen.lovable.app/

If you're building an AI or creator tool and want a head start on the front end, the full source code is available here: https://lalitadeshmukh.gumroad.com/l/reelpilot-template

I'd love feedback, especially on the AI trust patterns. How do you handle AI suggestions in your products?

DEV Community: Lalita Deshmukh

I'm a product designer, and I built a 20+ screen AI video studio in Lovable. Here's what I learned