Focus Paint (AI)

Focus Paint

Drawing tools have always been the fastest way to explore ideas.

I built Focus Paint as a playful micro-app inspired by 90s MS Paint, using AI coding agents to explore how ideas can become working products faster.

Work With Me

Launch App

The Product:

A minimal drawing canvas built to test how fast ideas can evolve into working prototypes when design and code merge into one workflow.

Smart Eraser & Object Interactions

Understands your intent automatically. Erase pixels, delete objects, or drag elements around the canvas for full interaction control.

Parallel Agentic Development

Multiple AI agents worked in parallel on canvas logic, animation patterns, and interaction rules to accelerate development.

Canvas with Stroke Auto-Correction

Draw freely — rough strokes are automatically smoothed into clean, polished lines.

Automatic Drawing Assistant (Robo Mode)

Robo Mode generates and animates emoji using OpenMoji vectors, placing them around the canvas like a creative assistant drawing alongside you.

Think | Design | Build

AI Product Design:

AI is changing how we design and build digital products and what is possible.

More: AI Design

The Micro App: Focus Paint

The Design Challenge
I wanted to explore AI-assisted development in a highly visual environment — something simple, instantly demoable, and rich in UX and interaction details. A drawing tool was the perfect medium: easy to understand, fun to use, and full of opportunities for micro-interactions across desktop and mobile.
The Build Approach
I built Focus Paint using Claude.ai and Cursor, coordinating multiple AI agents working in parallel. While AI handled structural patterns and helped formulate the logic, I kept full control of implementation by coding all key systems from scratch with the Canvas API.

This workflow let me focus on interaction quality — designing the toolbar, refining motion, adjusting animations, and tuning the overall experience from concept to deployment.

Standout feature: Robo Mode, where OpenMoji emoji become live objects on the canvas — draggable, selectable, deletable, and responsive to cursor feedback.

Technical stack: React 19, Next.js 15, TypeScript, Tailwind CSS, deployed to Vercel.
The Result
Focus Paint shows how design and code can converge into an AI-accelerated workflow. What once required weeks of manual development can now be explored in days, with AI agents supporting rapid experimentation, iteration, and refinement across multiple features simultaneously.

This micro-app reflects my focus on AI-assisted workflows and rapid experimentation in product creation.

Explore the micro app: focuspaint.vercel.app

Select your artifacts:

AI Design Product Video

Explore the Micro app:

Open Micro App

What are Micro Apps?

Micro-apps are compact applications that I design and build to explore how AI and agentic coding are transforming product design. They are lightweight, interactive, and creative experiences built through a unified design-and-code workflow that turns ideas into products faster.