Um site pessoal é o melhor projeto para começar com o Codex

Na era da IA, um site pessoal é o melhor currículo.

Ontem, publiquei uma demo do meu site pessoal, que recebeu quase 100 mil visualizações em toda a rede. Muitos amigos enviaram mensagens privadas perguntando sobre o método de criação.

https://x.com/Saccc_c/status/2071508004772475209

Agradeço o carinho de todos. Vou detalhar como usar o Codex para criar um site pessoal com seu próprio estilo em até 2 horas.

Etapas gerais: Organizar documentos de conteúdo do site — Usar a taste skill para gerar imagens de referência de página web — Gerar imagens de materiais separadamente — Usar a Frontend App Builder skill para replicar as páginas web

(As etapas detalhadas vêm a seguir)

Passo 1: Usar o Codex para organizar documentos detalhados de conteúdo do site

Expresse suas informações pessoais e o conteúdo que o site precisa transmitir ao Codex em detalhes, e peça que ele organize um documento estruturado detalhado.

Meu documento inclui aproximadamente o seguinte:

• Informações pessoais e posicionamento de IP do Sac
• Número de páginas, estrutura e estilo
• Direção geral do design e layout

Dica: Você pode usar uma extensão do Chrome para permitir que o Codex veja suas redes sociais e ajude a complementar informações

Passo 2: Usar a taste skill para gerar imagens de referência de página web de alta qualidade

Use a skill imagegen-frontend-web dentro da taste skill, combinada com o documento de conteúdo do site, para gerar imagens de referência detalhadas para cada página.

Endereço do GitHub: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

Este é meu prompt:

O efeito da imagem de referência resultante é o seguinte:

Nota: A skill imagegen-frontend-web da taste skill permite que o Codex tenha mais senso estético ao gerar imagens, e a tela terá um visual mais elaborado.

Passo 3: Analisar e desmontar a estrutura da imagem de referência, e gerar imagens para materiais-chave separadamente

Após obter a imagem de referência completa, os materiais-chave para cada página web precisam ser gerados separadamente. Podemos inserir diretamente no diálogo:

1Esta é a imagem de referência da página web que gerei até agora. Por favor, analise sua estrutura página por página e me ajude a avaliar:
21. Quais partes podem ser implementadas com código
32. Quais elementos visuais principais precisam ter materiais gerados separadamente
4Ainda não comece a escrever código, primeiro me dê uma sugestão de desmontagem de materiais.

Em seguida, use o ImageGen para gerar imagens de materiais-chave, garantindo consistência com os detalhes das imagens de referência.

Por exemplo, o material do avatar no meu site pessoal:

Passo 4: Usar a Frontend App Builder skill integrada do Codex para replicar a imagem de referência da página web em uma página real

Envie as imagens de referência e os materiais previamente definidos para o Codex para replicação da página web.

Aqui é usada a Frontend App Builder skill no plugin Build Web Apps. Ela trata a imagem de referência como um rascunho de design e realiza uma restauração de alta fidelidade seguindo um conjunto de processos estruturados.

Prompt de referência para replicar a página web:

O efeito da replicação é o seguinte: