Del diseño a un sitio web real

1En una frase

Un diseño terminado se puede pasar a Claude Code, que lo construye como un sitio web o una app reales, para que la imagen se convierta en la cosa.

2Palabras nuevas

3Para qué te sirve

Este es el camino más corto entre "quiero un sitio web" y tenerlo: lo describes (3.1), haces que se vea bien (3.2), lo pruebas como prototipo (3.4), lo entregas, y Claude Code lo construye. Para una página de inicio sencilla, todo el camino lleva una tarde, y nadie escribió una sola línea de código a mano.

4Pruébalo ahora

(planes de pago; Claude Code configurado como en el capítulo 6.1)

1. Abre la página de inicio terminada del capítulo 3.1. Usa el menú de exportar o de compartir para crear el paquete de entrega para Claude Code.
2. Abre Claude Code (la pestaña Code de la app, o la app de escritorio) en una carpeta vacía.
3. Escribe: Construye este diseño como un sitio web estático. Mantén exactamente la composición y los colores. Reemplaza el horario y la dirección provisionales por: [tus datos].
4. Abre el resultado en un navegador.

5Lo que verás

[Imagen pendiente: el menú de entrega en Design, y el sitio construido abierto en un navegador.] Claude Code lee el paquete, crea los archivos, ejecuta el sitio en tu computadora y te muestra la dirección que tienes que abrir. La página se ve como el diseño, y ahora los botones pueden hacer cosas reales (un formulario de reserva, un enlace a un mapa).

6Cuidado

• Un sitio web necesita un hogar en internet (alojamiento, o hosting). Claude Code puede configurarlo contigo, pero es un paso extra y a veces tiene un pequeño costo.
• Mantén el diseño y el sitio sincronizados: cambia el diseño y vuelve a entregarlo, en lugar de editar los dos a mano.

7Ve más allá