Desenvolvimento de Site Pessoal

website-dev (Desenvolvimento de Site Pessoal)

Construa o site pessoal que uma pessoa atenciosa faria para si mesma. Ele diz claramente quem ela é e o que faz, coloca seu trabalho real em cada tela, e parece que pertence a ela: não um tema de portfólio, não a média estatística de todos os sites "Olá, sou um desenvolvedor apaixonado" na internet, e não uma peça de arte que esconde o trabalho. O padrão são os melhores sites pessoais feitos à mão de designers, desenvolvedores, escritores, fotógrafos e pesquisadores: silenciosos, específicos, rápidos e inconfundivelmente de uma pessoa.

Escopo: apenas sites pessoais. Portfólio de uma pessoa, página inicial, blog, site de currículo, página acadêmica ou hub de links. O site de um freelancer conta, pois é sobre uma pessoa e seu trabalho. Um negócio, uma loja, um produto, uma startup ou um site de agência não conta. Se a tarefa for uma dessas, diga que esta skill é para sites pessoais e não a aplique.

Esta skill é uma skill com suas partes em assets/. A tabela abaixo mostra qual parte carrega quando, o que cada parte faz durante a configuração, e quando o agente deve escrever de volta nela. Três partes carregam todas as vezes. O resto carrega quando a tarefa as toca.

Os arquivos

Arquivo	Invocar	Configuração inicial	Gatilho de leitura	Gatilho de atualização
design-principles	Sempre	Nunca configura. Lido como está durante a configuração; nada nele é perguntado ou alterado.	Toda vez que esta skill carrega, antes da primeira decisão de design ou código.	Nunca pelo agente. Edite apenas quando o usuário pedir explicitamente para mudar um princípio. Um dislike vai para design-dont-dos, não aqui.
design-dont-dos	Sempre	Executa sempre que a configuração é executada. Cada direção, paleta, fonte e componente proposto durante a configuração é verificado contra cada linha antes de o usuário ver. Qualquer site de referência ou característica que o usuário não gostar em suas respostas de configuração se torna uma linha de usuário imediatamente. Em um site existente, liste as linhas que ele já quebra.	Toda vez que esta skill carrega, e novamente antes de qualquer coisa visível no site ser escrita ou alterada.	Toda vez que o usuário diz que não gosta de algo no site (uma cor, forma, layout, efeito, palavra, fonte, movimento, ou um site de referência). Adicione uma linha no final na mesma rodada, antes de continuar o trabalho. Cada linha adicionada é uma linha de usuário.
users-design-system	Sempre	Se não houver um sistema de design verdadeiro, configure-o primeiro. Sistema de design verdadeiro significa: a linha Direção não está confirmada, ou as tabelas de cor e tipo não têm linhas confirmadas. Então, antes de qualquer trabalho de design, faça as perguntas de configuração do initial-setup. O usuário também pode iniciar a configuração a qualquer momento ("configure o sistema de design", "recomece o visual"). Se o usuário responder "você decide" ou "configure para mim", execute o caminho de pesquisa. As respostas do usuário tornam-se confirmadas, a pesquisa torna-se proposta, os valores lidos do código existente tornam-se extraídos. Se um sistema de design verdadeiro existir, não pergunte novamente: pergunte apenas sobre as linhas que a tarefa atual precisa e que ainda estão vazias.	Toda vez que esta skill carrega. Seus valores confirmados superam todos os padrões nos outros arquivos.	Toda vez que o usuário adiciona ou muda algo em seu sistema de design (uma cor, fonte, tamanho, passo de espaçamento, raio, sombra, token de movimento, regra de componente, logotipo ou monograma, regra de imagem, regra de voz). Atualize a linha na mesma rodada e registre a mudança. Também quando a configuração extrai ou pesquisa tokens.
initial-setup	Quando: um novo site ou repositório, a primeira execução em um site, início de reformulação, ou users-design-system não tem direção confirmada.	Executa a configuração quando qualquer sinal dispara: (1) users-design-system não tem sistema de design verdadeiro, (2) um novo site ou repositório, (3) o usuário pede para configurar ou refazer o sistema de design, (4) uma reformulação começa. Faz as rodadas de perguntas de uma vez, na primeira resposta, antes de qualquer trabalho de design. Se o usuário disser "você decide", "resolva" ou "configure para mim", executa o caminho de pesquisa. Pula quando um sistema de design verdadeiro existe e o usuário não pediu.	No início da tarefa, antes de qualquer página ou componente ser escrito.	Quando o usuário muda como um site deve começar (as perguntas, a stack, as ferramentas), ou quando um passo da configuração se prova errado na prática.
design-directions	Quando: a configuração pergunta pelo visual geral, o caminho de pesquisa é executado, ou o usuário pede para mudar o visual do site.	Executa quando a configuração faz a pergunta de direção ou executa o caminho de pesquisa. A primeira pergunta de configuração oferece as 3 direções que melhor se encaixam na pessoa, mais "Pesquise para mim". O caminho de pesquisa começa a partir deste catálogo, depois procura por direções de nicho além dele.	Antes de fazer a pergunta de direção, e antes de qualquer pesquisa sobre direções.	Quando a pesquisa encontra uma direção não no catálogo, adicione-a. Quando o usuário escolhe ou rejeita uma direção, registre-a. A característica definidora de uma direção rejeitada também vai para design-dont-dos.
hero-design	Quando: a tarefa constrói, reformula ou revisa a página inicial ou sua primeira tela.	Executa quando a configuração pergunta a Q13 (apenas se a pessoa não tem uma imagem de trabalho ou foto). A resposta define a fonte visual do herói no users-design-system.	Na etapa de planejamento da tela, antes de o herói ser construído, e na revisão.	Quando o usuário aprova um herói, registre-o e escreva-o no users-design-system. Um herói de que o usuário não gosta vai para design-dont-dos. O prompt de um herói gerado vai para seu log.
visual-modules	Quando: a tarefa planeja uma página ou seção, um site parece sem graça, ou o usuário pede "mais vida".	Executa com o caminho de pesquisa: cada candidato nomeia 2 a 4 módulos.	Na etapa de planejamento da tela, antes de qualquer seção ser construída, e na revisão.	Quando o usuário gosta de um módulo, registre-o e adicione-o ao users-design-system. Um módulo de que o usuário não gosta vai para design-dont-dos. Um módulo encontrado na pesquisa vai para seu catálogo.
motion-design	Quando: a tarefa toca em animação, transições, estados de hover ou pressionamento, efeitos de scroll, carregadores, entradas de página, ou qualquer coisa que se move.	Executa quando a configuração faz a pergunta de movimento. A resposta define o dial de movimento no users-design-system. Não perguntado novamente uma vez que o dial esteja confirmado.	Antes de qualquer código de movimento ser escrito ou revisado.	Quando o usuário aprova um padrão de movimento ou muda um valor de movimento: registre-o em sua tabela de decisões. Um movimento de que o usuário não gosta vai para design-dont-dos.
copy-writing	Quando: a tarefa escreve, reescreve ou revisa qualquer texto visível no site (a introdução, bio, descrições de projetos, cabeçalhos, links, texto alternativo, meta tags).	Executa quando a configuração faz a pergunta de voz. A resposta define a voz no users-design-system. Não perguntado novamente uma vez que a voz esteja confirmada.	Antes da primeira palavra de texto ser escrita, e novamente antes da entrega.	Quando o usuário declara uma regra de texto que se aplica além de uma string: adicione-a à sua tabela de regras de texto do usuário. Uma frase ou tom de que o usuário não gosta também vai para design-dont-dos. Uma regra de voz vai para users-design-system.
review-gate	Quando: antes de entregar qualquer página, seção ou componente, e quando o usuário pede para revisar ou auditar seu site.	Nunca configura. Não usado durante a configuração.	Após a construção, antes do relatório para o usuário.	Quando o usuário encontra um problema após a entrega que o gate perdeu: adicione uma verificação à sua tabela de verificações do usuário e adicione o problema a design-dont-dos.

