Better UI with 21st Dev and Mobbin

Contenido del curso

Principios de Growth con IA

Habilidades transversales

Profundizando en palancas de crecimiento

Growth como cultura

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:00

Better UI with 21st Dev and Mobbin

Curso de Growth Mindset para Equipos

Clase 8 de 16

Clase 8 / 16

Recursos

Building prototypes with low-code tools is faster than ever, but most of them end up looking the same. If you want your platform to stand out, you need to feed your tool with strong design references, real interactions and a clear visual personality. That's where curated libraries like 21st Dev and Mobbin come in.

Why do design references matter in low-code prototypes?

When anyone can spin up an app in minutes, the differentiator is no longer speed, it's taste. Good references shortcut the design process and push your AI tool to deliver something polished instead of generic.

You don't need to be a designer to ship a beautiful product. You do need to start collecting interfaces, animations and patterns that you find inspiring. Think of it as building your own visual library.

What is a design reference? It's a screenshot, component or full screen from another product that you use as visual input for your AI tool, so it can replicate the look, feel or interaction in your own project.

How do I use 21st Dev to find UI components?

21st Dev is a catalog of UI blocks and components you can preview live. When you click any element, you get an interactive demo showing exactly how the component behaves, including hover states, search bars or image uploads.

What makes it powerful is that you can grab the code directly in TypeScript and replicate it in your project. And if you don't want the code, you still have two valid moves:

Take a screenshot of the component you like.
Extract the color palette from that capture.
Pass either one as reference to your low-code tool.

That flexibility is what turns a static library into a real design accelerator.

How do I use Mobbin to inspire web platforms?

Mobbin is a reference library full of real apps and websites organized by brand and section. Since the example project is a web platform, the workflow is to filter by web, pick a brand whose style fits the vibe you want and capture the sections you'd like to mimic.

How do I feed references to my low-code tool? Upload the screenshots into your project and write a prompt asking the tool to match the visual style and interactivity of those images, including animations.

That's the whole trick: a contextualized prompt plus visual inputs. The tool then rebuilds your homepage, login screen and internal flows with a coherent identity.

What changes when you add references to your project?

In the demo, the platform went from a plain prototype to a branded experience in a single iteration. After sending the references with a prompt asking for animations and interactions, the result included:

A new homepage with built-in animations.
A personalized footer tailored for customer success teams.
A redesigned login screen consistent with the rest of the app.
A welcome-back animation when signing in.

The editing flow also got tighter. Saving a draft now triggers validations like "name is required" or "add at least one image", and publishing works smoothly. Same database, same logic, completely different look and feel.

Why is a contextualized prompt so powerful?

A generic prompt gives you a generic interface. A prompt anchored to real references gives the model concrete visual direction, so the output feels intentional instead of templated. That's the gap between a prototype that looks like everyone else's and one that feels like yours.

How should I start building my own reference library?

Start consuming design with intention. Every time you use an app or website that feels good, ask yourself why and save it. A few habits help:

Screenshot interactions you enjoy, not just static screens.
Organize references by type: onboarding, dashboards, empty states, forms.
Note what specifically works, like the animation, the spacing or the color contrast.

Over time, that personal library becomes your biggest design asset, especially when you pair it with tools like 21st Dev and Mobbin.

Share in the comments your before and after: how your platform looked at first and how it evolved once you added your own references.

Resumen

Why do design references matter in low-code prototypes?

What is a design reference? It's a screenshot, component or full screen from another product that you use as visual input for your AI tool, so it can replicate the look, feel or interaction in your own project.

How do I use 21st Dev to find UI components?

What makes it powerful is that you can grab the code directly in TypeScript and replicate it in your project. And if you don't want the code, you still have two valid moves:

Take a screenshot of the component you like.
Extract the color palette from that capture.
Pass either one as reference to your low-code tool.

That flexibility is what turns a static library into a real design accelerator.

How do I use Mobbin to inspire web platforms?

How do I feed references to my low-code tool? Upload the screenshots into your project and write a prompt asking the tool to match the visual style and interactivity of those images, including animations.

That's the whole trick: a contextualized prompt plus visual inputs. The tool then rebuilds your homepage, login screen and internal flows with a coherent identity.

What changes when you add references to your project?

A new homepage with built-in animations.
A personalized footer tailored for customer success teams.
A redesigned login screen consistent with the rest of the app.
A welcome-back animation when signing in.

Why is a contextualized prompt so powerful?

How should I start building my own reference library?

Start consuming design with intention. Every time you use an app or website that feels good, ask yourself why and save it. A few habits help:

Screenshot interactions you enjoy, not just static screens.
Organize references by type: onboarding, dashboards, empty states, forms.
Note what specifically works, like the animation, the spacing or the color contrast.

Over time, that personal library becomes your biggest design asset, especially when you pair it with tools like 21st Dev and Mobbin.

Share in the comments your before and after: how your platform looked at first and how it evolved once you added your own references.

Principios de Growth con IA

Growth Strategy With AI That Moves Metrics

Growth como sistema, no como rol y IA como amplificador

Cómo aplicar inteligencia artificial para amplificar el impacto de growth

Motores de crecimiento y canales de adquisición para empresas

Growth Loops vs Funnels for Acquisition

ICE vs RICE: How to Prioritize Growth Bets

Habilidades transversales

Build a Prototype With AI in Minutes

Better UI with 21st Dev and Mobbin

CAC vs LTV and Why Your Growth Model Is a System

Automatización con IA: crear posts desde transcripciones en Notion

Profundizando en palancas de crecimiento

How AI Is Reshaping Go-To-Market Roles

4 Questions That Fix Your Monetization Model

Retención: Iniciativas que generen impacto

How to Read Retention Curves and Cohorts

Growth como cultura

Eliminación de barreras organizacionales para adoptar IA

Actuar como owner, influenciar y managing up

Better UI with 21st Dev and Mobbin

Progreso del curso

Principios de Growth con IA

Habilidades transversales

Profundizando en palancas de crecimiento

Growth como cultura

Recursos

Recursos