Formación en Vibe Coding

Por qué importan estos conocimientos técnicos

Podría considerar que la técnica no le concierne. Quiere una herramienta que funcione, sin importar cómo. Esta postura entraña un riesgo mayor: la dependencia.

Imaginemos que construye su aplicación de gestión de clientela en Lovable. Todo funciona a la perfección durante seis meses. Luego Lovable triplica sus tarifas, o pivota hacia otro mercado, o cierra. Si ignora por completo de qué se compone su aplicación, lo pierde todo. Si comprende que su aplicación se descompone en bloques separables (la interfaz por un lado, los datos por otro), sabe que puede reconstruir la interfaz en otro lugar conservando lo esencial: sus datos.

Este conocimiento mínimo no es opcional. Constituye su seguro contra el encierro propietario.

Los cuatro componentes de una aplicación web

El front-end designa todo lo que el usuario ve y manipula: los botones, los formularios, los colores, la disposición de los elementos en la pantalla. Cuando describe «quiero un botón azul arriba a la derecha que muestre la lista de clientes», habla del front-end. Esta capa es la más visible pero también la más fácilmente reemplazable. Perder su front-end es molesto; reconstruirlo lleva unas horas.

El back-end constituye el motor invisible de su aplicación. Almacena los datos (quiénes son sus clientes, qué expedientes ha abierto, cuál es el historial de los intercambios), gestiona la autenticación (quién tiene derecho a acceder a qué), ejecuta la lógica de negocio (cuando un expediente lleva un año cerrado, archivarlo automáticamente). El back-end es la parte valiosa. Perder su back-end es perder sus datos. La reconstrucción resulta entonces imposible.

Las integraciones conectan su aplicación con el mundo exterior. Stripe para cobrar pagos, Resend para enviar correos, la API de Légifrance para consultar los textos legales. Cada integración añade capacidades pero también complejidad y posibles puntos de fallo.

Las automatizaciones hacen funcionar su aplicación sin intervención humana. Enviar un recordatorio 24 horas antes del vencimiento de un plazo de prescripción, generar un informe mensual de actividad, archivar los expedientes inactivos desde hace dos años.

Para generar el código

El mercado de las herramientas de vibe coding evoluciona a una velocidad que vuelve rápidamente obsoleta cualquier lista exhaustiva. En lugar de un inventario, he aquí las categorías principales y sus características.

Los generadores visuales como Lovable y Bolt destacan para los prototipos rápidos. Usted describe su aplicación en unas frases y aparece en unos minutos. La interfaz es intuitiva, los resultados a menudo impresionantes para aplicaciones simples. El límite aparece en cuanto desea algo a medida o una lógica compleja.

Los editores aumentados como Cursor se dirigen a quienes quieren ir más lejos. Cursor es un editor de código donde la IA asiste su trabajo en lugar de sustituirlo por completo. Usted ve cómo se construye el código, puede modificarlo, comprenderlo, versionarlo.

Los agentes de línea de comandos como Claude Code representan el enfoque más potente para proyectos ambiciosos. Claude Code funciona directamente en su terminal: usted describe lo que quiere, el agente genera el código, lo ejecuta, identifica los errores, los corrige y vuelve a probar, de forma autónoma.

Instalar Cursor

Cursor es un editor de código basado en VS Code, aumentado con inteligencia artificial. La instalación lleva menos de cinco minutos.

1. Diríjase a cursor.com
2. Haga clic en «Download» y elija su sistema (Mac, Windows o Linux)
3. Ejecute el instalador descargado
4. En el primer arranque, inicie sesión con su cuenta de Google o GitHub
5. Cursor propone importar sus extensiones de VS Code existentes: acepte si las tiene

La oferta gratuita incluye 2000 autocompletados al mes y 50 peticiones «slow» al modelo premium. Para un uso intensivo, la suscripción Pro cuesta 20 $/mes.

Instalar Claude Code

Claude Code es un agente de línea de comandos desarrollado por Anthropic. Funciona en su terminal y puede crear, modificar y ejecutar código de forma autónoma.

Requisitos previos

• Node.js 18+: compruébelo con node --version en su terminal
• Una cuenta de Anthropic con una clave API (console.anthropic.com)

Instalación en Mac/Linux

Abra su terminal y ejecute:

npm install -g @anthropic-ai/claude-code

