saikirantechy/open-design-ai

Skill de Página de Espera

Páginas de pré-lançamento são seu primeiro aperto de mão com futuros usuários. Esta skill constrói uma entrada focada e honesta: sua identidade de marca, o que você está criando, um caminho claro para entrar na lista inicial. Sem escassez artificial, sem contagem regressiva falsa, sem táticas de inflação — apenas um recipiente limpo e mobile-first para interesse genuíno.

Fluxo de Trabalho

Pré-voo: Carregar template reforçado e base da marca

0. Carregar a identidade da marca — Leia DESIGN.md para obter o sistema de cores, pares de fontes e regras espaciais. Esta é sua base. Uma página de espera vive ou morre pela consistência com a marca que representa. Se DESIGN.md estiver ausente, peça ao usuário para fornecer um antes de prosseguir.
1. Ler e copiar o template reutilizável — Leia assets/template.html. Este template é a semente reforçada para todas as saídas. Copie-o para index.html como sua base. Não escreva HTML do zero nem se desvie desta estrutura. O template tem todo o layout necessário, estrutura de formulário, decorações, estilos de foco e andaimes de acessibilidade embutidos.

Etapas: Substituição de tokens com validação e escape

2. Mapear tokens das entradas — Para cada placeholder no template (por exemplo, {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), siga as regras de substituição abaixo:
   • Tokens de texto ({{PRODUCT_NAME}}, {{TAGLINE}}): Escape HTML <, >, &, ", ' antes da inserção em nós de texto HTML ou valores de atributo.
   • Tokens HTML ({{LOGO_MARK}}): Se usar iniciais de texto, escape HTML por padrão. Se usar SVG inline, você deve sanitizá-lo estritamente usando uma lista de permissões: remova tags <script>, manipuladores de eventos (on*), <foreignObject>, referências externas (href, xlink:href, url()) e quaisquer atributos/elementos não permitidos antes da inserção. Se o SVG não puder ser sanitizado com segurança, recue para iniciais de texto escapadas. Nunca emita HTML arbitrário cru e não sanitizado. Garanta que qualquer SVG seja dimensionado de forma limpa dentro de seu contêiner.
   • Tokens de expressão de cor ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}): Devem aderir estritamente a uma gramática de cor explícita (#hex, rgb/rgba, hsl/hsla, oklch, ou color-mix() usando apenas variáveis locais). Rejeite fortemente qualquer entrada contendo ;, {}, <, >, comentários (/*), @, url(, ou referências externas para evitar injeção de CSS. Não envolva em # nem adicione aspas extras. Exemplos: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Insira como está nas variáveis CSS :root. Derive --success de DESIGN.md se presente; caso contrário, use apenas o fallback permitido #2D6A4F.
   • Tokens de nome de fonte ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): São valores CSS font-family, já entre aspas se contiverem espaços (por exemplo, 'DM Sans', Syne). Insira como está nas declarações --font-display e --font-body; NÃO adicione aspas extras.
   • Tokens de URL de fonte ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Espaços devem ser codificados como + para a URL do Google Fonts (por exemplo, DM+Sans, IBM+Plex+Serif). Valide se a URL está bem formada antes da inserção.
