- Claude Artifacts es una función que permite crear aplicaciones interactivas de una sola página usando HTML, CSS y JavaScript, ver los resultados dentro de la interfaz de Claude y seguir refinándolos.
- Tras convertir la actividad reciente de Claude a SQLite para analizarla, el autor descubrió que había usado Claude Artifacts mucho más de lo que esperaba durante la última semana.
- Ha estado usando esta función como una herramienta útil para resolver problemas directamente o crear prototipos.
[Proyectos creados con Claude Artifacts]
URL to Markdown con Jina Reader
- Desarrollo de una interfaz web que llama a la API de Jina Reader para convertir el texto completo de una página web a Markdown.
- Entrada de URL → generación de Markdown con la API de Jina Reader → salida en Markdown y botón de "Copy".
- Resolución del problema de que en Safari móvil era difícil copiar y pegar el texto completo de una página en un LLM.
Demo de SQLite en WASM
- A raíz de una conversación en Hacker News sobre el build de SQLite para WASM, descubrió el paquete
@sqlite.org/sqlite-wasm de NPM.
- Desarrolló una demo interactiva simple para comprobar si funcionaba.
Herramienta de extracción de URL
- Quería extraer las URL enlazadas dentro del texto de una página web.
- Creó un artifact que acepta pegado de HTML con rich text y usa un parser HTML para extraer los enlaces.
Visor del portapapeles
- Desarrolló una herramienta de depuración para pegar varios tipos de contenido y revisar la información usando la API del portapapeles del navegador.
- Permite copiar y pegar texto plano, rich text, archivos, imágenes y más, y ver qué información está disponible en el navegador.
REPL de Pyodide
- Encontró
https://cdn.jsdelivr.net/pyodide/ en un encabezado CSP.
- Eso sugiere que el equipo de desarrollo de Anthropic lo configuró intencionalmente para permitir cargar Pyodide (Python compilado a WebAssembly) dentro de Artifacts.
- Desarrolló una demo sencilla para demostrar que funcionaba.
Simulador de configuración de cámara fotográfica
- Tenía curiosidad por saber si era posible simular configuraciones de cámara con JavaScript, pero había bugs y el resultado no fue muy impresionante.
- Descubrió la biblioteca Fabric.js.
Calculadora de precios de LLM
- Desarrolló una calculadora de precios como parte de un experimento de scraping de video usando Google Gemini.
- La creó porque no confiaba en sus propios cálculos sobre lo barato que era Gemini.
Convertidor de YAML a JSON
- Desarrolló una herramienta que convierte YAML a JSON en tiempo real al ingresar YAML, para refrescar ciertos aspectos de la sintaxis de YAML.
OpenAI Audio
- Exploró la nueva Audio API de OpenAI.
- Desarrolló una página web que solicita permiso para acceder al micrófono, graba audio, lo codifica en base64 y luego lo envía a la API de OpenAI.
- Claude Artifacts no puede hacer solicitudes directas de API a hosts externos, pero después de desarrollar una versión funcional, se puede mover a otro hosting para completarla.
Decodificador de códigos QR
- En una reunión donde vio diapositivas con códigos QR, necesitaba una forma de convertirlos rápidamente a URL normales.
- Usó Claude Artifacts para desarrollar rápidamente un decodificador de códigos QR.
Convertidor de imágenes y descargador de páginas
- En Hacker News, alguien propuso una idea de herramienta donde se puede soltar una foto en una página, incrustarla como URL base64 y luego usar "Save as HTML" para obtener una página independiente con una galería incluida.
- También propuso agregar una útil función de "download link" para casos en que no se puede usar "Save as HTML" desde un teléfono móvil, y desarrolló un prototipo.
HTML Entity Escaper
- Necesitaba escapar entidades HTML de fragmentos de texto desde el teléfono, así que le pidió a Claude que hiciera la herramienta.
text-wrap-balance-nav
- Inspirado por Terence Eden, experimentó con la propiedad CSS
text-wrap: balance.
- Le pidió a Claude que creara un ejemplo de barra de navegación con slider y checkbox.
Convertidor al alfabeto fonético ARES
- Mientras hacía voluntariado en operaciones de comunicación por radio HAM, le preocupaba equivocarse al usar el alfabeto fonético, así que le pidió a Claude que hiciera una herramienta.
[Ventajas y límites de Claude Artifacts]
- El autor está usando Artifacts de forma intensiva, al punto de haber creado 14 proyectos en una sola semana.
- Lo ha estado usando continuamente desde su lanzamiento el 20 de junio, y ahora crea varios artifacts interactivos nuevos cada día.
- Claude Artifacts es útil para satisfacer la curiosidad, prototipar rápido y resolver problemas.
- La mayoría de las herramientas se pueden crear en menos de 5 minutos.
- Incluso la herramienta más compleja, OpenAI Audio, solo tomó 21 minutos en total: 12 minutos para la primera versión y 9 minutos para la segunda iteración.
- Sin embargo, le decepcionan sus límites, ya que restringe funciones como llamadas a API, envío de formularios y enlaces a páginas externas.
- Con base en lo aprendido, planea crear su propia alternativa a Artifacts.
- En conclusión, recomienda usar Artifacts.
- Si no estás usando Artifacts, espera que este artículo te ayude a entender por qué.
- Para él, Artifacts es actualmente una de sus herramientas favoritas basadas en LLM
1 comentarios
Comentarios de Hacker News
Hay quienes opinan que integrar herramientas en una base de código existente es difícil. Se puede crear como una página independiente, pero revisar y modificar el código para que sea compatible con la base de código existente toma mucho tiempo. Es mejor opción escribir el código directamente.
Aunque dejó el desarrollo web a principios de los 2000 para enfocarse en negocios web, ahora le alegra poder hacer trabajo creativo usando LAMP. Por ejemplo, puede desplegar el sitio de marketing que quiera en menos de 20 minutos.
Está buscando publicaciones de blog o "mejores prácticas" sobre la mejor manera de usar LLM junto con una base de código local. Espera que la comunidad tenga materiales recomendables.
Hay quien opina que la época actual es asombrosa. Empezó a aprender Rust el fin de semana, y ChatGPT 4 funciona como un excelente profesor que lo apoya en tiempo real.
Anthropic se está acercando al estado de súper app, como WeChat. Hace falta una forma de mostrar fácilmente los artifacts publicados en la barra lateral. Como a Elon le interesa mucho este modelo, si xAI tuviera las capacidades de Claude, iría en esa dirección.
El nuevo paradigma que presentó Anthropic es que el contenido se aloja. La salida del LLM se convierte en una app autoalojada que los consumidores pueden usar. Esto no es muy distinto de construir un sitio personal.