Hero section image with stack cards of website sections, character figures, enemy figures and coding tools.
Hero section image with stack cards of website sections, character figures, enemy figures and coding tools.
Hero section image with stack cards of website sections, character figures, enemy figures and coding tools.

AI Supercharged Product Design

Lightning-fast iterations, high-quality asset generation and bridging the gap between design and development.

Overview

Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
THE TOOLS

Full AI Stack

ChatGPT for product strategy, Lovable and Figma Make for frontend, Supabase for data, and Hugging Face for APIs.

This project was a case study in fully AI-supported workflows, testing the limits of what’s achievable.

The Pipeline

Intelligent prompting for rapid prototypes, Figma to Cursor for interactive components and Midjourney for early concepts.

Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
THE RESULTS

Control-Focused Workflow

The main outcome of the study was a robust process, that can be extended with AI functionality at any point of the process, making it extremely flexible and robust.

Developed Game Idea

A real-time fantasy character generator, a striking one-pager presentation and a developed story & visual style.

Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
THE CHALLENGES

Questionable Returns

Most agentic AI lives in the iterative MVP phase of product development, making it hard to measure real business impact.

The key challenge isn’t whether AI can be used, but whether it can be utilized in a way that achieves significant ROI.

Avoiding the Hype

All-in-one vibe coders are great for generating buzz but questionable when it comes to delivering real value.

The true impact lies in embedding micro-flows of AI functionality into established workflows.

Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
Abstract designer with a laptop illustration.
THE IMPACT

Intelligent Prototyping

Smart prototyping can be applied at the component, screen, or flow level through the MCP server, adding animations or functionality with incredible speed and flexibility.

Extending Horizons

AI isn’t a silver bullet, but it unlocks incredible potential for designers, allowing them to add logic and ship working demos, a capability once reserved for developers.

Real Benefits of AI

Preliminary Research

I incorporate AI into my early research process to automatically cast a wide net in terms of exploring what is out there and setting a direction for a project.

Below is an example of an N8N workflow that sources a task from Google Sheets, filters out keywords, and runs automatic research on them while writing the findings back into the sheet. This way, I can get some early research done automatically just by documenting upcoming tasks into Sheets.

Image 01

-

N8N Automated Research

Image 01

-

N8N Automated Research

Image 01

-

N8N Automated Research

Human In The Loop

Since LLMs are prone to hallucinations and stating untrue statements with high confidence, it is crucial to use the AI research as a starting point and double-check the output. Never rely on it completely or use it for emulating user responses.

Light-Speed Ideation

AI writes code and sets up design systems faster than any human can. This can be leveraged heavily in the exploration and ideation phases.

Instead of manual, time-consuming look-dev, we can move through a large volume of ideas quickly and discard them as needed, without attachment bias.

Five floating cards stacked together, each showing a distinct design prototype.
Five floating cards stacked together, each showing a distinct design prototype.
Five floating cards stacked together, each showing a distinct design prototype.

Image 02

-

5 Quick Design Prototypes

Image 02

-

5 Quick Design Prototypes

Image 02

-

5 Quick Design Prototypes

Systemic Prompting

This approach will burn through AI credits like no tomorrow. A systemic prompting method, with controlled keyword variations targeting design or structure is essential for strong price-to-performance results.

Component Granularity

Perhaps the biggest unlock for day-to-day design workflows is the ability to target specific flows or components in Figma and infuse them with AI through an MCP server in Cursor, allowing for fast iteration at any point in the process.

Video 01

-

AI-Driven Component to Code

Video 01

-

AI-Driven Component to Code

Video 01

-

AI-Driven Component to Code

Instant Enterprise Value

When building cross-platform SaaS products, AI is often ineffective because of limited contextual understanding and an inability to interconnect and build on complex concepts.

With this method, we eliminate the need for LLMs to understand the broader landscape and instead focus their power on specific chunks.

Extending Horizons

Using AI agents to help write code marks a monumental shift in extending the reach of a talented designer.

We already have the underlying principles of structure and aesthetics established, which enables us to explore conditioning logic, backend solutions, and specific agents and channel them into polished and intuitive products.

Digital products are solved in pixels, and now a high-performing designer can go further to deliver the final feel of a shipped product early in the process.

Video 02

-

AI Functionality and Backend

Video 02

-

AI Functionality and Backend

Video 02

-

AI Functionality and Backend

Sobering Limitations

Usage Limit Hell

Sooner or later, we run into usage limits for prompting. Some companies are even reducing available quotas in real time to maximize profit margins.

The crucial thing is to gain as much experience as possible now, while generous free tiers are still available. Another hack is Figma Make, which does not yet enforce limits, making it an excellent learning resource.

Four cards displaying usage limits in Loveable, ChatGPT, Cursor, and Figma.
Four cards displaying usage limits in Loveable, ChatGPT, Cursor, and Figma.
Four cards displaying usage limits in Loveable, ChatGPT, Cursor, and Figma.

Image 03

-

Usage Limits Everywhere

Image 03

-

Usage Limits Everywhere

Image 03

-

