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

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

Ayer publiqué una 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 aprecio. Voy a explicar en detalle cómo usar Codex para crear un sitio web personal con tu propio estilo en 2 horas.

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

(A continuación, los pasos detallados)

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 detallado.

Mi documento incluye aproximadamente lo siguiente:

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

Pequeño consejo: Puedes usar un plugin de Chrome para que Codex vea tus redes sociales y te ayude a complementar la información

Paso 2: Usar la skill taste para generar imágenes de referencia de alta calidad para la página web

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 efecto de la imagen de referencia resultante 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 mayor sentido del 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 materiales clave para cada página web por separado. Podemos escribir directamente en el cuadro de diálogo:

1Esta es la imagen de referencia de la página web que he generado actualmente. 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
4No empieces a escribir código todavía, primero dame una sugerencia de desglose de materiales.

Luego, usa ImageGen para generar imágenes de 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 incorporada de Codex para replicar la imagen de referencia de la página web en una página web real

Envía las imágenes de referencia y las imágenes de materiales determinadas anteriormente a Codex para la replicación de la página web.

Aquí se utiliza la skill Frontend App Builder del plugin Build Web Apps. 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: