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

> Un desarrollador pegó en un archivo de texto el prompt de diseño de Anthropic y Codex generó con él su web personal en pocas rondas.

- **Tipo:** Caso de uso
- **Tema:** Contenido y redes
- **Herramientas:** Codex
- **Dificultad:** avanzada
- **Origen:** [wilbertliu.com](https://wilbertliu.com/blog/how-i-designed-my-personal-site-using-codex-cli)
- **En el directorio desde:** 3 de octubre de 2026
- **URL:** https://conqueia.com/caso/disenar-una-web-personal-a-partir-de-un-documento-de-diseno

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

## Pruébalo con Codex

```
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

### ¿Hace falta el prompt de Anthropic?

No, es solo un ejemplo de documento de diseño. Vale cualquier archivo con tus reglas de estilo, tipografía, colores y tono.

### ¿Puedo usarlo con Claude o con otro agente?

Sí. Es un archivo de texto, así que te sirve cualquier agente de programación que pueda leerlo y crear archivos.

## Fuentes

- [wilbertliu.com](https://wilbertliu.com/blog/how-i-designed-my-personal-site-using-codex-cli)

---

Fuente: conqueia.com/caso/disenar-una-web-personal-a-partir-de-un-documento-de-diseno