Crea una app web funcional con un solo prompt usando Claude Code y Fable
Describe tu idea en una frase y obtén el código listo y una guia interactiva paso a paso en 10 minutos.
- 1.Instala Node.js (version LTS) desde el sitio oficial si aun no lo tienes. Verifica la instalacion con el comando node -v en la terminal - debe mostrar la version.
Si el servicio no esta disponible directamente en tu region, usa un VPN para la descarga.
Node.js ↗ - 2.Instala Claude Code globalmente con npm. Abre la terminal y ejecuta el comando de instalacion, luego sigue las instrucciones en la consola para autorizar.
Claude Code es gratuito para suscriptores de Claude Pro y Max. Sin suscripcion necesitaras un plan de pago - ver el apartado de costos.
Claude Code ↗Sobre la herramientaPromptnpm install -g @anthropic-ai/claude-code
Qué hace este promptEl comando instala la herramienta CLI de Claude Code globalmente. No necesitas cambiar nada - ejecutalo tal cual en la terminal. - 3.Crea una carpeta vacia para el proyecto, entra en ella desde la terminal y lanza Claude Code con el comando claude. En el primer inicio sigue las instrucciones en pantalla para vincular tu cuenta de Anthropic.
Si el servicio no esta disponible en tu region, necesitaras un VPN para la autorizacion.
Claude Code ↗Sobre la herramientaPromptmkdir my-app && cd my-app && claude
Qué hace este promptCrea la carpeta my-app, entra en ella e inicia una sesion interactiva de Claude Code. Puedes cambiar el nombre de la carpeta por cualquiera. - 4.Pega el siguiente prompt en la sesion de Claude Code. Creara la estructura del proyecto, la logica y los archivos en un solo paso.
Claude Code creara los archivos en la carpeta actual. No necesitas copiar el codigo manualmente.
Claude Code ↗Sobre la herramientaPromptCrea una app web de una sola pagina llamada «[APP_NAME]» que haga lo siguiente: [DESCRIBE_WHAT_IT_DOES]. Usa HTML, CSS y JavaScript vanilla en un solo archivo index.html. Haz la interfaz limpia y responsiva. Incluye un titulo «[APP_NAME]», un formulario de entrada y un area de resultados. Agrega validacion basica de entrada.
Qué hace este promptEl prompt pide a Claude Code crear una app web de una sola pagina. Sustituye [APP_NAME] por el nombre de tu app (por ejemplo, Task Tracker) y [DESCRIBE_WHAT_IT_DOES] por la descripcion de lo que hace la app (por ejemplo, permite agregar tareas, marcarlas como completadas y eliminarlas). Deja el resto igual - Claude creara el archivo index.html en la carpeta actual. - 5.Abre el sitio de Fable, pulsa Get Started y autorizate con Google o email. El plan gratuito permite crear guias publicas.
No introduzcas datos personales ni de pago en servicios de terceros sin necesidad. Fable se usa para grabar la pantalla.
Fable ↗ - 6.Inicia la grabacion de pantalla en Fable, abre el archivo index.html en el navegador (doble clic), demuestra el funcionamiento de la app - introduce datos, muestra el resultado. Deten la grabacion y publica la guia copiando el enlace.
Antes de grabar cierra las pestanas con informacion personal - podrian aparecer en el video.
Fable ↗
- gratisNode.jsTotalmente gratuito para descargar y usar.
- suscripciónClaude CodeRequiere suscripcion Claude Pro ($20/mes) o Max ($100/mes); sin suscripcion se puede usar por API con pago por tokens. No hay plan gratuito.
- gratisFableEl plan gratuito permite crear guias interactivas publicas; hay planes de pago para equipos.
Por qué hoy
Los servicios de IA cambian rápido - las interfaces y los límites gratuitos pueden diferir de lo descrito.