WhatsApp Simulator

📚 Overview

I used natural-language AI to independently build a custom layout tool, proving that artists can now architect their own pipeline solutions without writing a single line of code.

I’ve always had a knack for spotting the cracks in a production pipeline. As a compositor, I know exactly how frustrating it is to spend hours manually building, alignment-checking, and animating UI elements like chat bubbles when we should be focused on complex, high-value visual work. Historically, my lack of programming background meant I had to rely on developers to build these pipeline fixes. That changed with the emergence of vibe coding. Pairing my eye for workflow efficiency with AI, I took matters into my own hands to build Chat Simulator—an ongoing personal project designed to eliminate production chores and give hours back to creative teams.

​​

​​

​​​

🚩 The Bottleneck : Why I Built This

 

Manual UI layout is a massive production time-sink that breaks creative flow, introduces localization errors, and traditionally takes months of engineering time to fix.

While working on projects with heavy WhatsApp-centric deliverables, I noticed storyboard artists, designers, and compositors being constantly pulled away from their core craft before assets even reached the compositing stage.
 

• The UI Layout Grind: Manually generating chat bubbles, formatting timestamps, and positioning text elements by hand is tedious. Worse, it creates endless repetitive work later when trying to replicate and animate those exact UI proportions in a comp.

• The ESL Communication Gap: Our design teams are global, and for many designers, English is a second language. Copying, pasting, and formatting long chat threads manually often introduced subtle syntax, punctuation, or layout errors that slowed down the client approval pipeline.

• The Technical Barrier: Normally, my role would end at identifying these issues. To fix it, I’d have to write a long technical spec, pitch it to engineers, and wait months for an internal tool to be built.

​​

​​​

​​​

🔑 The Solution (Live at whatsapp-demo-sigma.vercel.app)
 

Chat Simulator instantly converts raw script text into pixel-accurate UI wrappers, eliminating downstream animation friction and ensuring flawless platform accuracy.

Using vibe coding, I bypassed the traditional development bottleneck and built a functional web application tailored directly to artists' needs. The application allows anyone to input raw dialogue and instantly output a perfectly formatted WhatsApp layout. By matching the actual native UI identically from the start, the downstream friction of recreation and chat-bubble animation is massively reduced for compositors and motion designers. Furthermore, automating the structural layout acts as a safety net for ESL designers—ensuring that spacing, bubble casing, and typographic hierarchy perfectly mirror the native app without requiring manual localized adjustments.


 

🔗 Core Features Implemented (Ongoing Development)

 

• Granular Scenario & Profile Customization: Built-in controls allow users to define specific chat parameters—including tone, topic, number of participants, gender, and age brackets. The generation engine dynamically adapts the dialogue style, vocabulary, and response tone based on these exact profile configurations.
   

• Vector & Video Asset Export (svg & mov): Designed specifically to bridge the gap between generation and production. Users can record the chat sequences and export them as vector-based SVG files (allowing designers to bring clean layouts directly into Figma) or as high-fidelity MOV video files (allowing compositors and motion designers to drop the asset straight onto an After Effects or Nuke timeline).
   

• Contextual Avatar Generation: The tool automatically generates profile pictures based on the chosen gender and last name configurations, complete with a dedicated download feature for quick local asset management.
   

• Cross-Platform Typography Toggle: A single-click toggle instantly swaps the layout's typography and interface styling between iOS (San Francisco) and Android (Roboto) native specifications, ensuring platform accuracy from the very start of a project.
   

• Instant UI Simulation: Automatically translates raw text strings into dynamic, pixel-accurate chat bubbles, matching native aspect ratios and mobile margins.
   

• Frictionless, Language-Agnostic Input: Designed with a zero-learning-curve interface so global designers can rapidly paste script lines and get flawless visual results instantly.

 

​

​

💡 What This Project Teaches Me 

If you deeply understand a creative workflow and can spot the operational bottleneck, a lack of coding experience is no longer a barrier to building the solution yourself.

On a practical level, this tool solves a real production headache. Because it is an ongoing project, I am continuing to refine the output specs to integrate even more seamlessly with traditional compositing workflows. On a personal level, it has completely changed how I view my skill set, proving that technical innovation is now directly in the hands of the artists.

​