Aquí tienes cómo crear un archivo de instrucciones que se auto-mejora con el tiempo y te ayuda a generar aplicaciones web mucho más pulidas.

1. conecta a Claude con tu aplicación usando el servidor MCP de Playwright
2. guarda tus reglas de generación de componentes en un solo archivo
ej: src/lib/prompts/generation.tsx
3. pide a Claude que:
• abra localhost
• genere un componente
• revise la salida visual real
• actualice el archivo de instrucciones
• regenere y compare
ejemplo de instrucción:
"navega a localhost[:]3000, genera un componente básico, revisa el estilo y actualiza src/lib/prompts/generation.tsx para producir mejores componentes en el futuro"
en lugar de repetir patrones genéricos como:
• gradientes púrpura-azul
• bloques de héroe centrados
• simetría predeterminada de Tailwind
puede orientar la instrucción hacia:
• sistemas de colores más cálidos
• espaciados más originales
• diseños asimétricos
• mejor jerarquía visual
• componentes menos “de aspecto AI”
un patrón muy útil si quieres convertir la generación de componentes por IA en un flujo de trabajo de diseño real.