If there is one thing I have learned over the last year of integrating AI into my daily workflow, it is this: just because an AI workflow failed a few months ago doesn’t mean it will fail today. The models are constantly evolving, but more importantly, our ability to engineer resilient prompts is evolving right alongside them.
The Problem: The Tedium of Demo Videos
As I’ve written about before, I no longer use static Figma files for developer handoffs. Instead, I build functional, front-end Angular code sandboxes. To get asynchronous sign-off from Product before I hand those sandboxes over to the dev team, I record local demo videos.
These videos need to be comprehensive. I have to go through multiple workflows and show various state changes—like demonstrating how a floating settings FAB mimics the core product when toggling military time or switching languages.
Recording these manually is incredibly tedious.
The First Attempt (The Failure) 📉
Several months ago, while I was still working in the Kiro IDE using the Opus 4.6 model, I tried to build a skill that would automate these demo videos using Playwright.
It was a bust. The skill was heavily token-intensive, and the agent constantly got stuck in focus traps. For example, if the agent was trying to tab through a UI and the focus didn't land perfectly inside a dialog box, the whole script would just hang. Eventually, I got frustrated and shelved the idea entirely.
The Spark ⚡
Recently, my colleague Kamara Hoffman attended the AI Initiatives Summit by Volaris. (I wasn't at the event, but I was happy to support Kamara's presentation by providing a UI sandbox for her to use!). When she came back, she mentioned seeing teams successfully automating video generation using Playwright.
Hearing that it was working for others was exactly the inspiration I needed. I decided to dust off the old concept and try again, this time utilizing my current, updated stack.
The Rebuild: Coworker and the CLI 🛠️
I started in Claude Coworker and explained the exact traps that had ruined my previous attempt. Because I now know how to manage tokens much better, I explicitly instructed the AI to prioritize token efficiency.
To solve the focus traps, we engineered a "dry run" phase. The script now tests the UI first. If it gets stuck and cannot proceed via normal UI interaction, it programmatically forces the value so the recording can seamlessly move on to the next step.
Once we had the architecture drafted, I moved into my native Claude CLI environment using the Opus 5.5 model. Because my CLI session already had deep, contextual knowledge of my sandbox repository and my established AI processes, it was able to highly refine the skill.
The Final Workflow 🚀
We made the skill fully interactive. Now, when I trigger it, it prompts me for:
- The local port I am running on.
- Any initial inputs it needs (for example, if a flow requires dragging a PDF into a dropzone, I tell it exactly where my sample PDF is located).
- The output folder destination.
Every time I build a sandbox, I generate a mock data file. I always have the AI output this data as both a machine-readable JSON and a human-readable markdown file that outlines the quick scenarios. This markdown file now acts as the literal script for Playwright.
The skill routes the heavy lifting to Sonnet and Haiku models to execute the steps. It uses FFmpeg to stitch the resulting clips together, automatically burns a scenario label into the lower-left corner of the video, and generates a formatted chapter list.
Now, I just run the skill, spot-check the final video to ensure everything looks right, paste the chapter list into my Jira ticket, and upload the file.
The Takeaway
This entire process reminded me of two very important things.
First, revisit your discarded ideas. The tools are getting better, but our imaginations and our ability to engineer around limitations (like strictly enforcing token diets and writing programmatic fallbacks) are improving just as fast. What was impossible in December might take five minutes in September.
Second, share your experiments. Internal summits, cross-team conversations, and just chatting with colleagues like Kamara are vital. We keep our innovation fresh by hearing what others are building and bouncing those ideas off our own workflows.
#UXDesign #Frontend #AssetWorks #UIArchitecture #Angular #AI #Claude #Playwright #Workflow #Automation #TechPresentations #DeveloperCulture #Volaris