Configure a continuación su clave API:

export ANTHROPIC_API_KEY="sk-ant-su-clave-aqui"

Para hacer permanente esta configuración, añada la línea anterior a su archivo ~/.zshrc (Mac) o ~/.bashrc (Linux).

Instalación en Windows

Abra PowerShell como administrador y ejecute:

npm install -g @anthropic-ai/claude-code

Para la clave API, añada una variable de entorno del sistema llamada ANTHROPIC_API_KEY con su clave como valor.

Primer arranque

Navegue hasta la carpeta de su proyecto y ejecute Claude Code:

cd mi-proyecto
claude

El agente arranca y espera sus instrucciones en lenguaje natural. Escriba su petición, pulse Intro y observe a Claude trabajar.

El stack técnico recomendado

Para almacenar los datos: Supabase

En el panorama actual, Supabase se impone como la opción evidente para los proyectos de vibe coding destinados al mercado europeo.

• Oferta gratuita generosa: 500 MB de base de datos, 1 GB de almacenamiento de archivos, autenticación ilimitada.
• Código abierto: si la empresa cerrara mañana, el software seguiría existiendo.
• Servidores en Europa: Fráncfort o Irlanda, conformidad con el RGPD simplificada.

El marco jurídico aplicable

Usted recoge datos personales: nombres, correos, números de teléfono, contenido de los expedientes. Es responsable del tratamiento en el sentido del RGPD. Las sanciones teóricas alcanzan 20 millones de euros o el 4 % del volumen de negocio anual mundial. Para un abogado, se añade el riesgo disciplinario.

Las siete obligaciones concretas

1. Información de los usuarios: política de privacidad accesible, aviso legal completo, banner de cookies si hay analítica.
2. Consentimiento explícito: casillas separadas y no premarcadas. Nunca una casilla única «Acepto todo».
3. Localización de los datos: seleccione imperativamente la región «EU (Frankfurt)» al crear su proyecto de Supabase.
4. Seguridad de los datos: cifrado en tránsito (HTTPS), cifrado en reposo, autenticación robusta, Row Level Security.
5. Derechos de las personas: consulta, exportación, modificación, supresión. Estas funcionalidades no son opcionales.
6. Registro de actividades de tratamiento: documento que recoge cada tratamiento con su finalidad, base jurídica y plazos de conservación.
7. Notificación de violación: alertar a la autoridad de control de datos en las 72 horas siguientes a la detección de un fallo de seguridad.

El principio fundamental

La correlación entre la precisión de su petición y la calidad del resultado es directa y medible. Un prompt vago genera una aplicación aproximada que requerirá diez idas y vueltas de corrección. Un prompt preciso produce un resultado utilizable en dos o tres iteraciones.

La estructura que funciona

Seis elementos componen un prompt eficaz:

1. Contexto: quién es usted, en qué marco trabaja
2. Objetivo: una frase que resuma lo que la aplicación debe lograr
3. Funcionalidades: lo que la aplicación debe hacer concretamente
4. Restricciones técnicas: Supabase, autenticación por magic link, datos en Europa...
5. Diseño: estilo, paleta de colores, inspiraciones
6. Exclusiones: lo que NO quiere en esta versión

Ejemplo comparativo

Los prompts que siguen se han afinado mediante iteraciones sucesivas para producir código funcional en la mayoría de los casos. Suponen el uso de Claude Code o de una herramienta equivalente.

Autenticación por magic link

Implementa un sistema de autenticación con Supabase utilizando exclusivamente los magic links.

El recorrido del usuario:
- El usuario llega a /conexion
- Introduce su correo en un campo único
- Recibe un correo con un enlace de conexión válido 1 hora
- Al hacer clic en el enlace, queda autenticado y es redirigido a /espacio-personal
- Su sesión persiste incluso tras cerrar el navegador

Páginas que crear:
- /conexion: formulario de correo + mensaje de confirmación tras el envío
- /espacio-personal: página protegida que muestra "Bienvenido [correo]" y un botón de cierre de sesión
- Todo intento de acceso a /espacio-personal sin sesión redirige a /conexion

Aspectos técnicos:
- Crea un hook useAuth() que centralice toda la lógica de autenticación
- Durante la verificación de la sesión al cargar, muestra un indicador de carga
- Los mensajes de error deben estar en español y ser comprensibles

