Creación de aplicaciones con Claude 3.7 Sonnet
Cómo convertir ideas en aplicaciones funcionales sin conocimientos avanzados de programación
El universo de la inteligencia artificial está en constante evolución, y con el lanzamiento de Claude 3.7 Sonnet, tenemos en nuestras manos una poderosa herramienta para crear aplicaciones de forma rápida e intuitiva. En este artículo, voy a compartir mis experiencias con esta increíble herramienta.
Primeros pasos con el Claude 3.7 Sonnet
Para empezar a explorar el potencial de Claude, el primer paso es crear una cuenta gratuita. Basta con acceder a Claude.ai y elegir si quieres registrarte con tu cuenta de Google o con un e-mail estándar. Tras el registro, te encuentras con una pantalla inicial muy similar a ChatGPT.
Antes de que empecemos a crear cualquier aplicación, existe una configuración importante: activar los artefactos. Para ello, haz clic en "Settings" y luego en "Profile", y activa la opción "Enable Artifacts". Esta funcionalidad es fundamental, pues permitirá visualizar las aplicaciones directamente a través de la interfaz web de Claude.
Crear tu primera aplicación: Pomodoro Timer
Empecemos por algo simple, pero extremadamente útil: un temporizador Pomodoro personalizable. La belleza de este proceso está en la simplicidad - basta con explicarle a Claude lo que quieres, pidiendo un diseño moderno y elegante, y especificando que quieres visualizar la aplicación directamente a través de Claude Artifacts.
Crea una aplicación que funcionará como un temporizador pomodoro personalizable. El diseño debe ser moderno y elegante. Crea el código de forma que yo consiga visualizar la aplicación directamente a través de Claude Artifacts.
En poco más de un minuto, Claude crea el código completo de la aplicación, que puedes visualizar haciendo clic en la pestaña "Code" a la derecha de la pantalla. La interfaz generada permite iniciar el temporizador, resetearlo, programar pausas cortas y largas, además de incluir un engranaje de configuraciones para modificar el tiempo del ciclo Pomodoro, el tiempo de pausa corta y larga, e incluso el número de ciclos hasta la pausa larga.
Es interesante notar que, como el prompt era bastante simple y no especificaba nada técnico o preferencias de desarrollo, Claude fue directamente a React como framework de elección. No es sorpresa - React es una especie de "querido" del momento entre los adeptos de la AI para la creación de interfaces. ¡Es como aquel amigo que solo sabe hablar de crossfit... solo que con componentes y hooks! Pero no te preocupes, no estás atrapado a eso. Puedes perfectamente pedirle a Claude que use Angular, Vue, Svelte, o incluso JavaScript puro con HTML en la cara dura. Basta con especificar en tu prompt inicial, y Claude va a satisfacer tu pedido con la tecnología que prefieras.
Lo que hace esta experiencia aún más increíble es la posibilidad de compartir la aplicación. Basta con hacer clic en el botón "Publish", luego en "Publicar y copiar link", ¡y ya está! Tienes un link para tu aplicación que puede ser compartido con cualquier persona. Al abrir el link, el usuario recibirá un mensaje indicando que se trata de un artefacto generado para un usuario, y después de hacer clic en "No mostrar", podrá utilizar la aplicación normalmente.
Es importante señalar que esta es solo la primera versión de la aplicación, que ya es bastante funcional. Siempre puedes continuar la conversación con Claude para pedir cambios, modificar colores, temas y añadir funcionalidades.
Elevando el nivel: Crear una App Kanban
Para quien le gusta la organización, una aplicación Kanban puede ser una excelente herramienta. Claude también da cuenta de este mensaje con mucha competencia.
Crea una app Kanban, al estilo Trello. Deberá ser algo visualmente rico, repleto de iconos y detalles de UI que demuestren que se trata de una app meticulosamente planeada, con una interfaz lindísima. El fondo de la app debe ser negro y los elementos con los cuales el usuario interactúe debe poseer colores vivos con un aspecto neón.
En la primera versión creada por Claude, tenemos la interfaz básica del Kanban. Sin embargo, en las versiones iniciales, funcionalidades como arrastrar las tarjetas por la pantalla o añadir nuevas tarjetas pueden no estar presentes. En ese caso, necesitamos pedirle a Claude que añada esas funcionalidades.
Cuando trabajamos con códigos más complejos como este, podemos enfrentar un pequeño desafío: por utilizar una cuenta gratuita, la extensión de la conversación es limitada. La solución es simple: copia el código generado, crea una nueva conversación, pega el contenido y pide los cambios deseados.
Este proceso puede ser repetido para añadir funcionalidades de forma incremental. Por ejemplo, primero pedir la funcionalidad de drag and drop, luego la posibilidad de añadir nuevas tarjetas, y así sucesivamente. Cada nueva mejora hace que la aplicación sea más completa y funcional.
Dashboard interactivo para visualización de datos
Una de las aplicaciones más impresionantes de Claude 3.7 Sonnet es la creación de dashboards interactivos para visualización de datos. Imagina que tienes una presentación para hacer, un trabajo en la facultad, y quieres disponer los datos de forma creativa - Claude es perfecto para eso.
El proceso es simple: basta con adjuntar un archivo CSV o Excel conteniendo tus datos y pedirle a Claude que cree un dashboard interactivo. El resultado es sorprendente - un panel completamente interactivo, donde la modificación de los datos altera tanto los números como los gráficos en tiempo real.
Crea un dashboard interactivo basado en estos resultados que pueda ser visualizado en Claude Artifacts
Para este ejemplo utilicé este archivo Excel con los resultados de las elecciones para el parlamento en 2024.
A destacar que incluso en versiones anteriores como Claude 3.5 Sonnet, esta funcionalidad ya era bastante impresionante. Sin embargo, con el 3.7, notamos un aumento significativo de la calidad de las respuestas generadas, con códigos más interesantes y visuales más atractivos.
Invitaciones interactivas: Creatividad en la comunicación
Otra posibilidad fascinante es la creación de invitaciones interactivas. Por ejemplo, al pedirle a Claude que cree una invitación para un evento de lanzamiento de un libro o fiesta de cumpleaños, proporcionando detalles como la fecha, la hora y las preferencias visuales, puedes generar una invitación interactiva con elementos como la cuenta regresiva, el mapa de la ubicación y el espacio para confirmación de presencia.
Crea una web app que servirá de invitación para la conmemoración del 21º aniversario de Yes Marketing. La fecha será 20 de diciembre de 2025. Horario 20h00. La web app debe ser interactiva y visualmente impactante, utilizando una estructura que remita a la simplicidad. Inserta elementos con los cuales los usuarios puedan hacer clic e interactuar. La UI debe ser visualmente rica, con elementos que denoten que la app fue meticulosamente planeada. El fondo de la app debe ser blanco y los elementos visuales deben ser en tonos de azul, pues la identidad visual de la empresa son en estos tonos. El local del evento será el restaurante O Faroleiro, en el Guincho, en Cascais - crea una sección para mostrar las indicaciones de ubicación con Google Maps. La app deberá ser posible de ser visualizada en Claude Artifacts.
Incluso si el resultado inicial no es exactamente lo que tenías en mente (generalmente por falta de especificaciones claras en el prompt inicial), los elementos interactivos funcionan perfectamente, y siempre puedes pedir ajustes posteriores. Al igual que en los otros ejemplos, esta invitación puede ser publicada y compartida a través de un link.
Juegos en 3D: Diversión y posibilidades
Para demostrar la versatilidad de Claude, podemos incluso crear un simple juego 3D. Con un prompt tan básico como crear un juego de coches en 3D que sea jugable a través de Cloud Artifacts, Claude genera un pequeño juego al estilo Top Gear, donde es posible controlar el coche, acelerar, moverse, e incluso "morir" al chocar.
Aunque parezca solo una curiosidad, las aplicaciones prácticas son diversas: las empresas pueden crear acciones de marketing que involucren minijuegos, los profesores pueden desarrollar juegos educativos para hacer que la enseñanza sea más divertida, y los estudiantes pueden crear quizzes y flashcards para facilitar el aprendizaje.
Landing pages: De la idea al prototipo
Claude se destaca también en la creación de sitios y landing pages. Con un simple prompt pidiendo una landing page moderna y proporcionando un código de animación (que puede ser obtenido en sitios como prismic.io, Claude genera una landing page completa incorporando la animación solicitada.
Crea una landing page moderna, con todos los códigos y bibliotecas contenidos en un único archivo html. Incorpora la animación abajo en el diseño. Código de ejemplo: [PEGA AQUÍ EL CÓDIGO DE LA ANIMACIÓN]
Es importante mencionar que, aunque sea posible publicar esta landing page directamente a través de Claude, lo ideal es utilizar Claude como herramienta de prototipado. Después de tener el código creado, puedes ajustarlo y hospedarlo en un servicio más apropiado para sitios profesionales.
Claude Code: Una herramienta avanzada
Además de la interfaz web de Claude, existe una herramienta más avanzada llamada Claude Code, lanzada junto con Claude 3.7 Sonnet. Esta herramienta necesita ser instalada en tu ordenador y permite una interacción más directa con el código generado por Claude.
Para demostrar su funcionamiento, vamos a crear un proyecto Link Tree desde cero. Primero, creamos una carpeta en el ordenador y abrimos un terminal en esa carpeta. Después de instalar Claude Code, podemos iniciarlo escribiendo simplemente claude en el terminal.
Para obtener mejores resultados, es recomendable crear un archivo README conteniendo todas las instrucciones del proyecto. Podemos hacer esto usando el Claude normal a través del sitio, explicando lo que necesitamos y pidiéndole que cree el archivo README con las instrucciones necesarias. Estas instrucciones pueden incluir aspectos visuales, referencias de diseño, e incluso imágenes para inspiración.
Voy a crear una landing page, al estilo Link Tree, que contendrá los links de mis redes sociales. El fondo de la página debe ser blanco y el diseño, en general, debe tener un aspecto moderno y tecnológico. Todo el proyecto será creado por un agente de AI, por lo que, necesito que cree un archivo readme.md conteniendo todas las instrucciones que el agente tendrá que tener en cuenta en la creación del proyecto.
Después de descargar este archivo README y guardarlo en la carpeta del proyecto, volvemos a Claude Code y damos el comando /init. Esto hace que Claude Code lea los archivos de la carpeta, comprenda el proyecto y cree un archivo claude.md. A continuación, podemos pedirle que cree el proyecto completo, incluyendo toda la base de código, dependencias y bibliotecas necesarias.
Claude Code comenzará a hacer ediciones, a crear archivos y a solicitar confirmaciones. Pasados algunos minutos, tendremos un proyecto completo y funcional. Por ejemplo, en el caso del Link Tree, tendremos un HTML out-of-the-box, inspirado en el diseño de referencia proporcionado.
Consideraciones sobre el coste y las alternativas
Es importante mencionar que la utilización de Claude Code tiene un coste asociado. Por ejemplo, la creación del Link Tree mencionado costó 33 céntimos de dólar - un valor relativamente bajo por ser un archivo HTML simple, pero que puede aumentar significativamente para proyectos más complejos que involucren lenguajes más elaborados.
Claude Code funciona a través de la API de Claude, donde es necesario poner créditos para utilizar la herramienta. Considerando el elevado coste de la API para utilizar Claude 3.7 Sonnet, otras alternativas pueden ser más viables económicamente.
Una de esas alternativas es Cursor o Windsurf, que ofrece acceso a Claude 3.7 Sonnet (incluyendo la versión "Thinking", que es aún más capaz) por 20 dólares por mes. Además de Claude, Cursor y Windsurf también dan acceso a varios otros modelos, como Deepseek, GPT-4, Mini GPT-4, entre otros.
Instalar el Claude Code
Si aun así quieres probar Claude Code, la instalación es relativamente simple. Basta con acceder a la documentación oficial de Anthropic, verificar los requisitos del sistema (en Windows, es necesario instalar WSL y Node.js), y seguir las instrucciones de instalación.
npm install -g @anthropic-ai/claude-code
Después de la instalación, será necesario crear una cuenta en la consola de Anthropic, cargar esa cuenta con créditos para utilizar la API, y después podrás utilizar Cloud Code como se ha demostrado.
Claude 3.7 Sonnet representa un avance significativo en la democratización de la creación de aplicaciones. Con una interfaz amigable y resultados impresionantes, permite que incluso personas sin conocimientos avanzados de programación puedan dar vida a sus ideas. Ya sea para uso personal, educativo o profesional, las posibilidades son vastas y entusiasmantes. A medida que estas herramientas continúan evolucionando, asistimos a una verdadera revolución en la forma en que interactuamos con la tecnología y creamos soluciones digitales.
Y como es obvio, nosotros en Yes Marketing ya utilizamos prácticamente todas estas herramientas: Cursor, Windsurf, Claude Code y más el Bolt y Google Code para hacer las más diversas soluciones para nuestros clientes, claro, cada herramienta utilizada en el momento y contexto correcto.
