ProtoSite

Generate prototypes in seconds, edit sites with natural language
Ingest a website just with a link
Emulates Netflix home page perfectly

Inspiration

The inspiration for ProtoSite came from witnessing the communication gap between product managers, designers, and engineers. Two of our teammates have worked in the PM space, and realize the PM workflow is often slow and burdensome due to dependence on engineering and design. We created ProtoSite to empower PMs to quickly transform their ideas into interactive prototypes without needing specialized design or engineering skills. But ProtoSite is far more than just a PM tool -- we're closing the gap between idea and real prototype.

What it does

ProtoSite is a lightweight browser emulator that lets you render any website within your own application, transforming it into an interactive sandbox for immediate editing and customization. With ProtoSite, anyone can pull up a website, make real-time changes to text, layout, and styling using either natural language commands or direct point-and-click editing, and see the results instantly. Unlike traditional web scraping tools that just extract content, ProtoSite maintains the full interactivity of the original site while enabling seamless modifications—perfect for prototyping, design ideation, or teaching web development without writing a single line of code. In the feature, we plan on integrating ingestion with common design tools such as Figma, and export your prototype directly to code, Figma design, or a live website.

How we built it

We built ProtoSite with a focused tech stack designed for efficiency and ease of use:

Playwright: Powers our headless browser capability for rendering web pages accurately Anthropic Claude API: Enables natural language processing to convert PM requests into precise HTML/CSS changes Claude Text Editor Tools: Provides intelligent code formatting and editing support, allowing the agent to use tooling to edit code React/Next.js: Creates a responsive, intuitive frontend interface Shadow DOM / iFrame: Implements isolated rendering environments for safe page modifications WebSockets: Enables real-time synchronization between edits and the rendered page Supabase: for storage

This combination allows us to process web pages on the server side, make them editable on the client side, and provide natural language controls that bridge the technical gap.

Challenges we ran into

Managing large context windows: Handling complex HTML and CSS files that exceed AI model context limits
Effectively implementing agents with tooling: Integrating the agentic workflow with Claude tools editor
Noise filtering: Developing efficient methods to sanitize and simplify website code while preserving functionality
Backend architecture: Setting up a comprehensive system to handle rendering, editing, and synchronization
Dynamic content preservation: Ensuring JavaScript-powered interactions remain functional while making pages editable
Headless browser integration: Configuring Playwright to properly render sites while enabling manipulation

Accomplishments that we're proud of

Created a seamless workflow between natural language commands and direct visual editing Developed an intelligent DOM diffing system that generates clean, targeted code Built a PM-friendly interface that requires no technical knowledge to use effectively Implemented a context-aware AI system that understands site structure and design patterns Achieved high fidelity rendering of complex websites while maintaining editability

What we learned

Claude Tools Capabilities: How to leverage Claude's text editing and analysis features effectively MCP (Model Context Protocol): Implementing and optimizing this protocol for web interface manipulation Team Collaboration: Supporting each other's strengths to overcome technical challenges Intuitive UI Design: Creating interfaces that make complex technical tasks feel simple PM Pain Points: Understanding the specific challenges product managers face when communicating ideas

What's next for ProtoSite

AI-powered suggestions for UX improvements and best practices
Ability to edit directly on the UI
User testing integration for immediate feedback on prototypes -- ability to host directly on our site
Flow creation tools for building multi-page user journeys
Analytics capabilities to measure prototype performance
Export options for sharing specifications with design (Figma) and engineering teams (direct to code)