3. Verificar regras de mapeamento de tokens — Todos os tokens de cor agora estão em variáveis CSS:
   • --bg = {{BG_EXPRESSION}} (por exemplo, #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (por exemplo, #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (selo da marca)
   • --deco = {{DECO_EXPRESSION}} (decoração primária)
   • --deco-stripe = {{STRIPE_EXPRESSION}} (faixa de destaque)
   • --input-border = {{BORDER_EXPRESSION}} (expressão CSS completa com opacidade)
   • --success = {{SUCCESS_EXPRESSION}} ou fallback #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}} (cor do texto do botão para contraste)
   • --ticker-bg = {{TICKER_BG_EXPRESSION}} (fundo do ticker animado)
   • --ticker-fg = {{TICKER_FG_EXPRESSION}} (texto do ticker animado)
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (traços SVG, tipicamente suaves com 12–15% de opacidade)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (sombra do contêiner do logotipo, tom sutil do primeiro plano)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (cor de texto contrastante para iniciais do logotipo)
4. Layout responsivo — O template inclui dimensionamento mobile-first:
   • 375px: formulário empilha em coluna única, logotipo reduz para 40px, decoração comprime, sem scroll horizontal.
   • 768px: espaço confortável de duas colunas.
   • 1440px+: layout centralizado com bastante espaço em branco.
   • Verifique se todo o texto permanece legível e se o campo de e-mail + botão estão totalmente visíveis (sem corte) em 375×667 e 390×844.

Validação: Executar portões de qualidade reforçados antes de emitir

5. Executar a lista de verificação de qualidade — Leia references/checklist.md. Valide cada portão P0 antes de emitir:
   • Exatamente um CTA (formulário de e-mail)
   • Sem contador regressivo, sem prova social falsa, sem emoji
   • Sem scroll horizontal em 375px
   • Campo de e-mail tem type="email" e required; primeiro nome não tem required
   • Formulário NÃO usa novalidate; JS usa proteção checkValidity()
   • Mensagem de sucesso tem role="status" ou aria-live="polite"
   • Todas as cores de DESIGN.md ou fallback permitido; nenhum valor hex inventado
   • Todo texto do usuário é escapado em HTML; tokens de cor aderem à gramática estrita; fontes são codificadas em URL
   • Passe P0 ou não emita. Se qualquer portão P0 falhar, peça ao usuário ou corrija os mapeamentos de token e tente novamente.
6. Verificar portões P1 para submissão de qualidade (recomendado):
   • Estados hover e active no botão de envio
   • Validação de formulário com feedback claro
   • Animação do ticker respeita prefers-reduced-motion: reduce
   • Todos os elementos interativos têm estilos de foco visíveis (input:focus inclui outline)
   • Suporte a teclado Tab/Enter
   • Contraste WCAG AA para texto do corpo (≥4.5:1) e rótulo do botão (≥4.5:1)
   • Logotipo alt/aria-label presente; ticker tem aria-hidden="true"
   • <html lang=""> está definido

Saída

7. Emitir HTML limpo — Arquivo único, CSS inline, SVG para gráficos. Marque elementos interativos com data-od-id (título, formulário, logotipo, ticker, grade, etc.) para que agentes possam customizar sem fazer parsing.

Portões de qualidade

Esta skill impõe um fluxo de trabalho baseado em template e reforçado para garantir conformidade. Você deve seguir este caminho de execução; desviar-se do template desqualifica a saída.

Execução obrigatória baseada em template:

• Leia assets/template.html como sua base; não escreva HTML do zero.
• Copie-o para index.html e substitua apenas os tokens {{PLACEHOLDER}} com valores validados/escapados.
• Execute cada portão P0 em references/checklist.md antes de emitir; se algum falhar, corrija e revalide.

Portões P0 (devem passar):

• Único CTA: O formulário de e-mail é o único elemento interativo. Sem navegação, sem botões secundários, sem links sociais.
• Posicionamento do logotipo: Fixo no canto superior esquerdo, corresponde à cor de destaque de DESIGN.md, reduz em dispositivos móveis (50px → 40px).
• Consistência de cores: Toda cor da paleta de DESIGN.md. Única exceção codificada permitida: #2D6A4F para --success.
• Sem anti-padrões: Sem contador regressivo, sem prova social falsa, sem ícones de emoji, sem lorem ipsum.
• Integridade do conteúdo: Título e cópia vinculam diretamente às entradas product_name e tagline—sem conteúdo de preenchimento.
• Ajuste móvel: Sem scroll horizontal em 375px. Campo de e-mail e botão de envio estão totalmente visíveis (sem corte) em 375×667 e 390×844. O overflow vertical é scrollável, não oculto.
• Disciplina tipográfica: Apenas fontes de exibição + corpo (regra de 2 fontes). Tamanhos consistentes entre seções.
• Estrutura do formulário: Dois campos (primeiro nome opcional, e-mail obrigatório), proteção checkValidity(), mensagem de sucesso com role="status".
• Escape de tokens: Todo texto fornecido pelo usuário escapado em HTML; tokens de cor aderem à gramática estrita e não contêm caracteres inseguros (;, {}, <, >, /*, @, url(); nomes de fontes são codificados em URL; {{LOGO_MARK}} é iniciais de texto escapadas ou SVG inline estritamente sanitizado (sem scripts, sem manipuladores de eventos, sem foreignObject, sem hrefs externos).

Portões P1 (devem passar para submissão de qualidade):

• Seção hero visualmente distinta e acima da dobra.
• Botão de envio de e-mail tem estados hover e active.
• Validação de formulário fornece feedback claro.
• Página scrollável (não cortada) em todas as viewports móveis; CTA visível sem scroll.
• Animação do ticker pausada/removida sob prefers-reduced-motion: reduce.
• Todos os elementos interativos têm estilos de foco visíveis (outline, não apenas outline:none).
• Teclado: Tab alcança cada campo do formulário; Enter envia.
• Contraste WCAG AA: Texto do corpo ≥4.5:1, rótulo do botão ≥4.5:1.
• Logotipo alt/aria-label presente; ticker tem aria-hidden="true".
• <html lang=""> definido para o código de idioma correto.

Restrição de decoração:

• Zona inferior realça sem distração. Opacidade, traços sutis, animação suave.
• Sem gradiente que cubra mais de 20% da altura da viewport.
• Espiral, faixa, grade ou ticker usam apenas cores de DESIGN.md.

Saída

Emitir somente após todos os portões P0 em references/checklist.md passarem.

Emita o artefato entre tags:

<artifact identifier="waitlist-id" type="text/html" title="Em Breve — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

Uma linha de descrição acima do artefato; nada abaixo.

Pós-emissão: Se o usuário solicitar alterações, atualize o index.html no local e reexecute as verificações da lista P0 antes de emitir a próxima versão. Não pule a validação em iterações.