Crea una tienda de moda de lujo con IA y panel admin

Claude Desktop

Usa Claude Code en la app de escritorio para configurar y personalizar tu tienda.

Descarga Claude Desktop

https://claude.ai/download

Cuenta de GitHub

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

Crear cuenta de GitHub

https://github.com/signup

Node.js

Descarga la versión LTS actual. Ejecuta la tienda en tu computadora.

Descargar Node.js

https://nodejs.org/en/download

Cuenta de Supabase

El plan gratuito es suficiente. Guarda tus productos, fotos, pedidos y el inicio de sesión del propietario.

Crear cuenta de Supabase

https://supabase.link/r4gdwhi

Cuenta de Cloudflare

Gratis. Su verificación Turnstile mantiene a los bots fuera de tu checkout.

Crear cuenta de Cloudflare

https://dash.cloudflare.com/sign-up

Hosting de Hostinger

STILLFORM es gratis; tu tienda en vivo funciona aquí.

Elige un plan de Hostinger

Usa el plan Unlimited o un plan Cloud: STILLFORM se despliega como una Node.js Web App.

Crea tu propia copia

Prueba primero la tienda terminada en la demo en vivo: pasa el cursor por el perchero de ropa, arrástralo y abre una prenda. Allí el checkout y Studio están desactivados.

Abrir STILLFORM en GitHub

https://github.com/salhiworks/stillform-fashion-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 y copia su dirección

Tráelo a tu computadora

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 STILLFORM en una nueva subcarpeta.

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, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

La dirección de tu nuevo repositorio

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

Abre tu carpeta de STILLFORM

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

Inicia la tienda en local

En tu sesión de STILLFORM, envía:

Prepara e inicia STILLFORM

Instala el proyecto e inicia la tienda en tu computadora, en modo demo.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Abre la dirección que te da Claude, normalmente http://localhost:5173. Sin Supabase, la tienda funciona en modo demo con su colección integrada: el perchero, las páginas de producto y la bolsa funcionan, y el checkout queda desactivado hasta el paso 3.

Crear un proyecto en Supabase

Abrir el panel de Supabase

https://supabase.com/dashboard

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

Supabase Project Settings General

El Project ID es el único dato del proyecto que Claude necesita. Claude obtiene tu Project URL y tu Publishable key por sí mismo a través de la Supabase CLI.

Inicia sesión en la Supabase CLI

Esto abre tu navegador, así que lo ejecutas tú, una sola vez:

Haz clic en el botón Terminal en la parte superior de tu sesión de STILLFORM Ejecuta el comando de abajo Aprueba el inicio de sesión en la ventana del navegador que se abre

npx supabase login

Crea un widget de Turnstile

Abrir el panel de Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Ponle al widget el nombre de tu tienda En hostnames, añade localhost Añade también el dominio de tu tienda si ya lo sabes; si no, lo añades en el paso 5 Elige el modo Managed y crea el widget Deja la página abierta: el paso 3 necesita su clave del sitio y su clave secreta

Pide a Claude que conecte tu tienda

En tu sesión de STILLFORM, añade abajo tu Project ID y envía:

Conecta STILLFORM a Supabase

Claude vincula tu proyecto, configura la base de datos y la colección inicial, y despliega la función de checkout.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Tu Project ID de Supabase

abcdefghijklmnopqrst

Claude pregunta antes de cada comando: haz clic en Allow. Se detiene cuando te toca a ti.

Introduce tus secretos en la Terminal

Cuando Claude te lo pida, ejecuta la configuración propia de la tienda en la Terminal. Se salta todo lo que Claude ya hizo y solo te pide lo que es privado:

npm run setup

En la protección del checkout, elige 1 y pega la clave del sitio y la clave secreta de Turnstile Si ofrece volver a desplegar la función place-order, escribe n: Claude ya la desplegó Introduce tu email y una contraseña de al menos 12 caracteres para tu cuenta de propietario Cuando te lo pida, desactiva Allow new users to sign up en tu panel de Supabase y pulsa Enter; el setup comprueba que esté desactivado Dile a Claude que ya está

Supabase Authentication Sign In / Providers

Mantén esto en privado

Escribe la clave secreta de Turnstile y tu contraseña solo en las solicitudes ocultas de la Terminal. Nunca las pegues en el chat.

Comprueba la configuración e inicia sesión

Claude ejecuta las comprobaciones de la tienda y la reinicia. Cuando diga que todo pasó:

Recarga tu tienda local: ahora carga su colección desde tu base de datos Abre /admin e inicia sesión con tu email y contraseña de propietario

Ya estás en Studio, el panel de tu tienda. Solo pueden abrirlo las cuentas de la lista de administradores de la tienda, y nadie puede registrarse.

Añade un producto

Todo lo que guardas en Studio va directo a tu base de datos, sin cambios de código.

Studio Products Add a product

Rellena Name, Category y One-line summary En Photos, añade una foto frontal En Price, sizes and stock, define el Price y elige las Sizes Ponle nombre al primer color, elige su muestra e introduce su stock para cada talla Haz clic en Add a colour para cada otra variante de color Haz clic en Publish

Opcional: cuando tengas tus propias prendas, archiva o elimina los ocho productos de demostración en Products.

Ajusta la foto en el perchero

Al añadir una foto frontal se abre el editor del perchero. Lo que mejor queda es un recorte PNG transparente con el gancho de la percha arriba; una foto contra una pared lisa y clara también funciona.

Activa Remove the plain background si la foto no es un recorte Ajusta Size y la posición, o arrastra la foto en la vista previa Describe la foto para los lectores de pantalla Haz clic en Use this photo

Revisa Preview on the rail: pasa el cursor para girar la prenda y haz clic para abrir el primer plano. Las fotos de espalda y de lado le permiten girar por completo.

Organiza el perchero

Studio Rail

En Add a piece, elige tu nuevo producto y su color Arrastra las prendas para ordenarlas, o usa las flechas Quita cualquier prenda que no quieras en la página de inicio Haz clic en Save rail

De seis a diez prendas quedan bien en una pantalla de escritorio. En el móvil, el perchero se convierte en un carrusel deslizable.

Da forma a las colecciones y al lookbook

Studio Collections

En Homepage selection, elige las prendas que encabezan la página de inicio y haz clic en Save Haz clic en New collection, o edita una, y añade sus prendas

Studio Lookbook

Edita el título y la introducción Sube tus propias fotos y pies de foto para cada página doble Oculta o reordena las páginas dobles y luego haz clic en Save lookbook

Actualiza los ajustes y abre el checkout

Studio Settings

En Store, define el nombre de tu tienda y la moneda En Contact, Shipping y Policies, añade tus propios datos En Homepage, cambia los textos alrededor del perchero En Checkout, activa Cash on delivery, Bank transfer o Pay at studio pickup, y edita sus instrucciones Activa Open checkout Haz clic en Save settings

STILLFORM no pide datos de tarjeta: los compradores eligen uno de tus métodos y tú marcas cada pedido como pagado cuando llega el dinero.

Haz un pedido de prueba

Abre tu tienda local, pon una prenda en la bolsa y finaliza la compra Anota la referencia del pedido en la página de confirmación En Studio, abre Orders y haz clic en tu pedido de prueba Haz clic en Cancel order: su stock vuelve a estar a la venta

Crea tu Web App

¿Aún no tienes hosting? Consigue un plan en Requisitos.

Hostinger Websites Create website Web App

Elige tu propio dominio, o un dominio temporal para empezar Elige Import your Git repository Elige Continue with GitHub y da a Hostinger acceso a tu repositorio de STILLFORM Selecciona el repositorio y la rama main

Configura y despliega

Mantén el preset de framework Vite que detecta Hostinger Elige Node.js 22 Define el comando de build como npm run build, nunca build:demo Define el directorio de salida como dist y deja vacío el archivo de entrada

Antes del primer build, añade estas tres variables de entorno: los mismos valores de tu .env.local, que Claude puede mostrarte. Se integran en la tienda, así que cambiar una más adelante requiere volver a desplegar.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Publishable key de Supabase

VITE_TURNSTILE_SITE_KEY

Clave del sitio de Turnstile

Los valores de Supabase están en Connect. La clave del sitio está en tu widget de Turnstile.

Abrir Connect

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

Solo valores públicos

Nunca añadas a Hostinger la clave secreta de Turnstile, la Secret key de Supabase ni la clave service_role. Todo lo que empieza por VITE_ es visible en el navegador.

Pide a Claude que ejecute npm run preflight, la verificación de lanzamiento de la tienda; despliega solo cuando la supere Haz clic en Deploy y espera a que termine el build Abre tu dirección en vivo

Conecta tu dominio en vivo

Supabase Authentication URL Configuration

Define la Site URL con tu dirección en vivo, empezando por https:// Añade la misma dirección a las Redirect URLs Haz clic en Save

Cloudflare Turnstile

Abre tu widget de STILLFORM Añade tu dominio en vivo a sus hostnames y guarda

Allow new users to sign up sigue desactivado en Supabase.

Prueba tu tienda en vivo

Abre directamente una de tus páginas de producto por su dirección y luego recárgala Inicia sesión en /admin en tu dirección en vivo Pon una prenda en la bolsa y completa el checkout: la verificación de Turnstile es invisible o una sola casilla Busca tu pedido de prueba en Orders y cancélalo

Aún no se ha confirmado cómo gestiona Hostinger los enlaces directos de esta tienda. Si una página de producto muestra un 404 al abrirla o recargarla, pide a Claude que revise contigo la sección de Hostinger de docs/DEPLOY.md.

Actualiza tu tienda más adelante

Productos, fotos, stock, pedidos y ajustes: cámbialos en Studio; se publican al instante

Cambios de diseño o de código: pide a Claude que los haga y los suba a main; Hostinger recompila tu tienda con cada push