Credenciales de Supabase:
- URL: [SU_URL]
- Clave pública: [SU_CLAVE]

Estructura de base de datos segura

Genera el código SQL para crear las siguientes tablas en Supabase. Cada tabla debe incluir las políticas de Row Level Security que permitan a cada usuario ver únicamente sus propios datos.

Tabla "clients":
Esta tabla almacena la información de contacto. Un cliente pertenece a un solo usuario de la aplicación.
- Identificador único (UUID generado automáticamente)
- Fecha de creación (automática)
- Nombre completo (obligatorio)
- Dirección de correo (obligatoria, única por usuario, formato validado)
- Número de teléfono (opcional)
- Estado (obligatorio: prospect, client_actif, ancien_client)
- Notas libres (opcional, texto largo)
- Referencia al usuario propietario (obligatoria)

Tabla "dossiers":
Un expediente pertenece a un solo cliente. Un cliente puede tener varios expedientes.
- Identificador único
- Fecha de creación
- Referencia al cliente correspondiente
- Título del expediente (obligatorio)
- Descripción detallada (opcional)
- Fecha de apertura (obligatoria)
- Fecha de cierre (opcional)
- Estado (ouvert, en_traitement, clos, abandonné)
- Referencia al usuario propietario

Añade:
- Las restricciones de integridad referencial (eliminación de un cliente = eliminación de sus expedientes)
- Un índice sobre el campo email de la tabla clients
- Un índice sobre el campo estado de la tabla dossiers

Genera también políticas RLS robustas. Activa explícitamente RLS en cada tabla y crea políticas para SELECT, INSERT, UPDATE y DELETE que verifiquen que auth.uid() corresponde al user_id del registro.

Interfaz de gestión completa

Crea una interfaz completa de gestión para la tabla "clients" existente en Supabase.

Tabla principal:
- Columnas: nombre, correo, teléfono, estado, fecha de creación
- Paginación: 25 clientes por página con navegación y visualización del total
- Búsqueda: barra que filtra instantáneamente por nombre y correo (debounce 300 ms)
- Filtrado: menú desplegable por estado (todos, prospect, client_actif, ancien_client)
- Ordenación: hacer clic en un encabezado ordena por esa columna (ascendente y luego descendente)

Acciones:
- Botón "Nuevo cliente" que abre un formulario en modal. Validación del formato del correo y de los campos obligatorios antes del envío.
- Botón "Modificar" en cada fila que abre el mismo modal precargado.
- Botón "Eliminar" que pide confirmación antes de la supresión.
- Botón "Exportar CSV" que descarga los datos visibles (teniendo en cuenta los filtros).

Estados:
- Carga inicial: esqueleto de tabla
- Error de red: mensaje explícito + botón "Reintentar"
- Tras una acción exitosa: notificación durante 3 segundos

Credenciales de Supabase: [URL] y [CLAVE]

Conformidad técnica con el RGPD

Añade las funcionalidades obligatorias del RGPD a la aplicación.

Página "Mis datos personales" accesible desde el perfil:

Sección "Consultar":
Tabla que enumera todos los datos almacenados sobre el usuario, organizados por categoría: información de la cuenta (correo, fecha de registro), datos creados (número de clientes, número de expedientes).

Sección "Exportar":
Botón "Descargar todos mis datos" que genera un archivo JSON estructurado con: perfil, clientes, expedientes, documentos (solo metadatos). Claves en español, formato legible.

Sección "Eliminar mi cuenta":
Proceso en varias etapas:
1. Explicación de lo que se eliminará
2. Escritura de la palabra "ELIMINAR" para confirmar
3. Correo de confirmación con enlace de anulación válido 30 días
4. Marcado de la cuenta como "en_eliminacion"
5. Posibilidad de anular durante 30 días
6. Supresión definitiva mediante tarea programada tras el plazo

Tabla "suppressions_demandees" para el seguimiento.

Acceder a las fuentes jurídicas oficiales francesas

Una aplicación jurídica gana valor cuando puede consultar directamente los textos legales, la jurisprudencia o los convenios colectivos. La MCP Factory ofrece un acceso unificado al conjunto de las bases jurídicas oficiales francesas por 12 € al mes: Légifrance, jurisprudencia del Tribunal de Casación y de los tribunales de apelación, convenios colectivos, BOSS, datos de empresas a través de Pappers.

