brandvm/webflow-prototype

Protótipo Webflow: design Figma → protótipo localhost aprovado

A primeira fase de um projeto. Todo site começa a partir de um arquivo Figma, e seu design é construído em código, nas URLs e breakpoints reais, com as variáveis e nomes de classes que o Webflow terá, e aprovado página por página. O resultado não é um mock: é a marcação, as classes, os módulos e a lista de etapas manuais a partir das quais a construção no Webflow começa.

Esta fase nunca escreve no Webflow. Ela lê o site (o snapshot) e propõe mudanças; as escritas pertencem à skill webflow-build, em sua própria sessão, após o protótipo ser aprovado.

• checklists.md controla as entradas, cada página do protótipo e o handoff.
• prototype-starter/ é a pasta de protótipo a partir da qual um projeto começa (pnpm new-project a copia).
• figma.md lê o arquivo Figma através do conector Figma: frames por breakpoint, screenshots, variáveis, medidas.
• As etapas que constroem uma página a partir de seus frames estão em webflow-build (SKILL.md › O protótipo, a partir do Figma), as mesmas que o AI do Bench segue. O estágio Protótipo de seu checklists.md rastreia o protótipo até a aprovação do cliente.
• A skill webflow-style-guide cria o guia de estilo, a primeira página do protótipo.
• conventions.md (em webflow-build) define a estrutura de página e seção e a nomenclatura de classes e variáveis que o protótipo segue; lessons/ contém o que custou tempo em construções anteriores.
• rules.md contém as regras que toda skill Webflow compartilha (sem commit ou push sem OK, Designer primeiro, sem credenciais no chat), o encerramento da sessão e como contribuir de volta.

Cada item do checklist diz quem faz: [Claude] , [Claude checks] (Claude verifica e relata; uma pessoa corrige o que Claude não pode) ou [Person] (Claude pode lembrar e rastrear, nunca assumir).

Início da sessão (toda sessão)

1. Leia o CLAUDE.md do workspace, depois o AGENTS.md e GOTCHAS.md do repositório, depois docs/handoff/. Folheie lessons/README.md; as lições do importador em lessons/mcp.md decidem como a marcação do protótipo é escrita.
2. Leia a memória do projeto: onde a última sessão parou, perguntas em aberto. Diga em uma linha onde as coisas estão e o que vem a seguir.
3. Em um novo projeto, execute Antes do protótipo em checklists.md primeiro. Se uma entrada estiver faltando, peça por ela; não adivinhe conteúdo, estados ou campos de SEO.
4. O servidor de desenvolvimento do protótipo está rodando (pnpm dev em prototype/).
5. O escopo de hoje é uma página. Diga qual.

Configuração do projeto (novo projeto)

No Bench, Add client › a partir de um design Figma configura a pasta do cliente, o repositório a partir deste template e um prototype/ vazio, então constrói o protótipo a partir dos frames que a pessoa escolhe (etapa 6). As etapas da pessoa (4) e as entradas ainda se aplicam.

Fora do Bench, o fluxo começa a partir de uma mensagem (README › Iniciando um projeto), por ex. "Novo projeto: site Webflow , Figma . Configure o repositório e o workspace, execute Antes do protótipo, depois construa o protótipo a partir do arquivo Figma página por página; aguarde minha autorização antes de qualquer alteração no Webflow."

Antes disso, uma pessoa criou o repositório a partir do template no GitHub, clonou-o em sua própria pasta de cliente (<Client>/wf-<client>/) e duplicou o site inicial sob o nome do cliente (starter-site.md).

1. Skills primeiro. Ofereça pnpm update-skills (pergunte; substitui edições locais das skills), para que o projeto comece com as lições mais recentes.

2. Encontre o site. Através do conector Webflow, liste os sites e corresponda ao nome que a pessoa deu: o ID do site e o nome curto (o subdomínio de staging, <short name>.webflow.io). Duas correspondências ou nenhuma → pergunte. Leia a org e o repositório do GitHub de git remote get-url origin.

3. Preencha o repositório e configure o workspace:

   pnpm install
   pnpm new-project --client "<Client>" --slug <short name> --org <org> --site-id <id>
   

   Isso preenche os fatos do projeto em AGENTS.md, o nome do package.json, REPO em loader.html e o título do handoff, e escreve webflow-build.config.json. Em torno do repositório, cria o workspace: <Client>/CLAUDE.md (importa AGENTS.md, GOTCHAS.md e docs/handoff/), .mcp.json, links para as skills, prototype/ (uma cópia de prototype-starter/) e Assets/. Escreva o link do Figma no CLAUDE.md do workspace (linha Design). Pergunte por qualquer valor que não encontrar; nunca adivinhe.

