Krishnagangwal
Featured
CS-Fundamentals
A curated collection of Computer Science fundamentals (PDFs, notes, cheatsheets, interview question banks) for placement preparation, covering seven core subjects plus general resources.
system-design-playground
System Design Playground is a portable skill for AI agents and IDEs that generates an interactive HTML blueprint of your project's architecture, allowing you to simulate traffic, scale components in real time, and visualize bottlenecks.
Stars
3
7-day growth
No data
Forks
1
Open issues
0
License
No data
Last updated
2026-07-29
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It transforms abstract system architecture into a live, animated blueprint that responds to slider-controlled load and replica changes, making performance bottlenecks instantly visible and debuggable without affecting production.
Who it is for
- Software architects and engineers designing or reviewing system designs
- Technical educators explaining distributed systems to non‑technical audiences
- Developers using AI‑powered IDEs (Cursor, Claude, Codex, Antigravity) who want rapid prototyping
- DevOps engineers looking for a low‑risk way to explore scaling scenarios
Use cases
- Demonstrate system behavior under varying traffic loads during architecture reviews or training sessions
- Experiment with component scaling (e.g., adding/removing replicas) to identify bottlenecks before deployment
- Generate a shareable, visual playground for onboarding new team members without exposing real infrastructure
- Integrate into an AI agent workflow to automatically create a live diagram from a project’s codebase or description
Strengths
- Works across multiple AI agents and IDEs (Antigravity, Cursor, Claude, Codex) with a simple SKILL.md configuration
- Generates a self‑contained HTML file that opens in the browser with zero external dependencies
- Real‑time visual feedback: connection colors change (green→orange→red) and animations accelerate under load
- Includes an intelligent tip panel that points to specific project files causing potential bottlenecks
Considerations
- Requires manual installation of the SKILL.md file into the specific agent or IDE configuration
- The generated HTML is a static simulation; it does not connect to live infrastructure or produce production‑grade load test results
- The skill is only effective when used within supported chat‑based AI tools; it cannot run as a standalone application
README quick start
System Design Playground 🎨
O simulador de infraestrutura e fluxo de carga interativo baseado em Blueprint para agentes de IA e IDEs de programação (Antigravity, Cursor, Claude, Codex, etc.).
Sabe quando você tenta explicar a arquitetura de um sistema para alguém (especialmente iniciantes ou pessoas não-técnicas) e a pessoa começa a te olhar com aquela cara de "tá falando grego"? Ou quando você quer testar cenários de estresse no seu sistema mas não quer derrubar o ambiente?
Esta skill resolve isso de um jeito muito visual, interativo e direto ao ponto!
🚀 O que ela faz?
Ela lê a estrutura do seu projeto atual ou a sua descrição de arquitetura e cria um playground interativo local estilo blueprint (uma grade azul clássica cheia de luzes e cabos que se mexem) rodando localmente no seu navegador.
Ao rodar a skill, ela analisa o projeto, gera o arquivo system-design-canvas.html na raiz do seu projeto e o abre automaticamente no seu navegador padrão.
🎮 Como funciona a interface interativa?
No arquivo HTML gerado, você ganha um painel operacional completo:
- Controle o tráfego: Um controle deslizante (slider) no topo permite aumentar ou diminuir a quantidade de acessos por segundo (ex: de 100 a 5.000 req/s).
- Escale os recursos: Botões de
+e-nos cards dos componentes (App Server, Banco de Dados, Cache, Fila, Workers) permitem alterar as réplicas ativas em tempo real. - Veja o gargalo acontecer: À medida que o tráfego sobe ou você remove réplicas, as conexões mudam de cor (verde 🟢, laranja 🟡, vermelho 🔴) e aceleram a animação, mostrando exatamente onde a sobrecarga vai estourar primeiro.
- Painel de Dicas: Um painel inteligente diz o que está quebrando e indica os arquivos e pastas do seu projeto que você precisa modificar para resolver.
⚡ Como Acionar a Skill no Chat
Você pode chamar e ativar a skill a qualquer momento usando o comando de atalho:
/system-design-playgroundou mencionando "System Design Playground"
🛠️ Como Instalar & Configurar nas IDEs e Agentes
Esta skill pode ser portada para qualquer ferramenta de desenvolvimento. Escolha sua IDE ou agente abaixo:
1. No Antigravity (Agente oficial do Google DeepMind)
Como esta skill é nativa da arquitetura do Antigravity, basta salvar o arquivo SKILL.md na pasta de skills do seu ambiente.
Related repositories
Similar projects matched by category, topics, and programming language.
xiejunjie524
Featured
handdraw-story-video
A tool that converts 7–9 hand-drawn story keyframes into a 35–45 second vertical video with progressive line art and color animation, configurable via JSON and renders with HyperFrames and GSAP.
gnipbao
Featured
story-to-handdrawn-video
A Remotion-based tool that converts Chinese story text or ordered hand-drawn images into vertical hand-drawn diary-comic animation with handwritten captions, left-to-right reveals, optional page-curl transitions, and silent H.264 output for post-production dubbing.