alieslami745-bot/landing-skill

Landing com Design System no Figma

Visão Geral

Transforme um briefing completo de landing page em um design finalizado no Figma. Infira a menor estrutura de página útil a partir do briefing, mapeie cada requisito para o design system autorizado, componha um padrão local derivado apenas quando o sistema não tiver um componente correspondente único e execute uma passagem de polimento visual automática após a montagem.

Esta skill projeta no Figma. Ela não escreve HTML, CSS, React, Next.js ou outro código de implementação. Nunca edita ou publica a biblioteca do design system de origem.

A linguagem visual autorizada permanece a fonte da verdade. As únicas exceções deliberadas são:

• um fallback de fonte Figma aplicado localmente quando a fonte do design system não está disponível;
• uma composição/componente derivada local, construída a partir de partes aprovadas do design system e primitivas do Figma, cujos valores visuais estão vinculados a estilos ou variáveis do design system;
• um slot de asset vazio quando nem o design system nem o briefing contêm um asset adequado.

Cada exceção deve estar visível no relatório de conclusão.

Roteamento: Basalam ou Design System personalizado

Resolva a rota do Design System por execução de landing, antes de qualquer operação no Figma ou Mobbin:

• BASALAM_MODE: use a fonte Basalam integrada neste pacote. Não peça ao usuário um link de Design System ou outro Design System.
• CUSTOM_DS_MODE: use o Design System ou a skill de Design System instalada fornecida pelo usuário.
• ROUTE_PENDING: o usuário solicitou uma landing, mas a rota da marca ainda não está explícita.

Se o briefing disser explicitamente que a landing é para Basalam, selecione BASALAM_MODE sem perguntar novamente. Se nomear explicitamente outra marca ou contexto de produto, selecione CUSTOM_DS_MODE. Se nenhum estiver claro, pergunte exatamente:

این لندینگ برای باسلام است؟ بله / خیر

Não faça nenhuma mutação no Figma ou Mobbin enquanto a rota estiver como ROUTE_PENDING. Mantenha a resposta restrita à execução atual da landing; se o briefing ou a marca mudar, resolva a rota novamente.

Integração no primeiro uso

Após a rota ser conhecida, na primeira invocação em uma nova conversa, se o usuário ainda não tiver fornecido todas as entradas necessárias, envie uma mensagem curta específica da rota antes de perguntas detalhadas ou pré-verificação:

• BASALAM_MODE:

  برای شروع بفرست: ۱) brief ۲) نود/فریم مقصد در Figma ۳) assetهای لازم، در صورت وجود.

• CUSTOM_DS_MODE:

  برای شروع بفرست: ۱) brief ۲) design system یا اسکیل آن ۳) نود/فریم مقصد در Figma ۴) assetهای لازم، در صورت وجود.

Se as entradas já estiverem completas, pule a integração e execute a pré-verificação. Não repita após o usuário ter fornecido as entradas. Continue coletando apenas detalhes ausentes e retorne BLOCKED sem mutação quando um pré-requisito ainda estiver ausente.

Quando usar

Use esta skill quando o usuário quiser uma landing page projetada no Figma e fornecer:

1. um briefing completo e seu conteúdo aprovado;
2. BASALAM_MODE com a fonte integrada ou CUSTOM_DS_MODE com uma fonte de design system Figma explícita e acessível;
3. um destino Figma exato e editável.

Mobbin é um auxílio de pesquisa opcional, não uma entrada obrigatória. Se um Mobbin MCP configurado estiver disponível, use-o somente leitura para encontrar padrões de UX próximos antes de compor um padrão ausente. Quando a pesquisa Mobbin for realmente necessária, mas nenhum Mobbin MCP configurado e autorizado estiver disponível, pause antes de qualquer mutação no Figma e ofereça a escolha de conexão descrita abaixo. Após o usuário escolher a continuação local—ou quando um Mobbin conectado não tiver correspondência útil—continue com o método local de UI/UX desta skill.

