Guía · 0 pasos

Crea tu tienda online con Claude

Un solo prompt para que Claude te construya una tienda online completa: storefront + panel de administración, navegable y lista para presentar. Cámbiale la marca y sirve para cualquier giro.

Una tienda online completa con un solo prompt

Con este prompt, Claude te arma una tienda online navegable de principio a fin: storefront público (home, colecciones, producto, carrito, checkout, cuenta y seguimiento de pedidos) y un panel de administración con dashboard, pedidos, productos, clientes, envíos, cupones y reseñas. Todo con datos de ejemplo en memoria para que el carrito, los favoritos y los cambios del admin se reflejen en vivo. Cámbiale la marca, el giro y la paleta y sirve para joyería, ropa, velas, café — lo que sea.

El prompt (cópialo y pégalo en Claude)

Construye un prototipo completo, navegable e interactivo de una tienda online de [GIRO DEL NEGOCIO] llamada "[NOMBRE DE LA MARCA]". Incluye tanto la tienda pública (storefront) como un panel de administración. Usa datos de ejemplo (mock data) en memoria para simular productos, pedidos, usuarios y envíos. Múltiples pantallas con navegación real entre ellas.

IDENTIDAD DE MARCA (estricta)
- Estética: [describe el sentimiento de la marca: lujo suave / minimalista / juvenil / artesanal / tech, etc.]. Elegante, espacioso, editorial, coherente. Nivel de referencia: [marca de referencia].
- Paleta (basada en el logo): Fondo base [color], color principal de marca [color], acento [color], texto [color]. Mucho aire entre secciones.
- Tipografía: títulos en [serif/sans elegante], texto y navegación en [sans-serif fino], con letter-spacing amplio en menús.
- Detalles premium: sombras suaves difusas, sin bordes duros, esquinas levemente redondeadas, microinteracciones suaves (fade-in al hacer scroll, hover lento con zoom). Mobile-first y totalmente responsive.

A) TIENDA PÚBLICA (STOREFRONT)
1. Barra superior fina con mensaje rotativo (envíos, promesa de marca).
2. Navegación: logo, menú por categorías, íconos de búsqueda, favoritos (con contador), cuenta y carrito (con contador).
3. Home: hero editorial con titular grande, subtítulo y botón principal; grid de colecciones; productos destacados (foto, nombre, precio, agregar y favorito); sección de historia de marca; feed comprable estilo Instagram (al pasar el cursor aparece el producto etiquetado); franja de confianza (envío seguro · pago seguro · garantía); bloque de newsletter con descuento de bienvenida.
4. Página de colección: filtros laterales (categoría, precio, material/atributo, color), ordenamiento, grid con favorito rápido y vista rápida.
5. Página de producto: galería, nombre, precio, selector de variantes, guía de medidas en modal, pestaña de materiales/cuidado, botón principal de "Agregar al carrito", favorito, botón WhatsApp "Pregunta por esta pieza", reseñas con fotos y estrellas, y productos relacionados.
6. Carrito (lateral deslizable + página): cantidad editable, subtotal, cupón de descuento, cálculo de envío según monto, botón "Pagar".
7. Checkout multi-paso: contacto -> dirección (con estado/CP de México y cálculo de envío por zona) -> método de envío (estándar/express) -> pago (tarjeta, PayPal, OXXO, Mercado Pago) -> resumen y confirmación con número de pedido.
8. Favoritos / lista de deseos: piezas guardadas, mover al carrito.
9. Cuenta de usuario: login y registro; panel con mis pedidos, seguimiento de paquete (línea de tiempo: confirmado -> preparando -> enviado -> en camino -> entregado, con guía y paquetería), favoritos, mis datos, y programa de puntos/recompensas.
10. Páginas de contenido: Contacto (con botón flotante de WhatsApp en todo el sitio), Políticas, Envíos y devoluciones.

B) PANEL DE ADMINISTRACIÓN (acceso aparte, layout con sidebar)
- Login de admin independiente.
- Dashboard: ventas del día/mes, número de pedidos, ticket promedio, productos con bajo stock, gráfica de ventas.
- Pedidos: tabla con estado, buscar/filtrar, ver detalle, cambiar estado y asignar guía + paquetería (alimenta el seguimiento del cliente).
- Productos: inventario; crear/editar (nombre, precio, fotos, variantes, stock, atributos).
- Clientes: lista con historial de compras y puntos.
- Envíos: cuotas por zona/estado y umbral de envío gratis.
- Cupones: crear y administrar códigos.
- Reseñas: moderar (aprobar/rechazar).

NOTAS DE IMPLEMENTACIÓN
- Estado en memoria para que carrito, favoritos, sesión y cambios del admin se reflejen en vivo.
- Productos de ejemplo realistas con fotos placeholder elegantes y precios en MXN.
- Que el cambio de estado de un pedido en el admin se refleje en el seguimiento del cliente.
- Diseño consistente, profesional y listo para presentar como demo a inversionistas o clientes.

Rellena los [corchetes] con tu marca, giro y paleta (idealmente colores sacados de tu logo). Entre más específico seas con la estética y la referencia de marca, más profesional sale la demo. Tip: pídele primero el storefront y luego el panel de admin si quieres ir revisando por partes.

¿Quieres tu tienda online de verdad? Si quieres llevar esta demo a una tienda real y funcional, mándanos mensaje y te asesoramos.