Harbor: Stripe’s AI-assisted prototyping tool
AI Summary
Stripe built Harbor, an interactive, browser-based AI prototyping platform that allows designers, engineers, and other teams to rapidly turn static ideas into shareable, dynamic prototypes using company design systems and mock data. Built with an in-browser compilation engine called Drydock and supported by the Model Context Protocol (MCP), Harbor empowers users to generate multi-file source trees, inspect rendered elements, and collaborate via context-aware comments that adapt or flag status when the underlying code is rewritten by the agent.
Key Takeaways
- Harbor compiles multi-file React and TypeScript source trees directly in the browser via Drydock.
- The AI agent can interact with the rendered page by inspecting elements, clicking, typing, scrolling, and taking screenshots.
- Comment anchoring uses semantic labels, stable identifiers, structural paths, and text evidence to accurately report whether feedback is attached, needs review, or is orphaned after code rewrites.
Why it matters
Harbor bridges the gap between static design concepts and production-ready code by enabling non-code contributors to build functional prototypes safely through AI. Its decoupled architecture—such as the Drydock rendering engine and MCP toolset integration—allows teams to seamlessly pass interactive mockups between research platforms, design environments, and coding agents without manual transcription.
Conversation 0
Be the first to share your perspective.