4. Liste as etapas da pessoa, nesta ordem, e rastreie-as em docs/handoff/MANUAL-TODO.md até que sejam concluídas:

   1. Configurações do Repositório → Pages → Source: GitHub Actions; adicione a equipe de desenvolvedores.
   2. Primeiro push: Claude pede para commitar a configuração; após o push, o workflow de staging deve passar (https://<org>.github.io/<repo>/styles.css carrega).
   3. Cole o loader de loader.html (ORG e REPO agora estão preenchidos): código head e código footer nas configurações do Site. Embeds 2a e 2b já estão em G | Components com placeholders: Claude os preenche através do MCP após a autorização, ou a pessoa os cola.
   4. Senha de staging e noindex até o lançamento.

5. Mova para o workspace. A partir da próxima sessão, Claude é aberto em <Client>/, não no repositório: é onde o servidor MCP, as skills e as importações estão configurados. Execute pnpm install em prototype/.

6. Entradas, depois o protótipo. Execute Antes do protótipo em checklists.md (inclui o plano de componentes e a lista de vídeos), leia o arquivo Figma (figma.md), tire o snapshot do Webflow e construa o protótipo a partir do arquivo: o guia de estilo primeiro (skill webflow-style-guide), aprovado antes de qualquer página de conteúdo, depois página por página a partir dos frames selecionados (webflow-build › O protótipo, a partir do Figma), cada uma passando em Página do protótipo concluída.

7. Preencha docs/handoff/HANDOFF.md a partir do design; mantenha MANUAL-TODO.md e BUILD-NOTES.md atualizados desde a primeira sessão.

O protótipo

• Ele espelha o Webflow: as mesmas URLs, os mesmos breakpoints (991, 767, 479), os nomes de classes do Webflow e a estrutura de shell de página e seção de conventions.md. Nav e footer são parciais únicos (um componente cada).
• Ele marca componentes e CMS: data-component="<Nome do componente>" na raiz de uma instância de componente (os parciais Nav e Footer têm os seus), data-prop="<Nome da prop>" no que uma propriedade de componente define, data-collection="<Nome da coleção>" em um wrapper de Lista de Coleção e data-field="<Nome do campo>" em um elemento vinculado a um campo CMS (em um item de lista ou em uma página de template CMS). Nada visível muda, e eles não são feitos no Webflow, que tem seus próprios componentes e vinculações CMS (prototype-starter/README.md › Marcadores de componente e CMS).
• Ele lê as variáveis do site a partir de um snapshot do Webflow (prototype-starter/README.md › Snapshot do Webflow). Após escrever ou atualizar o snapshot: pnpm css, depois pnpm check:snapshot, depois pnpm check:drift, que compara o snapshot com a folha de estilo que o site de staging publica e lista cada variável, classe e valor que difere (publique no staging primeiro).
• Sem conector Webflow? (ainda não configurado, logado em outro site, ou nenhuma chamada MCP permitida) pnpm css:published <URL de staging> constrói tokens.css, webflow.css e webflow-base.css a partir do CSS que o site publica (apenas GET; CSS por página é lido página por página e mesclado), e recupera o snapshot até onde o CSS permite. O CSS é exato; nomes do Designer, nomes de modos, classes vazias e interações não estão nele (o cabeçalho do script lista tudo que ele adivinha), então diga em HANDOFF.md que o snapshot é um substituto, nunca proponha uma variável ou classe por um nome adivinhado sem verificá-lo no Designer, e substitua o snapshot do MCP assim que estiver disponível (delete webflow-snapshot/source.json, depois pnpm css). Enquanto source.json existir, pnpm css se recusa a executar.
• Mudanças de variáveis são propostas, nunca feitas: como antigo → novo em proposed.css, agrupadas e identificadas por letras para aprovação. Novas classes vão em new-classes*.css, escritas como o Designer pode mantê-las.
• A marcação é escrita para o importador: formas são divs, não spans vazios; controles de formulário estão dentro de um <form>; atributos booleanos carregam um valor; uma quebra de linha tem   antes dela; módulos dependem de hooks data-*, não de nomes de classes. pnpm wf:preflight verifica tudo isso.

Ordem.

1. Snapshot, pnpm css, pnpm check:snapshot, pnpm check:drift (sem conector: pnpm css:published, depois as mesmas verificações).
2. O guia de estilo (skill webflow-style-guide), aprovado antes de qualquer página de conteúdo.
3. Páginas, uma de cada vez, a partir de seus frames Figma (webflow-build › O protótipo, a partir do Figma). Para cada uma: construa-a; adicione a linha para cada classe ou componente que introduziu (pnpm style-guide); pnpm screens (cada largura de 2560 a 360: overflow e erros) e pnpm check:states (estados de foco e pressionado); execute Página do protótipo concluída; a pessoa a aprova em 1440, 820, 667 e 390.
4. O cliente aprova o protótipo por escrito.
5. O handoff (abaixo).

Entregando para a construção

Execute Handoff do protótipo em checklists.md. O pacote a partir do qual a sessão de construção começa:

• docs/handoff/HANDOFF.md: páginas, variáveis e classes, CMS, componentes a fazer, módulos e seus hooks, a lista de vídeos.
• pnpm wf:styles: cada nova classe classificada no que o conector pode criar, no que uma pessoa define manualmente no Designer (já linhas em MANUAL-TODO.md) e no que vai para o CSS do repositório.
• pnpm wf:preflight: as etapas conhecidas do importador por página.
• O próprio protótipo aprovado, em execução, como a referência contra a qual a construção é comparada (pnpm wf:compare, wf:pass).

Em seguida, dê à pessoa a mensagem que inicia a sessão de construção, preenchida, para colar em uma nova sessão aberta na pasta do workspace:

Continue : construa no Webflow. O protótipo está aprovado (todas as páginas e o guia de estilo, ). Leia o CLAUDE.md do workspace, docs/handoff/ e a skill webflow-build. Comece com a fundação: proponha o lote de variáveis de proposed.css e aguarde minha autorização antes de cada escrita no Webflow. Depois, estilos de tag, classes (a partir do plano de estilos), coleções CMS, a porta do repositório e o loader, a página do guia de estilo, a página de mídia (se a lista de vídeos tiver entradas), componentes e páginas, uma página por sessão.

A construção é executada em sua própria sessão para que carregue apenas as regras de construção e para que o protótipo permaneça intocado como referência.

Ritmo de trabalho

• Uma página por sessão, completamente concluída: construída, verificada em cada largura, seus estados concluídos, Página do protótipo concluída executada, handoff atualizado.
• docs/handoff/ permanece atualizado durante a sessão, não no final: uma decisão vai para HANDOFF.md quando é tomada.
• Lições são devolvidas. No encerramento, ofereça cada lição template-candidate ao template (rules.md › Contribuindo).