Pular para o download
DESIGN-FIRST material aberto por Be Auron Goiânia

método · skills · claude code

Do escopo ao sistema testado.

O artefato é a especificação: design system e tela-piloto em HTML, contrato extraído do que foi construído, prompt por tela e nenhuma tela pronta sem teste verde.

Baixar o material 13 passos · 6 skills · grátis

O método

Treze passos, cada um com um portão.

Nenhum passo começa antes de o anterior provar que está pronto. É isso que evita gerar dezenas de telas sobre uma base que ninguém aprovou.

  1. 00

    Escopo

    Tudo que foi vendido e combinado, cada item com a origem.

    portãoO cliente reconhece o escopo como o combinado.

  2. 01

    Produto

    Usuários, stack, restrições e vocabulário do negócio.

    portãoCada usuário tem uma frase: o que faz e o que não vê.

  3. 02

    Universo de dados

    Pessoas, números e um “hoje” fixos para todas as telas.

    portãoOs mesmos nomes e valores aparecem em toda parte.

  4. 03

    Design system em HTML

    Uma página com todo componente, em todo estado.

    portãoClaro e escuro, sem framework, aprovado olhando.

  5. 04

    Tela-piloto

    A tela mais conectada do sistema, não a mais bonita.

    portãoEla vira o modelo que todas as outras copiam.

  6. 05

    Capturas e revisão

    Desktop, escuro e celular, revisados em contexto novo.

    portãoAprovado em até duas rodadas. O autor não se aprova.

  7. 06

    Contrato visual

    DESIGN.md extraído do que foi construído.

    portãoValores e nomes de classe, não adjetivos.

  8. 07

    Prompts por tela

    Um contrato global e um prompt curto por tela.

    portãoA mesma spec serve ao protótipo e ao código real.

  9. 08

    Protótipo tela a tela

    Cada tela na ordem das dependências.

    portãoCada tela passa pela captura e pela revisão.

  10. 09

    Aprovação do cliente

    Revisão do conjunto; o cliente navega no protótipo.

    portão“Está ótimo” por escrito antes de qualquer framework.

  11. 10

    Fundação

    Stack real, esquema, dados de exemplo e a piloto real.

    portãoPiloto real idêntica ao protótipo, com testes verdes.

  12. 11

    Implementação por fases

    Os mesmos prompts, agora em modo código.

    portãoNenhuma tela pronta sem teste de backend e de navegador.

  13. 12

    Ajustes no ar

    O cliente usa, pede, e cada ajuste vira registro e teste.

    portãoTudo que o cliente pediu está anotado com data.

O pacote

O que vem no zip.

design-first/
├── README.md               instalar e ordem de uso
├── FLUXO-DE-TRABALHO.md    o método inteiro
└── skills/
    ├── design-first-system/          comece aqui
    ├── building-design-system-page/  a página de componentes
    ├── building-pilot-screen/        a tela-modelo
    ├── capturing-ui-evidence/        capturas válidas
    ├── reviewing-ui-build/           revisão em contexto novo
    └── extracting-design-contract/   o DESIGN.md
  • Claude Code no computador. As skills carregam sozinhas a partir de ~/.claude/skills/.
  • Um exemplo completo, de uma oficina fictícia: design system, tela-piloto e DESIGN.md prontos para abrir.
  • Chrome ou Edge e Python com pillow e numpy, para as capturas.
  • Opcional: superpowers e impeccable. Sem eles, as skills trazem checklist próprio.

Libere o download

Leva 30 segundos. O link aparece aqui mesmo.

Você…