prototype-firstlisted

# Prototype First **Princípio:** nunca construa código de UI de produção duas vezes. Antes de escrever a tela "pra valer", prototipe e valide o design — é mais barato mudar um protótipo do que refatorar código já integrado. ## Quando esta skill se aplica - ✅ Vai criar/redesenhar **tela, página ou fluxo** de uma aplicação web. - ❌ **Auto-pule** (não use) quando o trabalho for **backend**, **CLI**, **script** ou **biblioteca** sem interface — vá direto implementar. ## Roteamento ### Frontend web completo → Design OS (público) Para um app ou conjunto de telas, prototipe no **Design OS** da Builder Methods. Ele roda localmente e é open-source — sem dependências privadas: ```bash git clone https://github.com/buildermethods/design-os.git ../<projeto>-design cd ../<projeto>-design git remote remove origin npm install npm run dev # http://localhost:3000 ``` Depois, dentro dessa pasta com o Claude Code aberto, conduza o fluxo de design: 1. `/product-vision` — define visão, roadmap e formato dos dados 2. `/design-tokens` e `/design-shell` — sistema visual e casco do app 3. `/design-screen` — uma tela por seção (preview vivo em `localhost:3000`) 4. `/export` — gera o handoff (componentes React + Tailwind + specs) Revise o **protótipo vivo** e ajuste em linguagem natural antes de exportar. Só então parta para a implementação. > Na imersão, os comandos `/pg-imersao-prototipo` (prototipar) e > `/pg-imersao-implementar` (construir) já encadeiam esse fluxo de ponta a po