Não use esta skill para código, trabalho apenas de cópia, criação de design system, manutenção de biblioteca de origem ou exploração visual não restrita que não tenha uma fonte e destino Figma autorizados.

Entradas obrigatórias

Trate valores em branco, desconhecidos, TBD, ambíguos, inacessíveis ou conflitantes como ausentes. Não escolha silenciosamente um destino ou invente fatos de negócio.

0. Rota

Exija uma rota BASALAM_MODE ou CUSTOM_DS_MODE resolvida. Se a rota for desconhecida, use ROUTE_PENDING, faça a pergunta sobre Basalam, não faça zero mutações e aguarde a resposta.

1. Briefing

Exija:

• produto ou serviço e oferta;
• público-alvo, problema do usuário, nível de conscientização e objeções importantes;
• proposta de valor e benefícios suportados;
• uma meta de conversão e uma CTA primária;
• fatos aprovados, alegações, provas, preços, texto legal e cópia das seções quando necessários;
• seções obrigatórias e proibidas, se o usuário tiver alguma;
• idioma, direção de escrita, breakpoints solicitados e tamanhos de viewport;
• a função pretendida, proporção ou necessidade de conteúdo para cada imagem, ícone ou ilustração esperada.

Use assets fornecidos ou assets aprovados do design system quando disponíveis. Um asset visual ausente não bloqueia a execução por si só: pode ser resolvido com o material permitido mais próximo ou um slot de asset vazio explícito, conforme descrito abaixo.

Redija cópia de interface comum apenas quando o briefing permitir explicitamente e os fatos fornecidos forem suficientes. Nunca invente alegações, provas, preços, depoimentos, linguagem legal ou fatos de negócio.

2. Fonte do design system

Em BASALAM_MODE, resolva a fonte integrada apenas a partir destes caminhos relativos ao pacote:

• references/basalam-design-system/manifest.json
• references/basalam-design-system/BASALAM-RULES.md
• references/basalam-design-system/kit/
• assets/basalam-design-system/fonts/

Verifique o manifesto, os arquivos de coordenação necessários, as referências de componentes relevantes e os assets de fonte antes da mutação no Figma. Não peça ao usuário uma URL de Design System ou substitua silenciosamente por outro sistema. Se o pacote estiver ausente ou falhar nas verificações de integridade, retorne BASALAM_DEPENDENCY_MISSING com os caminhos exatos ausentes/corrompidos e não faça zero mutações.

Em CUSTOM_DS_MODE, exija uma URL ou chave de biblioteca/arquivo Figma inequívoca, com acesso de leitura e componentes publicados, variantes, variáveis, estilos de texto e estilos de superfície/fundo identificáveis e relevantes, além de quaisquer ícones/assets disponíveis. A ausência de um ícone ou asset adequado é tratada por ASSET_NEAREST ou ASSET_SLOT; não invalida a fonte por si só. Exija o tema ou modo pretendido quando mais de um existir.

Se o usuário nomear uma skill de design system instalada em CUSTOM_DS_MODE, carregue-a junto com esta skill. Um nome de skill é suficiente apenas quando resolve uma fonte Figma autorizada de forma inequívoca; caso contrário, reporte a fonte como ausente.

Fonte Basalam integrada

A rota Basalam é portátil: o pacote contém um snapshot versionado das regras do design system Basalam fornecidas pelo usuário, referências do kit e arquivos de fonte Dana. Resolva-os relativos a este pacote de skill; nunca use um caminho absoluto pessoal e nunca exija uma skill basalam-design-system instalada separadamente para BASALAM_MODE.

Leia BASALAM-RULES.md e os dois arquivos de coordenação em kit/ primeiro, depois carregue apenas as referências de componente/token relevantes para o briefing. O pacote é somente leitura durante uma execução de design. Seu manifesto registra proveniência, data do snapshot, tamanhos de arquivo e hashes SHA-256. As fontes integradas são recursos, não permissão para instalar fontes automaticamente; verifique sua disponibilidade no Figma e aplique a política de fonte documentada se o runtime não conseguir ver Dana.

