AI prototyping

Prompt window side-by-side with a Payment checkout process step for entering the payment method

overview

purpose

enhance UX delivery with speed, interactability and fidelity/details

applied skills

vibe coding, CSS & HTML

focus

AI prototyping based on design systems

AI prototyping for fast built and interactability

AI prototyping for quick A/B testing

outcomes

Platform page design with full brand & existing UI adherence

50% faster prototype built

More efficient workflow for testing complex element variations, e.g. tables

2025 - current

AI Prototyping

Figma Make

Platform page design for brand adherence

The problem at hand

Complex platform build (full-screen) with the possibility to transfer code to an existing codebase and therey keeping the structure, layer naming as well as branding in mind, was to be solved.

The main goal was to NOT break existing structures, like the pre-build design management system that carries styles, behaviors and branding, because they were already coded and a re-build would result in more effort and no buy-in for stakeholder like PO, developers as well as C-suite.

Figma Make prompt window side-by-side with output UI of a dashboard

My approach

The starting parameters for the project were:

Design Management System

It carried branding, components style and their behavior

Two sample screens

Mid-to high-fidelity prototypes (structure and layers) helped the AI with interpretation towards target outcome

Iterative description for fine-tuning and for target behaviors

Prompting fixes to style and enhancing behaviors of components that was not part of the design management system

Accuracy in the prototype took some time to reach through prompting, so I also chose the alternative route of searching and manipulating classes and CSS myself.

The outcome

The prototype showed target behavior of anchoring the tabbar with scroll, and also maintaining responsiveness of the table on screen re-sizing. In addition, branding was adhered and components matched already implemented states, so developers could continue building from there.

Animation of a monitoring dashboard with a side navigation, where a tab bar anchors on top of the screen with scrolling down

lovable

Fast built of checkout process behavior

The problem at hand

Efficiently and quickly test acceptance, validity and feasibility of a 2FA method - via email - in a payment checkout process, in order to have a basis for discussion with developers, PO and legal.

It needed to be tested and understood, whether an email-enabled 2FA method is being detected as "fraud" or whether an account email address can be coupled to a payment process.

To test the hypothesis and to have a basis for discussion with mentioned stakeholders, the final step in a checkout process has been designed/ai-coded with lovable, where users would enter their credit card information, followed by entering a 4-digit authentication code.

Screenshot of a checkout process for user authentication

My approach

Starting with a set of instruction for the initial build included setting base parameters for:

Layout

Colum structure design, stepper design and radio button switch functionality

Style

Color for CTAs, background and states

UX writing

Initial wordings and details for buttons, copy text, placeholder texts

Apart of working functionalities like radio buttons with their respective UI content (clickable), the CTA on the first screen of the credit card option "Pay now" starts the user journey of credit card usage: An automation fills the input fields and navigates to the 4-digit screen.

Since the focus is on the screen for entering 4 digits and not on entering the credit card information, users should not be irritated with details, but only holistically understand what is going on, a typing-animation made most sence can could be coded very easily.

Fine-tuning the application was done in two ways: on the on hand, there was prompt-based refinement, e.g. for EUR-formatting. On the other hand, custom manipulation of the CSS /HTML code has been done in lovable for color adjustments, border parameters or paddings/margins.

The outcome

An interactable prototype that gives the opportunity to test with stakeholders acceptance, feasibility and legal aspects of this user journey

Animation of a checkout process for user authentication

view AI prototype

external link to lovable.dev

v0 (Vercel)

Complex element built for A/B testing

Virtual room tours

Various subpages of a real estate agent's website were designed to complement their project portfolio and to suggest a new design direction in presenting houses.

Virtual tours (videos) were a main requirement to be implemented in the new project presentations. A grid system with structural elements (=stability), combined with non-conventional design idea (=creativity) lead to subtle-animated website for the housing market.

My learnings

Efficient way of working with AI

Better input = better output

Whether working with an existing design management system or creating a PRD (Product Requirements Document) with Claude, ChatGPT or others, the input defines the output and the number of iterations to be done later on.

This is especially true for larger and more complex feature developments, like responsive table designs, so the solution proposed by an AI doesn't differ significantly from your target in the first run.

Without guidelines, the AI hallucinates too much on the target design, leading to longer, more cumbersome iterations, and potentially missing the point of the prototype.

Different AI tool = different (main) purpose

While Figma Make is a good choice, when it comes to iterating based on a foundation (like an existing design system) or with an existing set of screens, that can be taken as a reference (Lofi or Hifi), lovable and v0 are much better, when it comes to use-case specific, highly interactive builds of the ground, when a set of instructions is given.

Figma Make, compared to lovable and v0 is much slower for tiny, quick edits, which could slow down the workflow as well. lovable and v0 facilitate fast editing, also in CSS and HMTL more naturally.

These are two different approaches, which come with product design dependencies, project build speed and accuracy in output.