Crear una web o una app
Desde el diseño de una página hasta una web que funciona, aunque nunca hayas programado.
Las mejores herramientas para esto
Lee estos capítulos
Claude · Capítulo 3.1 · 3 min de lecturaClaudeDel diseño a un sitio web real
Claude · Capítulo 3.5 · 3 min de lecturaClaudeQué es Claude Code
Claude · Capítulo 6.1 · 3 min de lecturaClaudeCanvas: textos y código lado a lado
ChatGPT · Capítulo 1.10 · 3 min de lecturaChatGPTCanvas
Gemini · Capítulo 1.11 · 3 min de lecturaGemini
Prompts listos para copiar
Diseñar una página de inicio para mi servicio
Objetivo. Una página que explique mi servicio y haga que la gente me contacte, con aspecto profesional.
Abrir. Claude Design (plan de pago); tu sistema de diseño si tienes uno.
Una página de inicio para [servicio] de [nombre del negocio], dirigida a [quién]. Primero en ancho de computadora, luego una versión para teléfono. Secciones de arriba abajo: un titular que diga el beneficio principal en menos de 8 palabras; una línea debajo; una zona grande para una imagen; tres razones cortas para elegirnos; un "cómo funciona" sencillo en 3 pasos; la opinión de un cliente; precios o "desde [cantidad]"; un bloque de contacto con [teléfono / correo / formulario]. Estilo: [cálido / limpio / llamativo], colores [de la marca o sugiere tú], botones redondeados. Un botón de llamada a la acción claro, repetido dos veces. Dime qué supusiste para que yo cambie los textos de relleno.
Lo que obtienes · Cuidado
Lo que obtienes. Una página en el lienzo y luego una mesa de trabajo (artboard) para teléfono; Claude enumera lo que supuso.
Cuidado. Ten escritos el titular y las tres razones antes de empezar. Cambia todos los textos de relleno (horario, dirección, opinión) antes de exportar. Si te atascas: Capítulos 3.1, 3.2.
Objetivo. La página de inicio que diseñé se convierte en un sitio web real que puedo poner en internet.
Abrir. Claude Design (para la entrega) y luego Claude Code (Parte 6), plan de pago; una carpeta vacía.
Construye este diseño como un sitio web estático sencillo: una página, HTML y CSS, sin frameworks, que cargue rápido en teléfonos. Conserva exactamente el diseño, los colores y el texto. Cambia los textos de relleno: horario [horario], dirección [dirección], teléfono [teléfono], correo [correo]. Haz que los botones funcionen: Pedir abre [enlace], Menú baja hasta la sección del menú, Visítanos abre un enlace de mapa. Ejecútalo en local y dame la dirección para abrirlo. Después explícame, con palabras sencillas, tres formas de ponerlo en internet y cuánto cuesta cada una.
Lo que obtienes · Cuidado
Lo que obtienes. Una carpeta con el sitio, una dirección de vista previa local y las opciones de alojamiento explicadas.
Cuidado. El alojamiento es un paso aparte con un costo pequeño; decídelo antes de construir. Cambia el diseño y vuelve a entregarlo, en lugar de editar el sitio a mano. Si te atascas: Capítulos 3.5, 6.1.
Objetivo. Mis productos publicados en una tienda en línea, con descripciones, en una tarde.
Abrir. Cowork con el conector de Shopify (plan de pago); una cuenta de tienda; fotos de los productos en una carpeta o adjuntas. *Necesita una herramienta fuera de Claude.*
Vendo [qué] a [quién]. Voz de la marca: [3 palabras]. Estos son mis productos: [nombre, precio, tallas/variantes, 2 datos de cada uno] y las fotos. 1. Escribe para cada uno un título, una descripción de 60 palabras y 3 datos en viñetas, con mi voz. 2. Muéstramelos todos en una tabla para aprobarlos. 3. Cuando los apruebe, crea los productos en la tienda con el conector, en una colección llamada [nombre], como borradores (sin publicar). 4. Dime qué falta antes de poder publicar (envíos, impuestos, políticas).
Lo que obtienes · Cuidado
Lo que obtienes. Una tabla para aprobar, luego los productos en borrador en la tienda y una lista de comprobación para el lanzamiento.
Cuidado. Créalos como borradores; publícalos tú después de revisar los precios. Los datos sobre materiales y tallas deben venir de ti, no inventarse. Si te atascas: Capítulos 1.9, 2.10.