Cuando la IA no puede resolver tu problema, pídele que te construya la herramienta
Necesitaba crear una máscara SVG para un carrusel de imágenes — una curva suave alrededor de un botón circular. Me llevó toda una mañana intentando que Claude la generara. Hasta que cambié el enfoque: le pedí que me armara un debugger visual para hacerlo yo mismo. Lo que me llevó una mañana entera de frustración, se resolvió en 5 minutos con la herramienta correcta.
El problema
Estaba armando un carrusel de imágenes para este sitio. El diseño tenía un detalle complejo: una máscara SVG (una forma vectorial que recorta parte de la imagen) que generara curvas suaves alrededor de un botón circular. Pensá en un recorte con forma de muesca redondeada en el borde de cada slide.
El diseño ya existía en Figma con las curvas exactas. El problema era traducir eso a código. Un SVG (Scalable Vector Graphics, el formato estándar para gráficos vectoriales en la web) se define con un path — una secuencia de comandos como M, Q, A que describen líneas, curvas y arcos. Modificar esos valores a mano es como editar coordenadas GPS sin mapa.
Lo que intenté (y falló)
Probé cuatro enfoques distintos antes de encontrar la solución. Cada uno falló por una razón diferente.
1. Figma MCP — Le conecté a Claude el MCP de Figma (Model Context Protocol — un protocolo que permite a la IA conectarse con herramientas externas). La idea era que leyera el diseño directo de Figma. El problema: el archivo tenía demasiadas capas anidadas y el MCP no lograba acceder a las propiedades del path SVG que necesitaba. Se perdía navegando la estructura del archivo.
2. Explicar con palabras — Intenté describir la curva en lenguaje natural: "necesito un arco que arranque en el punto X, haga una curva convexa de radio Y...". Imposible. Las curvas bezier (curvas matemáticas definidas por puntos de control, usadas en diseño gráfico y SVG) no se pueden describir con precisión usando palabras. Cada intento generaba algo visualmente distinto a lo que necesitaba.
3. Dibujo en Excalidraw — Dibujé la forma que necesitaba y se la compartí como imagen. Claude entendió la intención general, pero no los valores exactos. Un dibujo a mano alzada no tiene la precisión numérica que un path SVG requiere.
4. Manipular el SVG manualmente — Abrí el código del path e intenté ajustar los valores directamente. Valores como Q 0,31 20,32 A 29,29 donde cada número afecta la curva de formas no intuitivas. Movía un número y la curva se deformaba de maneras impredecibles. Tedioso, lento, y sin feedback visual inmediato.
Cuatro intentos. Toda una mañana de trabajo perdida. La frustración crecía.
El momento eureka
Después de horas dando vueltas, mientras buscaba herramientas online para editar paths SVG, tuve la revelación: "Estoy buscando una herramienta... ¿y si le pido a Claude que me la construya?"
El cambio mental fue sutil pero poderoso. En vez de pedirle a la IA que resuelva el problema directamente (generar el path SVG correcto), le pedí que me construya una herramienta para que yo lo resuelva. Es un nivel de indirección: no le pedís el resultado, le pedís el medio para llegar al resultado.
Cuando la IA no puede resolver tu problema, no le pidas el resultado. Pedile la herramienta para llegar al resultado vos.
Le describí exactamente lo que necesitaba: "Armame una interfaz visual donde pueda manipular un path SVG con sliders y ver el resultado en tiempo real". Claude entendió perfecto — porque construir una UI con sliders es un problema bien definido, a diferencia de "adiviná qué curva tengo en la cabeza".
Notch Debug: la herramienta
En una sola iteración, Claude me generó Notch Debug — una mini-app con todo lo que necesitaba:
- Preview visual del path SVG — Veía la forma renderizada en tiempo real mientras ajustaba los valores
- Sliders para radio del arco y tamaño — En vez de editar números crípticos, movía sliders intuitivos
- Puntos de control visibles — Cada punto del path se mostraba como un marcador que podía ver y entender
- Botón para copiar el CSS generado — Una vez que la curva estaba perfecta, un click y tenía el código listo
Lo que antes era un proceso frustrante de prueba y error (editar número, recargar, ver que quedó mal, repetir) se convirtió en algo visual e inmediato. En 5 minutos tenía el path SVG exacto que necesitaba.
El framework: problema, herramienta, solución
Lo que pasó con Notch Debug no es un caso aislado. Es un patrón que se puede aplicar cada vez que la IA no puede resolver algo directamente:
Problema → IA no puede → Pedir herramienta → Resolver con herramienta
Algunos ejemplos donde aplica el mismo framework:
| Situación | En vez de pedir... | Pedí que construya... |
|---|---|---|
| Regex compleja | "Generame la regex perfecta" | Un tester visual con casos de prueba |
| Diseño responsive | "Arreglame estos breakpoints" | Un preview con toggles de resolución |
| Migración de datos | "Migrá estos registros" | Un script con dry-run y validación |
| Animación visual | "Animame este componente" | Un playground con controles de duración y easing |
| Configuración de deploy | "Configurame el CI/CD" | Un checklist interactivo de pasos |
La IA no es solo una herramienta que ejecuta. Es una fábrica de herramientas.
La clave es reconocer cuándo estás forzando a la IA a hacer algo que no puede (interpretar ambigüedad visual, leer tu mente) y redirigir hacia algo que sí puede hacer bien (construir interfaces, generar código con specs claras).
Conclusiones
Los devs seguimos siendo los problem-solvers. La IA no reemplaza tu capacidad de diagnosticar qué herramienta necesitás — la multiplica. Saber QUÉ pedir es más valioso que saber codear la solución vos mismo.
Si la IA falla resolviendo tu problema, no te frustres. Preguntate: "¿Qué herramienta necesitaría para resolver esto yo?" y pedile que te la arme.
¿Cuándo fue la última vez que le pediste a la IA que te construyera una herramienta en vez de pedirle la solución directa?