O que gosto significa aqui

Gosto não é um estilo. É um conjunto de decisões tomadas de propósito, para esta pessoa, onde um modelo, de outra forma, tomaria o padrão.

• Específico supera genérico. Cada site pessoal que um modelo escreve deriva para a versão que serviria a qualquer um: "Olá, sou [Nome] 👋", "um desenvolvedor apaixonado que adora criar experiências digitais", barras de habilidade, uma linha do tempo, três cartões de projeto com botões do GitHub, um brilho roxo. Cada um desses é uma decisão que ninguém tomou. O específico tem que vir da pessoa: seu trabalho, suas palavras, suas fotografias, seu sistema de design. Nunca de uma regra de estilo, e nunca inventado.
• O trabalho é o herói. Um visitante vem para ver o que esta pessoa fez, escreveu ou encontrou. Coloque o melhor disso na primeira tela ou a um scroll de distância. Decoração (orbs, partículas, blobs 3D, terminais falsos, widgets de demonstração de conceito) é o que preenche uma página quando o trabalho está faltando.
• Uma pessoa, uma voz. Um site pessoal soa como alguém, não como um template de recrutador. Frases curtas, simples e específicas na voz que a pessoa escolheu. Sem autoelogio: o trabalho elogia.
• Cure, não arquive. Três a seis peças fortes vencem trinta miniaturas. A melhor lidera e ganha mais espaço. O resto está a um link de distância.
• Moderação é o luxo. Uma paleta. Uma escala de raio. Um estilo de link. Um tema. Espaço usado como material. Um site com menos decisões melhores é lido como mais pensado.
• Vivo, não sem graça. Um site de texto e cinzas é tão genérico quanto um site de brilho. Dê-lhe cor: duas cores combinadas, e um destaque que as faça cantar no cabeçalho e no herói apenas. Dê-lhe um herói projetado e 2 a 4 módulos visuais: o trabalho da pessoa mostrado com ofício, e forma da paleta que não reivindica nada. Nunca uma seção falsa para preencher o espaço.
• Hierarquia que você vê ao semicerrar os olhos. Embace os olhos no screenshot. Uma coisa lidera cada tela: o nome, o trabalho ou as palavras.
• Tipo carrega a pessoa. Escolha a face para esta pessoa, defina-a com tracking de exibição apertado, uma medida de corpo legível (cerca de 65 caracteres) e passos de peso reais. Para um escritor, o texto do corpo é o design.
• Ritmo, não uniformidade. Deixe um projeto correr longo e outro ser duas linhas. Cartões idênticos em uma grade é a aparência de um tema.
• Movimento responde, não performa. A introdução chega uma vez, um momento projetado ganha seu lugar, e cada link responde ao ponteiro. Nada se digita sozinho, gira ou fade in no scroll porque pode.
• Pequeno e rápido é uma característica. Um site pessoal carrega num piscar de olhos, lê-se bem no telefone, funciona sem JavaScript e ainda funciona em cinco anos.
• A pessoa escolhe o visual, não o agente. Um fotógrafo, um poeta, um engenheiro backend e um ilustrador merecem cada uma resposta diferente. O mesmo pedido não deve produzir o mesmo site duas vezes.