Calculadora de indemnizaciones por despido

Crea una calculadora de indemnizaciones por despido.

Formulario:
- Salario de referencia: bruto mensual medio de los últimos 12 o 3 meses (el más favorable)
- Antigüedad: años y meses en la empresa
- Convenio colectivo: lista desplegable de los principales (Syntec, Métallurgie, Commerce détail, BTP) + opción "Otro"
- Motivo: personal, económico, ineptitud
- Edad del trabajador (para posibles incrementos)

Cálculos:
- Indemnización legal según el artículo L. 1234-9 del Code du travail: 1/4 de mes por año hasta los 10 años, 1/3 a partir de ahí
- Indemnización convencional si procede
- Comparación con indicación del importe más favorable

Resultado:
- Detalle de cada cálculo con referencias legales
- Recomendación explícita
- Advertencias si se necesitan verificaciones manuales

Exportación a PDF presentable con referencias y espacio para notas.

Panel de seguimiento de plazos de prescripción

Crea un panel de seguimiento de los plazos de prescripción.

Registro de un expediente:
- Nombre y referencia interna
- Cliente (selección o creación rápida)
- Tipo de litigio con plazo automático: responsabilidad contractual (5 años), responsabilidad extracontractual (5 años), derecho laboral salarios (2 años), despido (12 meses), consumo (2 años)
- Fecha del hecho generador
- Notas

Vista principal:
- Lista ordenada por urgencia (el vencimiento más próximo primero)
- Código de color: verde (>30 días), naranja (15-30 días), rojo (<15 días)
- Contador de los expedientes que requieren acción en los próximos 30 días

Vista calendario:
- Visualización mensual con los vencimientos posicionados
- Navegación entre los meses

Alertas:
- Correo automático a J-30, J-15, J-7
- Contenido: nombre del expediente, cliente, fecha de vencimiento, enlace directo

Multiusuario:
- Cada abogado ve sus expedientes
- Los socios ven todos los expedientes

Backend Supabase con correos a través de Resend.

Estos errores no son teóricos. Se repiten sistemáticamente entre los principiantes en vibe coding y pueden costar días de trabajo.

El prototipo en dos horas

Primera media hora: aclare la intención. Escriba en una frase lo que su aplicación debe permitir. Si esa frase contiene «y» más de una vez, está apuntando demasiado alto.

Segunda media hora: redacte el prompt estructurado. Este tiempo no se pierde, ahorra horas de iteraciones.

Tercera media hora: genere y pruebe. Limítese a cuatro iteraciones. Ignore los detalles estéticos.

Última media hora: conecte Supabase. Cree la tabla mínima. Pruebe con datos realistas.

Del prototipo al producto viable: 4 semanas

Para concluir

El vibe coding reparte de nuevo las cartas. Durante décadas, crear una aplicación exigía o bien competencias técnicas escasas, o bien un presupuesto para comprarlas. Esa barrera se ha rebajado considerablemente.

Los riesgos son reales. Los incidentes de seguridad documentados muestran que el código generado puede ser funcional sin ser seguro. Para las aplicaciones que manipulan datos de clientes, el secreto profesional y la responsabilidad deontológica imponen una vigilancia reforzada.

Pero las oportunidades son igualmente tangibles. Un abogado que domine estas herramientas puede crear en unas horas aplicaciones a medida que ni siquiera un presupuesto considerable habría permitido desarrollar hace cinco años. La autonomía tecnológica se vuelve accesible para quien quiera aprenderla.

Sobre el autor

Rédigé par

Pierre Colliot

Fondateur Zevra • Expert Legal Tech & Vibe Coding

Entrepreneur digital depuis 2014, spécialisé en Legal Tech et IA pour avocats. Hôte du podcast Quasar. Diplômé KEDGE Business School. Pratique le vibe coding quotidiennement depuis début 2024 avec +50 projets livrés pour des cabinets d'avocats et entreprises.

• KEDGE Business School — Entrepreneuriat & Marketing (2013-2017)
• 13 000+ followers LinkedIn
• Fondateur Supernovia.io, Zevra, bl-nk.fr

+50

projets vibe coding

10+ ans

d'expérience

13K+

followers LinkedIn

Newsletter LEGAL | IA | TECH

La révolution legaltech arrive — rejoignez 200+ abonnés