Usage Limits Everywhere

Mid Output

AI will not turn mediocre designers into top performers. The initial output is often painfully mid, comparable to a junior or intern-level designer, and requires a large amount of re-prompting to reach high-quality results.

Two cards showing AI-generated designs with poor contrast, mismatched colors, and misaligned components.
Two cards showing AI-generated designs with poor contrast, mismatched colors, and misaligned components.
Two cards showing AI-generated designs with poor contrast, mismatched colors, and misaligned components.

Image 04

-

Disappointing AI Output

Image 04

-

Disappointing AI Output

Image 04

-

Disappointing AI Output

Iterate & Refine

AI agents often stumble on accessibility, content layering, spacing, hierarchy, and consistency, issues that to humans appear obvious at a glance.

Take the Initial output as a starting point and systemically work on elevating the design level step by step. This is where deep craft and taste of a designer take centre stage.

The Workflows

Full AI Vibe Ride

Undoubtedly, the industry benefiting most from the AI boom is the entrepreneurial sector.

Taking digital products from idea to shipping has never been easier. The obvious question is how we ensure that actual value is delivered to users and the correct products are built. That is the part AI cannot help with.

Workflow showing the process from a ChatGPT requirements document, to Midjourney visuals, to a working Loveable app.
Workflow showing the process from a ChatGPT requirements document, to Midjourney visuals, to a working Loveable app.
Workflow showing the process from a ChatGPT requirements document, to Midjourney visuals, to a working Loveable app.

Image 05

-

Full AI Workflow

Image 05

-

Full AI Workflow

Image 05

-

Full AI Workflow

Solid Basics are Key

In these circumstances, where AI brings you to a good-enough starting point, solid principles of user-centric design are crucial.

To avoid producing AI slop nobody actually needs, it is more important than ever to understand your user base and market fit.

AI can be leveraged here by going to market fast, testing MVPs early and pivoting on the spot as needed, with the flexibility of quick re-builds.

Control Workflow

This flow focuses on delivering instant value to targeted bottlenecks in the digital product design process.

Sub-loops of this workflow can be deployed in enterprise pipelines today to facilitate innovation, requirement shaping, design system prototyping, early feature flow exploration, and internal MVPs.

Diagram showing AI workflows with requirements from ChatGPT, visuals from Midjourney, design in Figma, interactivity via Cursor, and publishing with Loveable and Framer.
Diagram showing AI workflows with requirements from ChatGPT, visuals from Midjourney, design in Figma, interactivity via Cursor, and publishing with Loveable and Framer.
Diagram showing AI workflows with requirements from ChatGPT, visuals from Midjourney, design in Figma, interactivity via Cursor, and publishing with Loveable and Framer.

Image 06

-

Control Workflow Diagram

Image 06

-

Control Workflow Diagram

Image 06

-

Control Workflow Diagram

Innovation Phase

Vibe coders perform much better with visual references. A major advantage of using AI in the initial stages is the ability to quickly achieve a high-quality visual look and feel of a product through Midjourney.

It is also easier than ever to explore alternative directions and gather inspiration before committing to a specific path.

Feature Prototypes & MVPs

Digital products breathe in pixels, which is why I place high value on high-fidelity screen design.

With vibe-coded prototype flows or components, we can quickly achieve the real product feel and gather genuine feedback from live interactions.

Design Systems

Using AI within an existing design system can be tricky. The key is having impeccable structure in auto layouts, variables, components, and spacing to provide the LLM with a solid reference.

Once the basics are established, AI can be leveraged for rapid iteration of components based on specific parameters.

Twelve AI-generated states of an input form component.
Twelve AI-generated states of an input form component.
Twelve AI-generated states of an input form component.

Image 07

-

AI Component Variations

Image 07

-

AI Component Variations

Image 07

-

AI Component Variations

Final Results

Presentation Website

A fully functional, one-page presentation designed to catch the curiosity and set the stage in terms of characters, story, and basic mechanics.

Character Generator

The best way to get user buy-in is by offering a hands-on experience, which is exactly what this fantasy character generator provides. It is empowered with AI to deliver real-time visuals and descriptions.

Developed Game Idea

This project explored the conceptualization of a tabletop game and assessing the limitations of AI in terms of fully sjipping an idea from scratch.

Deliverables included an initial sketch of the concept and basic game systems, the development of characters and the storyline behind them, and the exploration of world-building.

Part of the concept also examined the conversion of digital visuals into real-world, physical tabletop elements.

Image of all deliverables for the game idea including characters, world, game board, story slides and sketches.
Image of all deliverables for the game idea including characters, world, game board, story slides and sketches.
Image of all deliverables for the game idea including characters, world, game board, story slides and sketches.

kossy.pal@gmail.com

Fully designed, animated, rendered & shipped by Pal Kosi.
Copyright © 2025

kossy.pal@gmail.com

Fully designed, animated, rendered & shipped by Pal Kosi.
Copyright © 2025

kossy.pal@gmail.com

Fully designed, animated, rendered & shipped by Pal Kosi.
Copyright © 2025