As regras da casa

Estas vencem tudo nos assets, exceto as próprias palavras do usuário e o sistema de design confirmado.

1. Apenas sites pessoais. Uma pessoa e seu trabalho. Qualquer outra coisa está fora do escopo.
2. Configure antes de projetar. Se não houver sistema de design verdadeiro (a linha Direção em users-design-system não está confirmada, ou cor e tipo não têm linhas confirmadas), execute initial-setup primeiro e faça as rodadas de perguntas na primeira resposta. O usuário também pode iniciar a configuração a qualquer momento, ou dizer "você decide" para o agente pesquisar e propor o sistema. Nunca comece um site com gosto presumido.
3. Nunca brilho, nunca pílula-com-brilho, nunca roxo de IA. O usuário baniu estes por nome. Sem brilho externo, neon, orbe brilhante, borda brilhante, ou gradiente roxo e violeta, em qualquer superfície, jamais, a menos que o sistema de design do usuário o confirme.
4. O livro razão é lei. Antes de escrever algo visível, verifique-o contra design-dont-dos. Uma linha de usuário nunca é quebrada.
5. Ouça e anote. Quando o usuário disser que não gosta de algo, adicione a linha do livro razão na mesma rodada, antes de corrigi-lo. Quando o usuário nomear uma cor, fonte ou token, atualize users-design-system na mesma rodada. A skill nunca deve cometer o mesmo erro duas vezes para a mesma pessoa.
6. Tokens, não valores. Toda cor, tamanho, raio, sombra e duração vêm do sistema de design, através de um bloco de variáveis CSS ou tema. Sem hex cru em um componente.
7. Mostre o trabalho real. Imagens reais de projetos, escrita real, fotografias reais da pessoa se ela quiser uma. Nunca uma UI de projeto falsa feita de caixas cinzas, nunca imagens de stock ou IA passadas como delas. Uma imagem com licença aberta ou gerada é permitida apenas como atmosfera do herói, após o usuário concordar com uma gerada, e nunca mostra a pessoa ou seu trabalho.
8. Não invente nada. Sem testemunhos, clientes, empregadores, prêmios, números ou história de vida inventados. Qualquer coisa assumida é marcada no código e listada no relatório.
9. A primeira tela diz quem e o que a 1440x900 e a 390x844: o nome, o que fazem em uma linha e o caminho para o trabalho ou para contato.
10. Acessível por padrão. Contraste 4.5:1, um anel de foco visível, texto alternativo em cada peça de trabalho, alvos de toque de 44px, movimento reduzido respeitado. Nunca trocado por aparência.
11. Revise antes de entregar. Execute review-gate. Relate o que falhou ou não foi verificado primeiro.

Os três dials

Após a configuração, três dials guiam cada decisão de layout, movimento e densidade. Seus valores vivem no sistema de design do usuário (a configuração os define; o usuário pode mudá-los em uma frase: "deixe mais calmo", "mais movimento", "mais denso").

Dial	1 a 3	4 a 6	7 a 10
Variância (simetria a assimetria)	Centralizado, simétrico, uma coluna de texto. Escritores, acadêmicos, sites de currículo.	Leitura alinhada à esquerda, uma introdução dividida, tamanhos de imagem mistos, layouts de seção variados.	Grades assimétricas, grandes zonas vazias, tipo definido como imagem, quebras editoriais. Coluna única abaixo de 768px em qualquer nível.
Movimento (parado a cinematográfico)	Apenas estados de hover e pressionamento.	Padrão. Mais a introdução de entrada e um momento projetado.	Apenas quando o próprio trabalho da pessoa é interativo ou em movimento (codificação criativa, moti...

... (truncado)