Rebirth_From_Failure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Slide 1
NotebookLM to PPTXTurn NotebookLM Slides into Editable PPTXExport PPTX
Log In
Author: Bao Yu (Prompt Engineer, extensive experience in front-end and AI development)
css{
mardinn-display: color; color: #333; pording-top!10px;
A Post-mortem on Building, and Rebuilding, an AI Agent for Front-End Development
display: flex; display: flex,
}{
Rebirth from Failure
</>
0
NotebookLM
NotebookLM
(2025/2/3)
Deep Research
(2025/5/22)
Manus (2025/3/6)
Claude Code
Technical Explosion
The releases of Deep Research, Manus, and Claude Code created a surge of excitement. The question on every tech team's mind was the same: "Should we be building an AI Agent?"
2025: The Year of the Agent Ignites the Industry
NotebookLM
Company's Private Design System
Generic AI Model
Build a tool, similar to Lovable, that allows users to upload a Figma design or screenshot users to upload a Figma design or screenshot and have an AI Agent automatically generate front-end code that adheres to our internal standards.
Our company has a mature, internal-only Design System and front-end framework. General-purpose AI models have never been trained on this code, making them incapable of generating compliant components components out-of-the-box.
Our Challenge: A Private Design System AI Cannot See
The Goal
Problem Statement
NotebookLM
The Agent must be able to detect and fix its own errors when code fails to compile or render correctly.
Generated code must be rendered instantly in the browser for user validation.
Automated Quality Control
Real-time Preview
How do you teach a model to use a library it has never seen before?
Private Component Mastery
Building a complete Agent system is more than just API calls. It requires managing user interaction, context engineering, and the full conversation flow.
Agent Orchestration
The Path Was Lined with Technical Dragons
NotebookLM
Local File System
Compile
Write
Read
AI Agent
Initial attempts with browser-based sandboxes (Sandpack) failed with complex components. The breakthrough was giving each session its own local file system (a VM or directory). This maximized the Agent's ability to read, write, and compile code just like a human developer.
github.com/JimLiu/claude-agent-kit
We chose to build on the Claude Agent SDK. It was proven, feature-rich, and customizable for our tools and skills. We even open-sourced a starter kit:
Solution 2: Give the Agent a Real Workspace
Solution 1: Don't Build from Scratch
"Get it working first, then optimize." The hardest part of building an Agent is getting the end-to-end flow working.
Our Strategy: Start Fast and Empower the Agent
NotebookLM
Code is checked via Linting, Compilation, and Visual Comparison.
Error reports are fed back to the Agent, which attempts a fix.
Validate
Fix
Pro-Tip: We placed the validation tools in a separate Skill/SubAgent to avoid polluting the main Agent's context window.
The Agent writes the code.
Generate
Fix" Loop
To ensure code quality, we created an automated closed-loop system:
Validate
The "Generate →
We treated the Agent like a new employee. We created high-quality Markdown documentation for our design system, components, and APIs. The Agent could then perform file-based searches on this local documentation-no complex RAG system needed.
Teaching Private Components
We Built a System for Learning and Self-Correction
NotebookLM
Time (Weeks Post-Launch)
Week 6
Week5
Week 4
Week 3
Week 2
Week 1
User Engagement
The system worked. The demos were stunning. But after an initial wave of curiosity... nobody used it.
Technical Success. Product Failure.
The Agent's environment was disconnected from the developers' actual codebase. Manually copying generated code back into a project was a cumbersome and error-prone final step.
A Fractured Workflow
Prompt
Agent
IDE
The Agent could generate 80% of the UI correctly, but debugging and modifying the final 20% was often more difficult and time-consuming than building it from scratch.
The 80/20 Bottleneck
Designers and PMs live in Figma. Forcing them into a separate chat window was a high-friction context switch. Most didn't even know what to type as a prompt.
Habitual Resistance
NotebookLM
The problem wasn't the technology; it was a fundamental mismatch with user workflow and habits.
The Post-Mortem: Why Did a 'Working' Product Fail?
This framing made the Agent the goal itself. It led us to build a technically impressive solution that was disconnected from the real user need.
Agent
"How can we build a design system Al Agent?"
The Wrong Question
NotebookLM
This forced us back to first principles. The purpose is not to have a system, but to achieve two outcomes: 1.Ensure design consistency across the enterprise. 2.Increase development efficiency.
Efficiency
Consistency
"What is the ultimate purpose of our design system?"
The Right Question
The Epiphany: We Were Asking the Wrong Question
0
How can we make AI more efficient?
Reshaping the Workflow for AI
The Present:
How can AI work like a human?
Mimicking Human Workflow
The Past:
NotebookLM
Cognitive Upgrade
We experienced a cognitive upgrade: from trying to replicate human workflows to fundamentally reshaping workflows to leverage the strengths of AI.
A Cognitive Shift: From Mimicking Humans to Redesigning for AI
This slide is locked
Please upgrade to Pro Plan to unlock and edit this slide
This slide is locked
Please upgrade to Pro Plan to unlock and edit this slide
NotebookLM
Standalone Agent platforms face immense adoption hurdles. Embedding your capabilities as a "Skill" into the existing, growing ecosystem of general Agents is a more pragmatic path to impact.
Skill > Agent
3
Don't just automate human processes. Redesign the entire workflow around the strengths of Al to achieve a step-change in efficiency. The user benefits from the outcome.
Design for Al, Then for Users
2
Users don't pay for clever tech; they pay for seamless solutions to their problems that fit into their existing workflows.
Technical Success + Product Success
≠
1
Our Manifesto for Building in the Al Era
NotebookLM
In the AI era, failure is nothing. It's better than doing nothing.
“Build”