mubasildesign/saas-landing-page-forge

Forja de Páginas de Destino SaaS

Crie uma página de destino SaaS polida e responsiva dentro do arquivo Figma do usuário. Trate o conteúdo do usuário, as evidências do produto, o sistema de marca e o sistema Figma existente como a fonte da verdade. Diretrizes genéricas de design nunca devem superá-los.

Comece com a coleta

Leia references/intake-and-planning.md. Peça as entradas em uma lista de verificação compacta, reconheça o que já está presente e separe os itens essenciais faltantes das entradas opcionais.

Não pare em lacunas recuperáveis. Continue com suposições e placeholders identificados quando o usuário concordar ou já tiver pedido para prosseguir. Nunca invente capacidades do produto, preços, provas, logotipos de clientes, depoimentos, métricas, alegações de conformidade ou regras de marca.

Um alvo Figma válido e um MCP conectado com ferramentas de escrita adequadas são necessários para editar o arquivo. Se algum deles estiver faltando, forneça o resumo do design e o plano de ativos, depois indique o passo exato necessário para desbloquear a produção no Figma.

Trabalhe nesta ordem

1. Pré-voo: Inspecione as ferramentas MCP Figma disponíveis, abra o alvo fornecido, determine o escopo da edição e faça um inventário dos estilos, variáveis, componentes, grades e quadros próximos existentes. Siga references/figma-mcp-workflow.md.
2. Resumo: Resuma o público, a oferta, a conversão principal, a mensagem, a prova, os ativos, as restrições, as entradas faltantes e as suposições. Obtenha confirmação apenas para escolhas que alterem materialmente o resultado.
3. Arquitetura de conteúdo: Preserve o texto aprovado e organize-o em um caminho de conversão claro. Use references/conversion-and-content.md. Ofereça alterações de texto separadamente; nunca reescreva silenciosamente o conteúdo aprovado.
4. Direção criativa: Derive uma ideia visual coerente da marca e do produto. Use references/visual-direction.md. Quando a direção for genuinamente aberta, apresente até três opções distintas e recomende uma antes de construir.
5. Fundações Figma: Reutilize o sistema do arquivo quando adequado. Caso contrário, crie um pequeno sistema local de variáveis/estilos, grades, hierarquia tipográfica, espaçamento, cantos e componentes reutilizáveis.
6. Construção: Componha a página de destino para desktop com conteúdo real e capturas de tela do produto. Crie variantes responsivas para tablet/mobile ou comportamento explícito de breakpoints conforme solicitado. Use references/responsive-and-motion.md.
7. Revisão e reparo: Execute references/design-qa.md, corrija problemas materiais no arquivo e depois reinspecione os quadros afetados.
8. Entrega: Relate os nomes exatos da página/quadro, componentes e estilos reutilizáveis, variantes responsivas, anotações de movimento, suposições/placeholders, entradas não resolvidas e riscos restantes.

Regras operacionais do Figma

• Use apenas as ferramentas que o MCP Figma conectado realmente expõe. Nunca afirme que uma edição, renderização ou inspeção foi bem-sucedida sem evidência da ferramenta.
• Inspecione antes de escrever. Após uma escrita, inspecione os nós resultantes ou renderize antes de continuar.
• Não sobrescreva ou exclua trabalho não relacionado. Se o alvo for ambíguo, pergunte onde trabalhar ou solicite aprovação para criar uma página/quadro de trabalho com nome claro.
• Prefira camadas nativas editáveis, auto layout, componentes, variantes, variáveis, estilos de texto e efeitos em vez de imagens achatadas.
• Mantenha as capturas de tela do produto fiéis: preserve a proporção, corte intencionalmente e nunca as redesenhe de uma forma que implique funcionalidade inexistente.
• Use nomes estáveis e descritivos. Evite Frame 123, Group 5 ou agrupamento decorativo sem propósito de layout.
• Não altere compartilhamento, permissões, estado de publicação, propriedade ou bibliotecas.
• Em caso de falha na escrita, inspecione o arquivo antes de tentar novamente para que um sucesso parcial não crie duplicatas.

Padrão de qualidade

A página deve comunicar o que o produto faz, para quem é, por que é confiável e qual ação tomar dentro do primeiro viewport. Use uma única CTA dominante, uma hierarquia coerente, tipografia e espaçamento disciplinados, contraste acessível, apenas prova real e uma ideia visual conectada ao produto, em vez de decoração SaaS genérica.

Movimento é opcional e proposital. Especifique-o apenas quando melhorar atenção, compreensão, feedback, continuidade ou expressão da marca. Sempre inclua comportamento de movimento reduzido.

Limite de escopo

Esta habilidade produz um design de página de destino Figma e uma entrega com conhecimento de implementação. Pode anotar comportamento, ativos e regras responsivas, mas não gera código frontend de produção a menos que o usuário solicite separadamente essa entrega.

Para proveniência e a auditoria de capacidade por trás desta habilidade combinada, veja references/source-coverage.md.