Diseñar una web personal a partir de un documento de diseño

A quién le sirve. Personas con una web personal o de proyecto que quieren un diseño cuidado sin contratar a un diseñador y no temen usar un agente de programación.

Qué hicieron

El autor copió el largo prompt de diseño del plugin frontend-design de Anthropic para Claude Code y lo pegó en un archivo markdown local de su proyecto. En una sesión de Codex CLI, primero hizo que Codex leyera ese archivo y lo tratara como la especificación de diseño de su web personal. Luego Codex generó la interfaz, y él la fue guiando en unas cuantas rondas de retoques.

Cómo salió

Codex casi acertó el diseño de un solo intento, y los retoques posteriores fueron rápidos y precisos. Publicó una web con la que está contento, que sustituye a una versión anterior muy básica. La fuente no da métricas.

Conviene saber

La especificación es solo un archivo markdown, así que puedes reutilizarla en otros proyectos y cambiar los prompts de diseño. Cuenta con algunas rondas de retoques y mantén tu propio criterio en el proceso.

Qué necesitas

• Codex, en la versión que uses, con un plan de pago, o un agente de programación parecido.
• Una carpeta de proyecto para la web.
• El documento de diseño: el prompt largo del plugin frontend-design de Anthropic, guardado como archivo de texto en formato markdown.
• El contenido de tu web: quién eres, qué haces, enlaces y fotos.
• Un servicio donde publicarla.

Cómo hacerlo tú, paso a paso

1. Crea una carpeta para el proyecto y guarda dentro el documento de diseño como archivo markdown, por ejemplo design-spec.md.
2. Abre Codex en esa carpeta y pega el prompt de esta ficha con tu nombre o proyecto y la ruta del archivo.
3. Pídele que lea el documento de diseño y lo trate como la especificación de la web.
4. Deja que construya una primera versión y que te explique cómo previsualizarla.
5. Mírala en el navegador y pide retoques en rondas cortas: textos, colores, espaciado y orden.
6. Cuando una versión te guste, pide que liste las reglas del documento que convendría actualizar para reutilizarlo en otros proyectos.
7. Publica la web en tu servicio de alojamiento.

Lee la especificación de diseño que está en [ruta del archivo markdown] y úsala para diseñar [una web personal o una página de aterrizaje] para [mi nombre o proyecto] en esta carpeta. Construye una primera versión, explícame cómo previsualizarla y espera mis comentarios antes de cambiar nada importante. Cuando yo apruebe una versión, lista las reglas de la especificación que habría que actualizar para poder reutilizarla en otros proyectos.

Consejos

• Cuenta con algunas rondas de retoques y mantén tu criterio. En el caso, Codex casi acertó a la primera, pero el gusto final es tuyo.
• Guarda el archivo de diseño y reutilízalo en otros proyectos, cambiando las reglas que haga falta.
• Revisa que los textos y las imágenes sean tuyos y no de relleno.

Preguntas frecuentes

Fuentes

• wilbertliu.com ↗

En el directorio desde el 3 de octubre de 2026.