AI Playground — Experiments & Prototypes

Context

Building to learn.
Shipping to understand.

Most designers learn AI by reading about it. I learn by building with it. The AI Playground is the lab where theory becomes practice. Every experiment answers a question I couldn't answer by watching a tutorial.

The rule is simple: if I'm curious, I build it. If it works, I ship it. If it breaks, I learn from it. Nothing here is meant to be polished or complete — it's meant to be honest about the process of becoming better.

What I Build

Three types of
experiments

Every experiment in the playground falls into one of three categories. Each one builds a different muscle.

Interactive Games

Games & Playful Interfaces

Small browser games built entirely through prompting. These push the limits of how much logic and interactivity I can extract from a single conversation, and teach me how to break complex mechanics into clear, buildable steps.

Interactive Portfolio

A Portfolio You Travel Through

Instead of another scroll-down page, I built a 3D space repository where the user navigates my work like a game — moving through environments, discovering projects. A different way to experience a portfolio, built entirely through vibe coding.

Interactive Prototypes

Product & UI Prototypes

Concept interfaces for products that don't exist yet — or rethinks of products that do. These bridge the gap between Figma and code, proving that a designer who can build prototypes in the browser is a faster, more credible collaborator.

Process

How vibe coding
actually works

Vibe coding is not random. It requires the same design thinking skills applied to a different medium — and a stronger planning discipline than most people expect.

Define the Idea Precisely

Before prompting anything, I write a one-paragraph brief: what is it, who uses it, what is the one thing it must do well. Vague ideas produce vague code. A precise brief produces a usable first draft.

Plan the Build in Layers

I break the project into layers: structure → logic → styling → polish. I prompt one layer at a time. Jumping ahead creates compounding errors that are hard to trace back and fix.

Iterate Fast, Fix Small

I test in the browser after every significant prompt. Small feedback loops catch drift early. When something breaks, I describe the specific failure, not the desired outcome. That distinction saves hours.

Ship and Reflect

When the experiment is good enough to show, I ship it. Then I write a brief internal note: what worked, what I would do differently, what surprised me. Reflection is where the 200% growth happens. Building without it is just execution.

Experiments

Select
experiments

A sample of things built in the playground. Each one started with a question. Each one left me knowing something I didn't know before.

Interactive Portfolio

Portfolio Quest

What if a portfolio felt like a game? Inspired by interactive adventures and creative portfolio experiences, I transformed my portfolio into an explorable world where visitors discover my work through play. Built using open-source references and AI-assisted development, the project explores how storytelling and interaction can make a portfolio more memorable.

Visit here →

Portfolio Quest — 3D explorable portfolio world

Game

Space Invaders — Pixel Art Game

A fully playable classic-style 2D Space Invaders game with pixel-art visuals, built as a vibe coding experiment. One key learning: structured repository code and clear reference sources dramatically improve AI output quality. Providing better technical context made the generated code more consistent and the iteration faster.

How structured codebases improve AI code generation quality
How to translate game mechanics into clear prompts
The value of iterative prototyping when working with AI tools

Visit here →

Game

Tetris — AI Vibe Coding Experiment

My first attempt at generating a game from a single prompt. The AI produced an impressive result on the first try — but the output was an interpretation of classic Tetris mechanics, not a faithful 1:1 recreation. That gap between expectation and output turned into the most valuable lesson of the experiment.

AI can rapidly generate functional prototypes from minimal input
Ambiguity in prompts leads to creative interpretation, not precision
Clear constraints are essential when aiming for faithful recreations
Imperfect output can still lead to useful learning outcomes

Visit here →

Tetris game built through AI vibe coding

Learning

What the playground
actually teaches

Communication with AI

Noticeably Stronger Prompting

Every experiment forces me to be more precise. I've learned to give AI the right context, the right constraints, and the right format for the answer I need. Good prompting is a design skill — you are designing the input to get the output you need.

Project Structure

Stronger Planning Workflows

Vibe coding without a plan produces a mess fast. The playground taught me to define the spec before opening any tool — what it does, what it doesn't do, what done looks like. This discipline now transfers directly into every design project.

AI Literacy

Real Understanding of AI Capabilities

Reading about AI tells you what it can do. Building with it tells you where it excels, where it drifts, and where it needs a human to steer it. This is knowledge that makes me a more credible collaborator on any team building with AI.

Speed to Concept

Faster from Idea to Prototype

The playground compressed months of learning into weeks of doing. I can now go from concept to interactive prototype in hours instead of days. That speed changes how I approach early-stage design work.

Metrics

What 200% growth
looks like in practice

Growth in vibe coding is not measured in lines of code. It's measured in the quality of decisions made before, during, and after a build.

200%

Learning Growth

Measure Self-assessed capability across prompting, planning, and shipping

Signal Projects that took days now take hours. Projects that failed now ship.

Driver Consistent building, iteration, and structured reflection

3×

Prompt Quality

Measure Average revisions needed to reach a usable first draft

Signal Better context-setting and constraint definition upfront

Driver Treating prompts as design briefs, not search queries

↑

Stronger Planning

Measure Time spent defining spec before building vs. rewriting after

Signal Fewer dead ends, less context loss, cleaner final output

Driver Learning that planning is not overhead — it's the product

Live

Shipped Products

Detail Klaro, portfolio, Supply Pro landing — all deployed via Vercel

Signal Vibe coding produces real products, not just prototypes

Driver Treating every experiment as something worth shipping

Lessons Learned

What the playground
taught me

Planning Is the Product

You can't prompt your way out of a bad plan. The cleaner the spec, the cleaner the output. The discipline of defining what done looks like before touching any tool — AI or otherwise — is the single biggest skill gain from the playground.

AI Needs a Director, Not a Passenger

The experiments that went wrong all shared one pattern: I let the AI lead. The ones that shipped well had me in control — setting direction, reviewing output, catching drift, steering back. AI amplifies intent. It doesn't replace it.

Ship It — Even If It's Not Perfect

Every experiment that stayed in draft taught me less than every experiment that shipped. A live, imperfect prototype is a better teacher than a perfect plan. The playground only works if you actually press deploy.

Design Thinking Transfers Directly

The skills that make a good designer — empathy, clarity, systems thinking, iteration — are exactly the skills that make a good vibe coder. There is no gap between design and building. There is only the decision to close it.

More Work