design-de-sites-ishan-parihar

Design de Sites

Um pipeline que transforma qualquer agente de IA, incluindo modelos pequenos ou fracos, em um que cria e implanta sites estéticos, ricos em funcionalidades e de classe mundial. Cada fase produz um artefato nomeado que a fase seguinte relê, garantindo que nenhuma decisão seja refeita ou perdida. O acionamento ocorre por convenções do skill-creator; cada descrição é uma string entre aspas em uma única linha.

Artefatos do pipeline (a memória de trabalho): DESIGN BRIEF (público-alvo, vibe, dials) → DIRECTION (estilo, paleta, tipografia, permitido/proibido) → TOKENS (propriedades personalizadas CSS canônicas, modo escuro) → SECTION MAP (seções ordenadas com slots de título/corpo/ativo/CTA) → DEPLOY SPEC (hospedagem, tipo, URL, rollback).

Padrão de roteamento: Pipeline + Facetas

Pipeline (em ordem, nunca pule uma fase):

1. briefing - extrai o DESIGN BRIEF da mensagem do usuário, links, capturas de tela, repositório.
2. direction - escolhe estilo, paleta, tipografia ANTES de qualquer HTML ou CSS.
3. system - transforma DIRECTION em TOKENS e configura tema/modo escuro.
4. structure - transforma TOKENS e DIRECTION no SECTION MAP.
5. components - constrói cada seção a partir de receitas de blocos (filhos: navegação, heróis, seções de recursos, prova social, conversão, formulários).
6. content - preenche cada slot do SECTION MAP com conteúdo real e ativos reais.
7. motion - especificações de animação por seção a partir do dial MOTION.
8. quality - portões somente de revisão: anti-porcaria, acessibilidade, desempenho, auditoria, produção, preflight (portão final).
9. deploy - escolhe o host: higgsfield ou genérico.

Facetas (pontos de entrada, não fases):

• Site já existe (URL, repo, arquivos) → comece em redesign ANTES do briefing, depois reentre no pipeline.
• Os filhos de quality/* são somente de revisão; carregue-os ao verificar, não ao construir.
• version-control é executado PARALELAMENTE a cada fase: commite cada artefato conforme é produzido. Trabalhar em um repositório gerenciado por webdev (WEBSITES/) torna isso obrigatório.

Filhos

• briefing - sempre primeiro para novas construções; produz DESIGN BRIEF com os dials VARIANCE/MOTION/DENSITY.
• direction - estilo, paleta, tipografia via pesquisa verificada ui-ux-pro-max; produz DIRECTION.md.
• system - tokens canônicos, tema, modo escuro; produz TOKENS.
• structure - seções ordenadas e contagens de slots; produz SECTION MAP.
• components - receitas de blocos por tipo de seção; carrega um filho por seção.
• content - conteúdo real, imagens reais, sem enchimento; produz CONTENT.
• motion - especificações de animação, esqueletos GSAP, caminhos de movimento reduzido.
• preflight - portão final; consulta todos os irmãos de qualidade, depois entrega para implantação.
• deploy - roteador de hospedagem: higgsfield (site/aplicativo/jogo) ou host estático genérico; produz DEPLOY SPEC.
• redesign - entrada de auditoria primeiro quando um site já existe.
• version-control - disciplina git em todas as fases; nunca deixe trabalho não commitado.

Navegação (somente roteador raiz)

• Salto: sabe a fase? Carregue esse filho diretamente; nunca carregue toda a árvore.
• Caminhada: apenas quando a decisão em si não está clara; leia um roteador de cada vez.
• Anuncie a fase sob a qual está operando; quando ela mudar, diga.
• Re-roteamento: se o filho carregado contradizer a tarefa, retorne aqui e escolha novamente; nunca improvise um filho.
• Delegue ramos largos a um subagente com o caminho do filho e uma tarefa fatiada; apenas essa subárvore carrega.
• Teto: um filho nunca excede as regras de seu ancestral; este arquivo vence conflitos.

Convenções

Promovido de _build/plan-expanded.md; vinculante para cada nó na subárvore.

• Prova contra modelos fracos: tabelas de decisão, números concretos ("padding 96-128px", nunca "generoso"), 3-8 verificações de passar/falhar por filho que sejam contáveis e greppáveis. Explique em uma linha para que modelos mais inteligentes generalizem; a regra mecânica permanece independente.
• Fundamentação no assunto: cada escolha estética ancora no assunto concreto, público-alvo e trabalho principal (indústria, materiais, vernáculo). Uma loja de brinquedos para meninas de 8 a 11 anos e uma ferramenta para analistas financeiros devem divergir. Conteúdo REAL em todo lugar; quando o conteúdo estiver faltando, proponha cópia concreta via briefing e confirme.
• Agnóstico de linguagem: os princípios vivem em HTML semântico + CSS em references/stack-adapters.md. Nunca dependa de React, Tailwind ou qualquer framework.
• Tokens canônicos: definidos em system, usados em todo lugar: --bg --surface --text --text-muted --accent --accent-contrast --border --destructive, --radius --radius-lg, --font-display --font-body --font-mono, --space-1..--space-10 (4 8 12 16 24 32 48 64 96 128), --container, --shadow-1 --shadow-2.
• Dials de briefing: inteiros 1-10, nomes exatos VARIANCE (1 minimalista, 10 assimétrico/artístico), MOTION (1 estático, 10 cinematográfico), DENSITY (1 esparso, 10 denso). Nunca invente novos dials.
• Protocolo ui-ux-pro-max: escolhas de direção/sistema verificadas contra os dados de estilo/paleta/tipografia do pacote; em resultados vazios, recorra às tabelas internas e diga isso.
• Cinco artefatos viajam como blocos cercados, relidos pelo nome, nunca da memória.
• Frontmatter: name: corresponde ao diretório, description: string de gatilho entre aspas em uma única linha.
• Estilo: sem travessão (use hífen ou ponto final), sem emojis, proibições absolutas vivem APENAS em anti-slop, links cruzados entre irmãos relativos à raiz (heroes).

Inegociáveis

• Sem travessão em nenhum lugar em qualquer nó; o detector do filho anti-porcaria faz grep para ele.
• Sem logotipos, depoimentos, estatísticas ou imagens de marca fabricados; content propõe, usuário confirma.
• Sem tokens de espaço reservado; toda seção é renderizada através do conjunto de tokens canônicos.
• Sem mistura de sistemas de design: uma família de estilo, uma paleta, um par de tipos por construção.
• Sem artefatos não commitados: version-control commita a saída de cada fase antes do início da próxima fase.
• Sem implantação sem preflight aprovado.
• Gráficos explicitamente fora do escopo deste skill. Para visualização de dados (25 tipos de gráfico no ui-ux-pro-max), consulte python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<formato dos dados>" --domain chart em vez de improvisar grade + barras.