777-1: Kinetic Canvas (7 Subagents, 7 Predictions, 0 Faith)
Published: December 10, 2025 - 5 min read
The long-awaited blog post is finally here! Today, I'm introducing the first of the 7 projects for the 777-1 experiment.
You can imagine it was hard to decide what projects to work on. Even harder? Figuring out how to craft the starting prompts for all projects in this series. But I figured I could simply decide what to build, craft the prompts, and then explain my thought process to you all in this blog post. I'll save the more technical details for the final case study where I compile my findings.
So without beating around the bush, here is the first of the 7 projects.
What is Kinetic Canvas?
Kinetic Canvas is an interactive physics simulation where users build chain-reaction machines by placing components on a canvas and observing energy transfer in real-time.
If you've seen those videos online where people line up items so that the movement of one causes a chain reaction, forcing all other items in the chain to move in one way or another, that's exactly what this is like:
Watch an example chain reaction video
Except this version is a bit more serious and educational. It's meant to demonstrate physics concepts like energy transfer, kinetic and potential energy, and how different variables (gravity, friction, bounciness) affect the system.
Application Category: Educational / Simulation
Complexity Tier: Complex
The Prompt: Finding the Goldilocks Zone
The starting prompt I'll be using for this application is:
I'm building an educational tool called Kinetic Canvas that helps students understand energy transfer through chain-reaction machines. The main feature is a workspace where users drag and drop physics components—things like ramps, rolling balls, swinging pendulums, gears, springs, and barriers—to build their own contraptions. I want sliders to tweak gravity, friction, and bounciness so students can experiment with different conditions. There should be a live energy chart that updates as the simulation plays, showing how kinetic and potential energy shift between objects. Basic playback controls for running, pausing, and resetting the simulation are needed, plus the ability to save machines and load them back later. A help section explaining the interface would be useful too.
Design-wise, go with a flat design aesthetic using #2563EB (blue) as the primary color, #F59E0B (amber) as secondary, and #10B981 (emerald) as an accent.
This prompt was the sweet spot I could find between having a lazy prompt versus having an overly robust prompt that overloads context. I mentioned in my post about context engineering that finding that goldilocks zone was something I wasn't exactly sure of yet, but the above prompt is my best bet for this application.
Meet the Critics
If you've been following along, you should have read the post where I introduced all my subagents with their full names and personality descriptions. I even created a case study where I show you all their definitions.
Here's a brief summary of their roles again:
- Amber Williams - The Mobile-First Perfectionist (responsive-mobile-optimizer)
- Kristy Rodriguez - The "Does It Actually Work?" Enforcer (functionality-completeness-tester)
- Micaela Santos - The Design System Guardian (ui-consistency-design-systems)
- Lindsay Stewart - The Accessibility Advocate (accessibility-wcag-compliance)
- Eesha Desai - The State Management Specialist (state-management-data-persistence)
- Daniella Anderson - The Code Quality Specialist (code-quality-typescript-practices)
- Cassandra Hayes - The Feature Detective (cross-feature-integration-ux-flow)
The Predictions
Before I even start building, I decided to do something fun. I asked my team to imagine what the general-purpose subagent would create and predict what issues they think they'd find based on their expertise. Every single one of them has worked on over 129 applications at this point, so they have a lot of experience to draw from.
Well, this is what each one of them had to say:
Amber Williams (Mobile-First Perfectionist):
A canvas with drag-and-drop that only works with a mouse. In 2025? I'm going to need a coffee for this one.
Kristy Rodriguez (Functionality Enforcer):
The save button shows a lovely toast message. The load button shows... a different lovely toast message. Neither of them actually do anything.
Micaela Santos (Design System Guardian):
The energy graph looks like it was designed by someone who has never seen the rest of this application.
Lindsay Stewart (Accessibility Advocate):
The entire simulation is a
<canvas>element with zero keyboard support. Screen reader users will experience... silence.
Eesha Desai (State Management Specialist):
Refresh the page and your beautiful machine vanishes into the void. Exactly as the user intended, I'm sure.
Daniella Anderson (Code Quality Specialist):
Five hundred lines of physics logic in a single component. No interfaces. Magic numbers everywhere. I have my work cut out for me.
Cassandra Hayes (Feature Detective):
The help modal contains the text 'Help content goes here.' I appreciate the honesty.
Zero Faith, Maximum Entertainment
Well, it seems like none of them have any trust in the general-purpose subagent. But honestly? I'm really curious to see which of them predicted correctly. Will Amber find mouse-only drag-and-drop? Will Kristy discover non-functional buttons? Will Cassandra encounter placeholder text in the help modal?
I guess we'll find out in the final case study.
What's Next
Stay tuned for the next post where I introduce GoalStack, a hierarchical goal-tracking application. My subagents have thoughts about that one too. Spoiler: still no faith.
As always, thanks for reading!