3. Destino Figma

Exija um arquivo de Design Figma mais uma página de destino existente exata e um nó/frame de inserção, fornecidos como URL do nó ou identificadores equivalentes, com acesso de edição. Não crie um arquivo, página ou destino substituto quando qualquer parte estiver ausente.

Uma URL de nível de arquivo sozinha nunca satisfaz este requisito. Não escolha uma página padrão, use a raiz da tela ou crie um frame de inserção. Relate a página exata ausente, o nó/frame de inserção e qualquer acesso de edição não verificado como lacunas separadas.

Limites inegociáveis

• Trabalhe apenas no Figma. Nunca produza código de implementação.
• Os componentes visuais diretamente mapeados devem ter proveniência na fonte do design system explicitamente autorizada.
• Uma composição derivada local é permitida apenas no arquivo de destino. Seus filhos visuais podem ser instâncias autorizadas do design system, variantes publicadas, variáveis, estilos de texto, estilos de superfície/fundo, ícones, assets aprovados e primitivas nativas do Figma, como Frame, Auto Layout, Text, Rectangle e Component.
• Toda propriedade visual de uma primitiva local deve estar vinculada a um token/estilo autorizado do design system. Nenhuma cor, gradiente, sobreposição, tamanho de fonte, peso, altura de linha, espaçamento, raio, sombra, efeito ou valor visual arbitrário codificado é permitido, exceto a substituição documentada da família FONT_FALLBACK.
• Um componente derivado local nunca deve ser desvinculado de uma instância autorizada, publicado para a biblioteca de origem ou usado para criar silenciosamente uma segunda linguagem de design. Ele permanece dentro do destino e sua proveniência é registrada.
• Nunca use uma biblioteca de terceiros, um asset externo, um ícone desenhado à mão, um visual do Mobbin copiado ou um componente estrangeiro.
• Os resultados do Mobbin são apenas referências de UX. Reinterprete sua hierarquia, padrão de interação e composição com o design system autorizado; não reproduza estilo de marca ou importe seus assets.
• Não mencione ou pause para o Mobbin quando todo padrão necessário for DIRECT_MAPPED. Nunca instale ou conecte o Mobbin em nome do usuário, a menos que ele peça explicitamente ajuda para configuração.
• Em BASALAM_MODE, use apenas a fonte Basalam integrada e sua proveniência verificada. Nunca recorra silenciosamente a um Design System personalizado ou não relacionado.
• A fonte primária do design system é sempre preferida. Um fallback de fonte é permitido apenas sob a política de fallback de fonte abaixo.
• O polimento de fundo pode usar apenas estilos de superfície/fundo existentes do design system. Nunca crie um novo gradiente, sobreposição, cor ou efeito de fundo.
• Não altere cópia, alegações, ordem das seções, quantidade de seções, significado da CTA ou assets fornecidos durante a Passagem de Polimento.
• Nunca edite, publique ou mute a biblioteca de origem do design system.
• Nunca faça um design parcial enquanto um pré-requisito, destino, permissão, conteúdo, token ou plano de construção válido estiver ausente. Um slot de asset vazio aprovado é uma exceção explícita de conclusão, não um parcial não reportado.

Modos e status de construção

Use estes termos no mapa de cobertura interno e relatório final:

