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 demonstração do meu site pessoal, que recebeu quase 100.000 visualizações em toda a rede. Muitos amigos enviaram mensagens privadas perguntando sobre o método de produção.

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

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

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

(As etapas detalhadas vêm a seguir)

Etapa 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 para ele organizar 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 rápida: Você pode usar um plugin do Chrome para permitir que o Codex veja suas redes sociais e o ajude a complementar as informações

Etapa 2: Usar a taste skill para gerar imagens de referência de página da 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 é o meu prompt:

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

Observação: A skill imagegen-frontend-web na taste skill permite que o Codex tenha mais senso estético ao gerar imagens, e a tela terá um visual com mais cara de design.

Etapa 3: Analisar e desmontar a estrutura da imagem de referência e gerar imagens para os materiais principais separadamente

Após obter a imagem de referência completa, os materiais principais de cada página da web precisam ser gerados separadamente. Podemos inserir diretamente na caixa de diálogo:

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

Em seguida, use o ImageGen para gerar imagens de material importantes, garantindo consistência com os detalhes nas imagens de referência.

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

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

Envie as imagens de referência e as imagens de material determinadas anteriormente para o Codex realizar a replicação da página web.

A habilidade Frontend App Builder no plugin Build Web Apps é usada aqui. Ela trata a imagem de referência como um protótipo de design e realiza uma reproduçã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: