Crea una tienda de iluminación interactiva con IA (Supabase + Hostinger)

Claude Desktop

Claude Code se ejecuta dentro y personaliza tu tienda. Necesita un plan de pago de Claude.

Descarga Claude Desktop

https://claude.ai/download

Cuenta de GitHub

Gratis. Aquí vive tu propia copia de LUMIÈRE, y Hostinger la despliega desde aquí.

Crear cuenta de GitHub

https://github.com/signup

Hosting de Hostinger

Tu tienda en vivo se ejecuta aquí. Eliges un plan en el Paso 2.

No necesitas Node.js, un editor de código ni una terminal. Hostinger compila y ejecuta tu tienda, y Claude se encarga de la edición.

Explora y copia LUMIÈRE

Prueba primero la tienda terminada: desliza el cursor por el riel de latón para encender las lámparas colgantes, arrástralas y haz clic en una para abrir su regulador de intensidad. La demo no tiene panel admin ni checkout.

Abre la demo en vivo de LUMIÈRE

La tienda terminada, funcionando en tu navegador.

https://lumiere-lighting-store.vercel.app/

Abrir LUMIÈRE en GitHub

https://github.com/salhiworks/lumiere-lighting-store

Haz clic en Use this template y luego en Create a new repository Ponle nombre y elige Public o Private Haz clic en Create repository

Confirma que es tu propia copia

La dirección del repositorio empieza por github.com/ y tu propio nombre de usuario

Debajo del nombre, GitHub indica que se generó a partir de salhiworks/lumiere-lighting-store

A partir de ahora solo usas tu propio repositorio. Hostinger lo despliega en el Paso 2 y Claude Desktop lo edita en el Paso 3. El starter original nunca se modifica.

Consigue hosting para Node.js

Primero publica, después personaliza: en unos minutos tu tienda es un sitio web real, y cada cambio posterior se verá en él.

Elige un plan de Hostinger

Usa el plan Unlimited o un plan Cloud: LUMIÈRE se despliega como una Node.js Web App, no como un sitio web estático.

Importa tu repositorio

Hostinger Websites Create site Web App

Elige un dominio temporal para empezar: conectas el tuyo en el paso 5 Selecciona Import Git Repository Autoriza GitHub y selecciona tu propia copia de LUMIÈRE, la que creaste en el Paso 1, no el starter original

Configura y despliega

Mantén la configuración de Next.js que detecta Hostinger: compila e inicia la tienda por sí mismo Elige Node.js 22 Asegúrate de que el script de build sea build, nunca build:demo, que genera la demo bloqueada

Antes de desplegar, añade la dirección de tu sitio como variable de entorno: la dirección temporal que acabas de elegir. Todavía no necesitas tu dominio definitivo — el Paso 5 lo cambia y vuelve a desplegar.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Tu dirección temporal, que empieza por https://

Eso es todo lo que necesita la tienda. Supabase y Stripe son opcionales, así que déjalos para más tarde.

Haz clic en Deploy y espera a que termine el build Abre tu dirección temporal

Mira tu tienda en vivo

Tu dirección temporal abre tu tienda LUMIÈRE

Al deslizar el cursor por el riel se encienden las lámparas, y todas las fotos cargan

Se abren la tienda y una página de producto

Tu tienda ya está en vivo. A partir de ahora, cada cambio que se suba a la rama main de tu repositorio lo recompila y publica Hostinger automáticamente.

Abre tu proyecto en Claude Desktop

Claude Desktop Code Local

Inicia una sesión Local en una carpeta como Documentos, añade abajo la dirección de tu repositorio y envía:

Clona tu copia

Descarga tu propio repositorio de LUMIÈRE en una nueva subcarpeta y comprueba que Claude pueda actualizarlo.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

La dirección de tu repositorio

https://github.com/your-name/my-lighting-store

Abre tu carpeta de LUMIÈRE

Inicia una nueva sesión Local Abre la carpeta que Claude acaba de crear: la que contiene README.md Si Claude Desktop lo pide, confía en la carpeta

Claude modifica esta copia de tu tienda y envía los cambios a tu propio repositorio de GitHub. Después, Hostinger actualiza tu sitio web en vivo.

Describe tu tienda a Claude

Rellena lo que sepas; deja el resto en blanco y Claude mantiene la versión de LUMIÈRE. Luego envíalo en tu sesión de LUMIÈRE:

Personaliza mi tienda de iluminación

Cambia el nombre, los productos, los textos y el estilo, y mantiene las animaciones de las lámparas y los pares de fotos exactamente como están.

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server and don't push anything yet: I'll ask you to publish when I'm ready.

Nombre de la tienda

Atelier Nord

¿Qué hace diferente a tu estudio de iluminación?

Lámparas colgantes de cerámica y latón en pequeñas series, hechas a mano en Lisboa y enviadas a toda Europa.

Identidad visual

Tus lámparas, una por línea: nombre, acabado, precio

Cúpula de cerámica, Arena, $240 Cono de latón, Cepillado, $310

Fotos de las lámparas

Lee el plan antes de aprobarlo. Pide a Claude más cambios en la misma sesión hasta que sientas la tienda como tuya.

Usa tus propias fotos de lámparas

Reemplaza las fotos de demostración antes de vender

Las 16 fotos de lámparas de demostración vienen de la demo del componente original, y sus derechos no están verificados. Para una tienda real, usa fotos que sean tuyas o de las que tengas licencia.

Cada lámpara necesita dos fotos: una apagada y otra encendida. El riel enciende una lámpara con un fundido cruzado entre ambas, así que deben coincidir exactamente:

Misma cámara, posición y escala: solo cambia la luz

Fondo transparente, sin sombra integrada

El cable sale del borde superior, centrado

Vertical, con el mismo lienzo para todas las fotos: la demo usa 557 × 900 px

Sin Supabase, coloca cada par en esta carpeta de tu proyecto, con el nombre del producto (por ejemplo dome-enamel-off.webp y dome-enamel-on.webp) y pídele a Claude que los use y publique. Con Supabase, subes los pares desde el admin, que además los comprueba por ti.

public/lamps/

Publica tus cambios

Claude envía tu tienda personalizada a tu propio repositorio de GitHub, y Hostinger recompila tu sitio web en vivo a partir de él. Cuando estés conforme con los cambios, envía:

Publicar mis cambios

Revisa la tienda, luego hace commit de tus cambios y los sube a la rama main de tu repositorio.

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

Mira tus cambios en vivo

Espera unos minutos a que Hostinger recompile tu tienda Recarga tu dirección en vivo Desliza el cursor por el riel: cada lámpara se enciende y su cable llega al riel Haz clic en una lámpara y mueve su regulador: solo cambia la luz Abre la tienda y una página de producto, y añade una lámpara al carrito

¿No cambió nada tras unos minutos? Abre Settings & Redeploy en tu Web App y vuelve a desplegar. ¿Algo se ve mal? Descríbeselo a Claude en la misma sesión, pídele que lo arregle sin tocar el riel de lámparas y vuelve a publicar.

¿Quieres previsualizar en tu ordenador? (Opcional)

Nunca es obligatorio. Si quieres ver los cambios antes de publicarlos, pídele a Claude en tu sesión: instala las dependencias, inicia el servidor de desarrollo con npm run dev y dame la dirección local. Necesita Node.js 22 o superior, y Claude te avisa si falta. Tu tienda en vivo nunca depende de esto.

Crear un proyecto en Supabase

Tu tienda en vivo ya funciona sin Supabase: pasa al Paso 5 si solo necesitas eso. Conéctalo para gestionar productos, fotos, stock y pedidos desde tu propio admin en /admin.

Crear cuenta de Supabase

https://supabase.link/r4gdwhi

Haz clic en New project: cualquier región y el plan Free sirven Guarda la contraseña de la base de datos en un lugar seguro Cuando el proyecto esté listo, copia su Project ID

Supabase Project Settings General

Deja que Claude acceda a tu proyecto

Así Claude puede configurar tu base de datos por ti. En tu sesión de LUMIÈRE en Claude Desktop:

Abre Customize en la barra lateral, luego Connectors, y añade Supabase — o haz clic en + junto al cuadro del prompt y selecciona Add connectors Haz clic en Connect y aprueba el acceso en tu navegador, eligiendo la organización que contiene tu proyecto Inicia una nueva sesión Local en la misma carpeta, para que Claude detecte la conexión

Inicias sesión en Supabase desde tu navegador: ninguna clave ni contraseña va en un prompt. La conexión puede ver todos los proyectos de la organización que apruebes, así que el siguiente prompt limita a Claude a tu proyecto LUMIÈRE.

¿No encuentras el conector de Supabase o prefieres no usarlo? Omite el siguiente prompt y usa la configuración manual del final del Paso 4: los mismos tres archivos SQL, sin conector.

Pide a Claude que configure la base de datos

Configura LUMIÈRE en Supabase

Claude aplica las migraciones y los productos del starter, revisa la seguridad y el almacenamiento, y luego te da los dos valores públicos para Hostinger.

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

Tu Project ID de Supabase

abcdefghijklmnopqrst

Claude pregunta antes de cada acción: léela y luego permítela. Se detiene cuando te toca a ti.

Crea tu cuenta de administrador

Supabase Authentication Users

Haz clic en Add user y luego en Create new user Introduce tu email y una contraseña segura Deja marcada la opción Auto Confirm User y crea el usuario Dile a Claude tu email de administrador, nunca tu contraseña

Supabase Authentication Sign In / Providers

Desactiva Allow new users to sign up y guarda: la tienda no tiene cuentas de clientes

¿Sin conexión con Supabase? Configúralo a mano

En tu proyecto de Supabase, abre SQL Editor. Ejecuta estos tres archivos de tu carpeta de LUMIÈRE, en este orden. Para cada uno, ábrelo, copia todo, pégalo en una nueva consulta y haz clic en Run. Puedes volver a ejecutar cualquiera sin riesgo.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Copia tu Project URL y tu Publishable key desde Connect a Hostinger, como se muestra en el siguiente paso. Después de crear tu usuario admin arriba, añade tu email abajo y ejecuta esto en el SQL Editor:

Hazme administrador

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

Tu email de administrador

you@example.com

Añade las variables de Supabase en Hostinger

Tu tienda en vivo lee Supabase mediante dos valores públicos. En el panel de tu Web App, abre Environment Variables y añade:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key de Supabase

Claude te dio ambos valores. También están en Connect.

Abrir Connect

https://supabase.com/dashboard/project/_?showConnect=true

Solo valores públicos

Nunca añadas aquí la Secret key ni la service_role key de Supabase. Todo lo que empieza por NEXT_PUBLIC_ es visible en el navegador.

Guarda las variables: Hostinger recompila tu tienda con ellas ¿No se recompiló? Vuelve a desplegar desde Settings & Redeploy Abre /admin en tu dirección en vivo e inicia sesión con tu email de administrador

En el panel admin añades y editas productos, subes pares de fotos OFF/ON y gestionas el stock y los pedidos. Cada vez que guardas se actualizan el riel, la tienda y las páginas de producto.

Conecta tu dominio

Hostinger Your Web App Connect domain

Introduce tu dominio y sigue los pasos de conexión ¿Tu dominio está registrado en otro sitio? Añade en tu registrador los registros DNS que muestra Hostinger Conserva los registros de email que ya tengas Espera a que el dominio aparezca como conectado y el SSL esté activo

Los cambios de DNS pueden tardar unas horas en llegar a todos: hasta 24 horas.

Conecta un dominio personalizado a tu sitio web o Web App

El recorrido completo, incluidos los dominios registrados en otro sitio.

/video/connect-a-custom-domain-to-your-website-or-web-app

Cambia a tu dominio y vuelve a desplegar

Tu tienda genera sus enlaces, su sitemap y el inicio de sesión seguro del panel admin a partir de esta única dirección. En el panel de tu Web App, abre Environment Variables y cámbiala por tu dominio:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Tu dominio, que empieza por https://

Guarda la variable Vuelve a desplegar desde Settings & Redeploy para que la nueva dirección quede integrada Espera a que termine el build

Prueba tu tienda en vivo

Abre tu dominio y comprueba:

La dirección empieza por https:// y aparece el candado

Al deslizar el cursor por el riel se encienden las lámparas, y todas las fotos cargan

Se abren la tienda y una página de producto, y una lámpara entra al carrito

Con Supabase: puedes iniciar sesión en /admin

Una dirección inventada, como /shop/no-such-lamp, muestra la página de no encontrado

Tu tienda de iluminación está en vivo en tu propio dominio. Para cambiarla más adelante, edita los productos en el admin o pídele a Claude cambios de código y que los publique: Hostinger recompila tu tienda con cada push a main.