Un sitio web personal es el mejor proyecto para comenzar con Codex

En la era de la IA, un sitio web personal es el mejor currículum.

Ayer publiqué un demo de mi sitio web personal, que recibió casi 100,000 visitas en toda la red. Muchos amigos me enviaron mensajes privados preguntando sobre el método de creación.

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

Gracias a todos por su cariño. A continuación, explicaré en detalle cómo usar Codex para crear un sitio web personal con tu propio estilo en menos de 2 horas.

Pasos generales: Organizar los documentos de contenido del sitio web — Usar taste skill para generar imágenes de referencia — Generar imágenes de materiales por separado — Usar Frontend App Builder skill para replicar la página web

(Los pasos detallados continúan)

Paso 1: Usar Codex para organizar documentos detallados de contenido del sitio web

Expresa tu información personal y el contenido que el sitio web debe transmitir a Codex en detalle, y deja que organice un documento estructurado completo.

Mi documento incluye aproximadamente lo siguiente:

• Información personal de Sac y el posicionamiento de su IP
• Número de páginas, estructura y estilo
• Dirección de diseño general y distribución

Consejo: Puedes usar un plugin de Chrome para que Codex vea tus redes sociales y te ayude a complementar información.

Paso 2: Usar taste skill para generar imágenes de referencia de alta calidad

Usa la skill imagegen-frontend-web dentro de taste skill, combinada con el documento de contenido del sitio web, para generar imágenes de referencia detalladas para cada página.

Dirección de GitHub: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

Este es mi prompt:

El resultado de la imagen de referencia es el siguiente:

Nota: La skill imagegen-frontend-web dentro de taste skill permite que Codex tenga más sentido estético al generar imágenes, y la pantalla tendrá un toque más de diseño.

Paso 3: Analizar y desglosar la estructura de la imagen de referencia, y generar imágenes para los materiales clave por separado

Después de obtener la imagen de referencia completa, es necesario generar los materiales clave de cada página por separado. Podemos escribir directamente en el cuadro de diálogo:

1Esta es la imagen de referencia de la página web que generé hasta ahora. Por favor, analiza su estructura página por página y ayúdame a determinar:
21. Qué partes se pueden implementar con código
32. Qué elementos visuales clave necesitan generar materiales por separado
4Aún no empieces a escribir código, primero dame una sugerencia de desglose de materiales.

Luego, usa ImageGen para generar las imágenes de los materiales clave, asegurando la coherencia con los detalles de las imágenes de referencia.

Por ejemplo, el material del avatar en mi sitio web personal:

Paso 4: Usar la skill Frontend App Builder integrada de Codex para replicar la imagen de referencia en una página web real

Envía las imágenes de referencia y las imágenes de materiales determinadas previamente a Codex para que replique la página web.

Aquí se utiliza la skill Frontend App Builder del plugin Build Web Apps. Esta skill trata la imagen de referencia como un borrador de diseño y realiza una restauración de alta fidelidad siguiendo un proceso estructurado.

Prompt de referencia para replicar la página web:

El efecto de la replicación es el siguiente: