Los mejores prompts de IA para crear un sitio web, desde el primer borrador hasta el lanzamiento
Aprende a dar instrucciones a un creador de sitios web con IA mediante requisitos claros, contexto útil y solicitudes de seguimiento específicas. Estos ejemplos prácticos te llevan desde una idea inicial hasta un sitio web fullstack con autenticación, pagos, pruebas y publicación.
¿Qué hace que un prompt para crear sitios web sea bueno?
Los mejores prompts de IA describen el resultado que buscas sin intentar imponer cada detalle técnico de la implementación. En Coderblock, conversas con la IA mientras crea una aplicación fullstack real con React, TypeScript, Tailwind CSS, un backend y una base de datos Postgres.
Un buen prompt inicial suele incluir cinco aspectos:
- Propósito: ¿Qué debería ayudar a conseguir el sitio web?
- Público: ¿Quién lo utilizará?
- Páginas: ¿Qué pantallas principales se necesitan?
- Funciones: ¿Qué deben poder hacer los visitantes o administradores?
- Estilo: ¿Qué apariencia y sensaciones debe transmitir la experiencia?
No necesitas especificar rutas de API, migraciones de bases de datos, hash de contraseñas ni scripts de despliegue. Describe el producto con lenguaje natural y deja que el agente se encargue de implementarlo.
Paso 1: Empieza con un prompt base bien estructurado
Abre un proyecto nuevo en Coderblock o elige una de las plantillas de producto disponibles. Si empiezas desde cero, utiliza esta fórmula:
Build a [type of website] for [target audience].
Its main purpose is to [primary user outcome]. Create these pages: [page list]. Include [essential features]. Use a [visual style] design with [colors, typography, or layout preferences]. Make it responsive and easy to use on phones and desktops.
Por ejemplo:
Build a website for an independent fitness coach. Its main purpose is to explain the coaching plans and let visitors request an introductory session.
Create a homepage, services page, coach profile, testimonials page, FAQ, and contact page. Add a clear Book a Session call to action throughout the site. Use a confident but welcoming style, with dark blue, off-white, and warm orange accents. Make it responsive and prioritize readability on mobile devices.
Coderblock genera la aplicación y abre una vista previa de desarrollo en tiempo real en una dirección como <app>.coderblock.dev. Después puedes perfeccionar el resultado mediante el chat y ver las actualizaciones en cuestión de segundos.
Paso 2: Pide una estructura de páginas clara
Si la primera versión parece incompleta, evita pedirle a la IA que «la mejore». Indica qué debe comunicar cada página y qué acción debe fomentar.
Improve the homepage structure. Add:
- a hero section with one clear headline and primary call to action
- a three-item benefits section
- a short how-it-works section
- testimonials
- an FAQ with five common questions
- a final booking call to action
Keep each section concise and avoid repeating the same claims.
Para un sitio web empresarial con varias páginas, prueba lo siguiente:
Add separate pages for Services, About, Case Studies, and Contact. Keep the same navigation and visual system across every page. Give each service its own section with a short description, intended customer, and next step.
Este enfoque es más fiable que solicitar todas las páginas y funciones posibles de una sola vez.
Paso 3: Utiliza prompts visuales con indicaciones concretas
Palabras como «moderno» o «bonito» son subjetivas. Añade decisiones de diseño que se puedan observar:
Redesign the site with a clean editorial style. Use generous white space, large headings, restrained dark-green accents, subtle borders instead of heavy shadows, and a maximum content width that keeps paragraphs readable. Make the navbar sticky and turn the mobile navigation into a compact menu.
También puedes perfeccionar componentes individuales:
Make the pricing cards easier to compare. Emphasize the middle plan, align the feature lists, show the monthly price prominently, and place one clear button at the bottom of each card.
Solicita un solo cambio visual cada vez cuando quieras tener un control más preciso sobre el resultado.
Paso 4: Añade datos reales y cuentas de usuario
Un sitio web se convierte en una aplicación fullstack cuando almacena datos u ofrece acceso personalizado a los usuarios. Describe el comportamiento esperado en lugar de pedir código de autenticación personalizado.
Add signup and login for customers. Protect the account dashboard so only logged-in users can access it. Let each customer view and update only their own profile and booking requests. Add an admin view where staff can review all bookings and change their status.
El agente configura Supabase Auth, la gestión de sesiones, las rutas protegidas, las tablas de la base de datos y Row Level Security. Todas las aplicaciones ya incluyen una tabla de perfiles y una estructura básica de roles, por lo que no debes pedir una tabla de contraseñas independiente ni una implementación personalizada de JWT.
Para modelar los datos, especifica claramente qué crean y qué pueden ver los usuarios:
Add a bookings table with service, preferred date, customer notes, status, and creation date. Customers should see only their bookings. Administrators should be able to see all bookings and set the status to pending, confirmed, completed, or cancelled.
Puedes consultar las tablas, los usuarios de autenticación, el almacenamiento y las funciones desde la pestaña Backend.
Paso 5: Pide pagos con lenguaje natural
Para vender un producto o una suscripción, indica el precio, la moneda, el intervalo de facturación y lo que debe suceder después del pago:
Add a Pro subscription for €9.99 per month. Create a pricing page and Stripe checkout. After successful payment, mark the customer as Pro and unlock the premium dashboard. Let subscribers view their current plan and manage their subscription.
De forma predeterminada, el agente puede crear una cuenta gestionada de Stripe después de solicitar datos como el país y el nombre de la empresa. No se necesitan claves de API y Coderblock se encarga del webhook de pagos. Más adelante, puedes completar la configuración de cobros y el proceso KYC mediante el enlace de incorporación alojado por Stripe.
Si prefieres usar tu propia cuenta de Stripe, solicita el modo BYOK. El agente te pedirá STRIPE_SECRET_KEY mediante una solicitud segura de variable de entorno y registrará el webhook automáticamente. Los secretos permanecen en el almacén del servidor del proyecto, no en el código ni en el chat. Empieza en modo de prueba antes de activar los pagos reales.
Paso 6: Mejora la usabilidad con prompts basados en roles
Pide a la IA que revise la experiencia desde la perspectiva de un usuario concreto:
Review the booking flow as a first-time mobile visitor. Reduce unnecessary steps, make required fields clear, add useful empty and error states, and show a confirmation screen after submission. Do not remove any existing functionality.
Después, revisa la experiencia de administración:
Improve the admin bookings view. Add search, status filters, sortable dates, and a clear empty state. Show the most important booking details in the table and put secondary information in a detail panel.
Estos prompts establecen un objetivo medible y ayudan a evitar rediseños amplios y descontrolados.
Paso 7: Ejecuta un prompt final antes del lanzamiento
Antes de publicar, solicita una revisión de calidad específica:
Prepare this website for launch. Check every page for responsive layout problems, broken navigation, unclear buttons, missing form validation, inconsistent spacing, loading states, empty states, and accessibility issues. Preserve the current visual direction and summarize the changes you make.
Continúa con una revisión del contenido:
Review all visible copy. Make headings specific, shorten long paragraphs, keep the tone consistent, and replace vague calls to action with clear next steps. Do not invent customer claims, statistics, or testimonials.
Prueba el registro, las páginas protegidas, el envío de formularios, los permisos de administrador y, cuando corresponda, el proceso de pago de prueba de Stripe.
Paso 8: Publica y sigue mejorando
Cuando la vista previa en tiempo real esté lista, selecciona Publish para desplegar la versión de producción en <app>.coderblock.app con SSL. Puedes conectar un dominio existente desde Settings → Domains mediante los registros DNS guiados, o comprar un dominio en Coderblock para que el DNS y el SSL se configuren automáticamente.
La publicación no marca el final del proceso de prompting. Continúa con solicitudes pequeñas y precisas como estas:
Make the navbar sticky without changing its height.
Add a confirmation email step after a booking is submitted.
Show a useful empty state in the dashboard when a customer has no bookings.
El flujo de trabajo más eficaz es iterativo: define el producto, revisa la vista previa en tiempo real, solicita una mejora relevante y comprueba el resultado antes de continuar.
