System Design Studio

Inspiration

We wanted to prevent hidden architecture problems during vibe coding and make system design easier to learn through simulation.

What it does

System Design Studio is a visual design, analysis, and learning assistant. It helps developers design systems from scratch or understand an existing codebase (enabled by WebMCP), explore possible bottlenecks and race conditions, compare trade-offs, and make more informed decisions.

How we built it

We used React, TypeScript, React Flow, Web Workers, and WebMCP. Simulations run locally in the browser.

Challenges we ran into

The main challenge was making complex system behavior easy to understand while staying clear about assumptions and simulation limits.

Accomplishments that we're proud of

We brought visual design, simulation, analysis, comparison, and AI-assisted guidance together in one experience.

What we learned

We learned that interactive simulations can help developers notice potential problems earlier and understand system design more clearly than static diagrams alone.

What's next for System Design Studio

We’ll continue improving the simulation experience, add more learning scenarios, test it with more real codebases, and make it easier to keep designs in sync with code.

Built With

• indexeddb
• pnpm
• react
• react-flow
• typescript
• vite
• web-workers
• webmcp