• DIRECT_MAPPED: um componente/variante existente do design system autorizado é usado.
• DS_COMPOSED: uma composição local ou componente local reutilizável é construído no destino a partir de partes autorizadas do DS e primitivas Figma vinculadas a tokens.
• ASSET_NEAREST: o asset permitido mais próximo do design system ou do briefing é usado.
• ASSET_SLOT: nenhum asset adequado existe; um slot de substituição vazio é criado com regras de layout/superfície do DS.
• FONT_FALLBACK: a fonte primária do DS não está disponível e uma fonte Figma acessível é aplicada enquanto as métricas de tipografia do DS são preservadas.
• POLISH_COMMITTED: o polimento automático passou no QA.
• ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK: a montagem é válida, mas o polimento falhou após duas tentativas e foi removido.
• AWAITING_MOBBIN_CHOICE: a pesquisa de referência é necessária, o Mobbin não está conectado e o usuário não escolheu se deve conectá-lo ou continuar localmente; nenhuma mutação ocorreu.
• MOBBIN_SKIPPED_BY_USER: o usuário escolheu o método local de UI/UX depois que o Mobbin foi considerado indisponível.
• ROUTE_PENDING: a rota da marca da landing é desconhecida e a pergunta sobre Basalam está aguardando resposta; nenhuma mutação ocorreu.
• BASALAM_MODE: a fonte Basalam integrada é selecionada para esta execução de landing.
• CUSTOM_DS_MODE: uma fonte de Design System fornecida pelo usuário é selecionada para esta execução de landing.
• BASALAM_DEPENDENCY_MISSING: a fonte Basalam integrada ou seus requisitos de integridade estão ausentes ou inválidos; nenhuma mutação ocorreu.
• BLOCKED: um pré-requisito ou regra de construção obrigatória não pode ser satisfeita.

DS_COMPOSED, ASSET_SLOT e FONT_FALLBACK são exceções permitidas e documentadas. AWAITING_MOBBIN_CHOICE e ROUTE_PENDING são pausas temporárias, não BLOCKED. BASALAM_DEPENDENCY_MISSING é uma parada de pré-verificação com zero mutações. Esses status não autorizam estilo personalizado arbitrário.

Portão de pré-verificação atômico

Antes de qualquer operação Figma mutante, execute uma pré-verificação completa somente leitura. Criar um arquivo, página, frame, nó, componente, instância, espaço reservado ou seção parcial conta como mutação.

Carregue figma:figma-generate-design e figma:figma-use antes de qualquer operação de leitura ou escrita no Figma. Em BASALAM_MODE, carregue as regras Basalam integradas e verifique seu manifesto antes de resolver componentes; em CUSTOM_DS_MODE, carregue a skill de design system nomeada antes de resolver sua fonte.

Valide todos os itens a seguir juntos:

1. A rota está resolvida. Em BASALAM_MODE, o manifesto integrado, as referências necessárias e os assets de fonte estão presentes e válidos; em CUSTOM_DS_MODE, a fonte do Design System fornecida pelo usuário está explícita e acessível.
2. O briefing contém os fatos necessários, conteúdo aprovado, CTA, idioma/direção e requisitos de breakpoint.
3. O arquivo de destino, página, nó de inserção, tipo de arquivo e permissão de edição são válidos.
4. A estrutura da landing pode ser inferida sem inventar fatos de negócio.
5. Cada seção selecionada, breakpoint e estado necessário é DIRECT_MAPPED ou tem um plano DS_COMPOSED válido.
6. Cada plano DS_COMPOSED pode ser construído a partir de partes autorizadas do DS e primitivas Figma nativas vinculadas a tokens, sem um novo token, estilo, edição de biblioteca de componentes ou asset estrangeiro.
7. Cada asset esperado tem um destes resultados: asset fornecido/autorizado, ASSET_NEAREST ou ASSET_SLOT.
8. A fonte primária do DS está disponível para cada script, peso e estilo necessário; ou um candidato de fallback Figma acessível válido foi identificado.
9. Determine se a pesquisa Mobbin é necessária. Registre MOBBIN_NOT_NEEDED quando todo padrão necessário for DIRECT_MAPPED. Caso contrário, registre MOBBIN_USED, MOBBIN_SKIPPED_BY_USER, MOBBIN_ERROR, MOBBIN_NO_MATCH ou LOCAL_UX_METHOD. Se Mobbin for necessário, mas indisponível, e o usuário ainda não tiver escolhido um caminho, use a escolha de conexão Mobbin abaixo antes de retornar READY.

Construa uma tabela de cobertura antes da mutação:

| Requisito | Propósito da seção | Modo de construção | Filhos/primitivas do DS | Tokens/estilos | Fonte de conteúdo | Status do asset | Fonte

… [truncado para tradução]