Framer 3.0 Agents Hackathon
⚡ Built in less than 24 hours using Framer, External Agents Skill, Claude Code and Codex.
PROOF OF CONCEPT
Tube Pulse is a proof of concept for building real-time data applications inside a Framer website — live London Tube arrivals and line status, an animated network canvas, pan-and-zoom, theming and a full mobile experience, all driven by a code component running inside a Framer project.
THE EXPERIMENT
The goal was to test how far a modern AI-assisted development workflow could go within a real Framer project.
Using Framer’s new External Agent capabilities, AI coding agents were connected directly to the project and tasked with implementing features from detailed specifications, following a spec-driven development methodology.
Framer
External Agents
Claude Code
Codex
Spec-driven development
TfL Open Data
01
Specification
Features start as clear written specs saved in a local markdown file, defining behaviour, constraints and UI requirements.
02
Agent Implementation
Claude Code and Codex translate the specs into working code components and app logic inside Framer.
03
Framer
At the center of the workflow, Framer is where design, custom code, interactions, content, and publishing come together.