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é un demo de mi sitio web personal, que obtuvo casi 100,000 visitas en toda la red. Muchos amigos me enviaron mensajes privados preguntando por el método de creación.

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

Gracias a todos por su cariño. A continuación, les 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 habilidad de gusto para generar imágenes de referencia de la página web — Generar imágenes de materiales por separado — Usar la habilidad de Frontend App Builder para replicar las páginas web

(A continuación, los pasos detallados)

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

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

Mi documento incluye aproximadamente lo siguiente:

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

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 habilidad de gusto para generar imágenes de referencia de página web de alta calidad

Usa la habilidad imagegen-frontend-web dentro de la habilidad de gusto, 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 habilidad `imagegen-frontend-web` dentro de la habilidad de gusto permite que Codex tenga más sentido estético al generar imágenes, y la pantalla tendrá un aspecto más diseñado.

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 web por separado. Podemos ingresar 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
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 habilidad integrada de Frontend App Builder 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 material previamente determinadas a Codex para la replicación de la página web.

Aquí se usa la habilidad Frontend App Builder del plugin Build Web Apps. Esta trata la imagen de referencia como un borrador de diseño y realiza una restauración de alta fidelidad siguiendo un conjunto de procesos estructurados.

Prompt de referencia para replicar la página web:

El efecto de la replicación es el siguiente: