Crea un contador reutilizable de caracteres con Claude Artifacts

Una respuesta breve para una solicitud, una presentación de perfil o un aviso puede necesitar varias revisiones antes de ajustarse a un límite. Un contador reutilizable permite pegar cada versión, cambiar el límite y ver al instante cuánto espacio queda.

Claude Artifacts puede ayudarte a crear esta pequeña herramienta sin conocimientos previos de programación. El resultado útil es una interfaz que puedas volver a abrir mañana, con reglas de recuento que hayas comprobado por tu cuenta. Esta guía describe una herramienta propuesta y sus pruebas de aceptación; no documenta una creación ejecutada en Claude.

Empieza con una sola tarea y una regla de recuento clara

Mantén la primera versión sencilla: un cuadro de texto, un límite editable que sea un número entero positivo, un recuento en tiempo real y un estado que indique cuántos caracteres quedan o cuántos sobran. Incluye botones para borrar el texto y cargar un ejemplo. No acortes, recortes ni bloquees el texto automáticamente, porque necesitas poder revisar un borrador que supere el límite.

Define qué significa «carácter» antes de crear la herramienta. Para esta versión, cuenta los puntos de código Unicode, incluidos los espacios y los saltos de línea. Normaliza los finales de línea de Windows y de las versiones antiguas de Mac a un único salto de línea para el recuento, sin modificar el texto pegado. Un emoji sencillo como 😀 cuenta como uno; algunos emojis combinados contienen varios puntos de código. Esta es una regla explícita, no una promesa de coincidir con todos los sitios web. La referencia del iterador de cadenas de JavaScript explica por qué los puntos de código pueden diferir de los caracteres que se ven como una sola unidad.

Si el sitio de destino cuenta bytes, aplica otra regla para los emojis o excluye los espacios, este contador necesita una especificación distinta. Compara un ejemplo breve con el contador del propio sitio antes de confiar en la herramienta.

Pide a Claude un artefacto interactivo

Inicia sesión en Claude en la web o en la aplicación de escritorio y abre un chat. Según la página de ayuda actual de Artifacts, la creación de artefactos está disponible en los planes Free, Pro, Max, Team y Enterprise. La ejecución de código en la nube y la creación de archivos deben estar habilitadas en Settings > Capabilities o en los ajustes de capacidades de la organización. En una cuenta administrada, un administrador puede controlar el acceso a ese ajuste.

Usa el prompt para crear un contador reutilizable de caracteres. Solicita un pequeño artefacto interactivo y un archivo HTML autónomo, sin bibliotecas externas, llamadas de red, solicitudes a IA ni borradores guardados. Son requisitos para la herramienta generada, así que comprueba el archivo entregado en lugar de dar por hecho que se han cumplido.

Pide controles con etiquetas claras, texto de estado legible que no dependa solo del color y un diseño que funcione en una pantalla estrecha. Utiliza un ejemplo ficticio durante la creación; no hace falta usar una respuesta real de una solicitud.

Comprueba el comportamiento antes de confiar en el total

Las siguientes pruebas de aceptación ilustran la regla de recuento especificada; no son resultados observados en Claude. Establece el límite en cinco:

• Entrada vacía: recuento de 0, quedan 5 y no aparece ningún error.
• abcde: recuento de 5 y «En el límite»; abcdef: recuento de 6 y «Supera el límite en 1».
• a , incluidos ambos espacios: recuento de 3. No se elimina ningún espacio de forma silenciosa.
• A, seguido de un salto de línea y de B: recuento de 3. Los finales de línea de Windows deben producir el mismo recuento.
• 한글😀: recuento de 3. 👍🏽: recuento de 2 según la regla de puntos de código.

Prueba también con un límite vacío, cero, negativo o decimal. La herramienta debe mostrar un mensaje de validación, no un estado que indique que todo está correcto. El botón para borrar debe restablecer el texto y el resultado; al cambiar el límite, el estado debe actualizarse de inmediato. Si algo no coincide, indica la entrada exacta, el resultado esperado y el resultado mostrado; después de corregirlo, repite las pruebas. El mismo hábito sirve para verificar las respuestas de la IA.

Guarda una copia que puedas reutilizar

Descarga el archivo HTML generado y ábrelo en tu navegador. Revisa su código para comprobar que no realiza llamadas de red ni guarda borradores, tal como has solicitado; pide ayuda si no conoces el código. Repite las pruebas y vuelve a cargarlo sin conexión a la red para comprobar que sus controles básicos siguen funcionando. La descripción general de Artifacts de Anthropic explica la exportación del trabajo, incluido HTML, pero las opciones de exportación dependen del tipo de artefacto; si hace falta, solicita expresamente el archivo independiente.

Guarda juntos la herramienta en blanco y tu regla de recuento. Puedes volver a la pestaña Artifacts para hacer cambios, pero una copia descargada que funcione agiliza las comprobaciones diarias. Para terminar, pega tu texto real en el sitio de destino y comprueba allí el total final.

Disponibilidad de las funciones comprobada el 19 de octubre de 2026. Es una fecha de verificación, no de lanzamiento del producto.