How I designed Sarion’s interface without a designer, using AI and modern tools

In the fast-paced world of building MVPs, the user interface is often seen as something to tackle later. But what happens when it’s just you, an idea, and a bit of time? In this article, I’ll share how I designed the UI of Sarion from scratch—an AI-first assistant for managing TODO lists and notes—without a designer’s help and with deep AI integration from day one.

This process was guided by artificial intelligence and modern tools, showing that it’s possible to achieve a solid, consistent, and modern interface starting from a rough idea, even without graphic design skills.

1. The prototype with Mastra AI and ai-sdk

The first phase started right from the prompt.

Thanks to Mastra AI, an open-source full JavaScript/Node.js framework built to orchestrate real AI agents, I developed a AI agent capable of handling real interactions: reading and writing notes, creating tasks, breaking down complex activities, and much more. All this by leveraging a pipeline of tools and workflows that can be described as code.

At the same time, I used ai-sdk by Vercel to easily integrate AI into the frontend interface. This package is designed to simplify building AI-driven conversations in React/Next.js, with support for streaming, custom tools, and reactive UI interfaces. This allowed me to quickly prototype a working AI chat with just a few lines of code.

2. The first UI: a white-on-black wireframe

With the first AI features live, I needed a minimalist UI to test the flow.

Without worrying too much about colors, icons, or fonts, I chose a wireframe-style approach: black background, white text, grid layout. This approach reduced decision complexity and let me focus on UX and the behavior of the AI agent.

The result was a bare-bones UI that was already usable, perfect for validating user–AI interactions and task functionality.

3. Homepage with Lovable: a beautiful, ready-made template

Once the prototype was validated, it was time to build a landing page to explain what Sarion is and attract the first users.

To do this, I used Lovable, a modern UI generator for startups that produces ready-to-use React + TailwindCSS code, mobile-first and accessible.

In just a few clicks, Lovable provided me with:

• A consistent layout
• Readable typography
• Clean, reusable components

From there, all it took was cloning the template locally to start customizing the colors and text directly in my development environment.

4. Migrating to Next.js

With the basics in place, I migrated everything to Next.js 15 App Router to take advantage of:

• Flexible file system-based routing
• Server Actions and AI response streaming
• Edge runtime for real-time performance and interactivity

This choice made the project ready for scalability and perfectly suited to real-time AI integration.

5. Unifying style for the Chat UI and TODO/Notes pages

Once the homepage style was set, I carried it over to the functional sections as well:

• Chat UI: the main interface for communicating with the AI agent, designed to be clean, readable, and unobtrusive
• Task & Notes Management: a simple and tidy tabular view, with minimal color and a focus on mobile usability

Even without a designer’s support, the interface now maintains visual consistency, thanks to TailwindCSS, grid-based layouts, and reusable components inspired by modern UI/UX best practices.

Conclusion

Building an AI-driven MVP without a designer is possible. The trick is to start from what you know (writing code, integrating AI) and use the right tools to fill in the gaps: minimal wireframes for testing, Lovable to get off the ground, Tailwind for refinement.

With Sarion, it all came together in 4 weeks, solo, with a little help from Windsurf.

Stack used

• AI Framework: Mastra AI
• Frontend: Next.js 15 + Tailwind CSS
• Backend: Node.js
• AI Interface: ai-sdk.dev
• UI generator: Lovable.dev
• Hosting: Vercel
• Database: MongoDB Atlas (app data) + Upstash Redis (AI agent memory)

Do you want to build your own AI-first MVP?

Keep following the blog—soon I’ll share in-depth details about building a modern AI-first app.