为什么值得关注

它将抽象的系统架构转化为实时动画蓝图，通过滑块控制负载和增减副本，让性能瓶颈一目了然，且无需影响生产环境即可调试。

适合谁使用

负责设计或评审系统架构的软件架构师与工程师
向非技术人员解释分布式系统的技术教育者
使用 AI 驱动 IDE（Cursor、Claude、Codex、Antigravity）并希望快速原型开发的开发者
希望以低风险方式探索扩容场景的 DevOps 工程师

典型使用场景

在架构评审或培训中演示系统在不同流量下的行为
在部署前通过增减组件副本实验，找出瓶颈点
为新人生成可分享的可视化游乐场，无需暴露真实基础设施
集成到 AI 代理工作流，从项目代码或描述自动生成动态图

项目优势

通过简单的 SKILL.md 配置即可在多种 AI 代理和 IDE（Antigravity、Cursor、Claude、Codex）中运行
生成独立的 HTML 文件，浏览器直接打开，无需外部依赖
实时视觉反馈：连接颜色随负载变化（绿→橙→红），动画加速，直观展示过载位置
内置智能提示面板，指出可能导致瓶颈的具体项目文件

使用前须知

需要手动将 SKILL.md 文件安装到特定代理或 IDE 配置中
生成的 HTML 为静态模拟，不连接真实基础设施，也无法产生生产级别的负载测试结果
仅支持在支持的聊天式 AI 工具中使用，不能作为独立应用程序运行

README 快速开始

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-playground ou 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.

system-design-playground