Cada demo é uma página HTML self-contained — abra do disco, sem build step.
Estes são os tipos de artefato que o harness constrói e verifica — explorações, reviews, relatórios, diagramas, explicadores de pesquisa e editores interativos. Cada um é o tipo de saída que uma única passada do loop entrega. Clique em qualquer card para abrir o demo ao vivo.
Algumas formas de resolver um problema, lado a lado — com os trade-offs que escolhem o vencedor.
01-exploration-code-approaches.htmlAbrir demo →Várias versões de uma mesma coisa, mostradas juntas para você escolher no olho.
02-exploration-visual-designs.htmlAbrir demo →Um pull request percorrido achado por achado, com severidade e o fix.
03-code-review-pr.htmlAbrir demo →Uma base de código explicada de ponta a ponta — o caminho que um request percorre, de cima a baixo.
04-code-understanding.htmlAbrir demo →Swatches, uma tabela de nomes e pares faça/não-faça — os tokens escritos no papel.
05-design-system.htmlAbrir demo →Um componente em todos os sabores — tamanhos, estados e tons numa só visão.
06-component-variants.htmlAbrir demo →Um processo se desenrolando no tempo — veja cada etapa avançar sozinha.
07-prototype-animation.htmlAbrir demo →Deixe o leitor conduzir o fluxo — clique pelos estados e veja-os responder.
08-prototype-interaction.htmlAbrir demo →Uma talk disposta como slides navegáveis — uma ideia por quadro, em sequência.
09-slide-deck.htmlAbrir demo →Figuras vetoriais feitas à mão — diagramas e ícones desenhados inline, sem imagens.
10-svg-illustrations.htmlAbrir demo →KPIs, deltas e uma tabela de serviços — o estado atual num relance.
11-status-report.htmlAbrir demo →Uma timeline de post-mortem — o que quebrou, por quê, e o que muda depois.
12-incident-report.htmlAbrir demo →Um diagrama de decisão que você avança nó a nó, acendendo o caminho percorrido.
13-flowchart-diagram.htmlAbrir demo →Uma nova capacidade explicada — o que faz, como funciona, por que importa.
14-research-feature-explainer.htmlAbrir demo →Uma ideia ensinada do zero — assumir-vs-inspecionar, com um glossário.
15-research-concept-explainer.htmlAbrir demo →Trabalho quebrado em fatias ordenadas — fases, checks e o que "pronto" significa.
16-implementation-plan.htmlAbrir demo →Uma mudança narrada da motivação ao rollout — a história por trás do diff.
17-pr-writeup.htmlAbrir demo →Arraste cards entre colunas — capture observações e depois classifique-as.
18-editor-triage-board.htmlAbrir demo →Toggles ligados à saída ao vivo — vire um flag e veja o que ele liga.
19-editor-feature-flags.htmlAbrir demo →Gire os botões e veja o prompt se reconstruir — mude as entradas, veja o resultado.
20-editor-prompt-tuner.htmlAbrir demo →