La estructura: capturas de otras webs, sin ningún diseño

Acá me quiero detener, porque este capítulo es la diferencia entre que una web salga bien o salga mal. Con IA o sin IA.

Antes de diseñar nada, tenés que saber qué páginas va a tener tu sitio y qué va adentro de cada una. Eso se llama estructura. No tiene colores ni tipografías ni fotos: es el esqueleto. Si tenés una hoja a mano, dibujalo con lápiz: un cuadrado que diga «home», una flecha a «productos», otra a «detalle del producto», otra a «carrito», otra a «pago». Con eso ya sabés más de tu sitio que la mayoría de la gente que le pide una web a ChatGPT.

En The Mariscal tenemos un libro entero sobre esto, «Cómo se piensa una app»: cómo llegar de una idea a la estructura, dibujar los wireframes, dejar todo preparado para trabajar con la IA. Está en book.themariscal.com, sale diez euros y se lee online con subrayados, como esta guía. Lo menciono porque ahora la skill va a hacer este paso por vos, pero cuanto más entiendas lo que está haciendo, mejor te va a ir con cualquier cosa que hagas después con IA.

Paso 2: una captura por página

La skill te va a pedir referencias de estructura. Lo que vamos a hacer es pasarle capturas de pantalla de otras webs, una por cada página que queramos tener. No le vamos a robar nada a nadie: no le importa el diseño, le importa cómo está organizada la página. Un encabezado, un carrusel, una grilla de productos con filtros a la izquierda, un pie. Eso.

Para la tienda de zapatillas usé la web de Puma, porque tiene una estructura de e-commerce bastante convencional, que es justo lo que quería.

Cómo sacar la captura de una página entera

Las páginas son más largas que la pantalla, y una captura normal corta. Hay un truco de Chrome para capturar toda la página de una vez:

1. Click derecho en la página → Inspeccionar.
2. Con el panel abierto, apretá Cmd + Shift + P en Mac (Ctrl + Shift + P en Windows).
3. Escribí «screenshot» y elegí «Capture full size screenshot».

Te guarda en Descargas una imagen con la página completa, de arriba a abajo. Esa imagen se la arrastrás a ChatGPT y le decís qué página es:

Este es el home.

ChatGPT la analiza, escribe la estructura en un archivo .md en el Obsidian (sin ninguna información de diseño, sólo la organización), y te pregunta si querés agregar más páginas.

Las otras páginas

Repetí lo mismo con cada página de tu sitio. En mi caso:

• Product detail: la página de un producto, con las fotos, los talles, el botón de comprar. Captura completa, y le digo «esta es la página de producto».
• Checkout: el formulario de datos de envío. Para llegar tuve que llenar el formulario de Puma con datos falsos; si no, no te deja pasar.
• Payment: la elección del método de pago. Otra captura completa.
• Category: la lista de productos de una categoría con los filtros. Esta página tiene scroll infinito, así que la captura completa no sirve. Saqué una captura normal de una parte con Cmd + Shift + 4 (en Mac te deja elegir un rectángulo de la pantalla; en Windows, la herramienta de recortes). Podés sacar varias capturas de la misma página y pasarlas juntas si una sola no alcanza.

Cuando no quieras agregar más, escribís «listo».

Si no querés capturar otras webs

Hay otras tres formas, y las tres funcionan igual de bien:

• Un dibujo a lápiz en una hoja, y le sacás una foto.
• Un collage: de una web sacás el encabezado que te gusta, de otra el carrusel, lo pegás en Photoshop o en cualquier app, y le pasás la imagen.
• Un diseño que ya tengas, en Figma, en Photoshop, donde sea.

Y si ya tenés un sitio y lo querés rediseñar, le pasás capturas de tu propio sitio. La skill va a tomar tu estructura actual y le va a poner un diseño nuevo.

Paso 3: el sitemap

Cuando decís «listo», la skill junta todas las páginas que cargaste y arma el sitemap: un archivo en el Obsidian con la lista de páginas y cómo se vinculan entre sí. El home lleva a las categorías, la categoría lleva al producto, el producto al checkout, el checkout al pago. Lo necesita para armar los wireframes y, después, el prototipo navegable.

Te lo muestra y te pide que lo apruebes. Es un buen momento para corregir: si falta una página, si dos deberían ser una, si una no debería estar. En mi caso estaba bien, así que escribí «continuemos».

Paso 3 completado. Ahora viene lo que más me gusta mostrar.