← Claude Code Hub
✦ Tip #143 Jul 23, 2026

Cómo uso los artefactos de Claude Code para entender lo que delego

Fable no necesita que le digas el cómo, pero el qué solo puedes dárselo si entiendes la superficie. Mi solución: un artefacto visual que esculpo, versión tras versión, hasta que queda exactamente lo que entiendo. La skill artifact-design hace de cincel.

El método en visual: Fable construye un artefacto del cambio, lo lees en voz alta, se esculpe versión tras versión hasta una síntesis condensada, y solo entonces delegas el resultado

TL;DR Antes de delegarle nada gordo a Fable, le pido un artefacto visual (un artifact de Claude Code) de la superficie que voy a tocar. Lo leo en voz alta, le digo lo que entiendo, y donde mi lectura falla sale una versión nueva. Talando y esculpiendo, versión tras versión, queda una síntesis condensada que es exactamente lo que entendí. Ahí, y no antes, delego. Es la versión visual de mis círculos concéntricos, con la skill artifact-design haciendo de cincel.

La doctrina de Fable 5 está escrita en la documentación oficial: "Describe the outcome, not the steps". Dale el resultado, no el camino. Nada de recordarle que teste, nada de specs de veinte páginas; el spec-driven development empieza a ser una reliquia (es el mismo principio detrás de pedirle la lista de tareas en vez de dársela). Pero esa doctrina esconde una trampa: solo puedes describir el resultado de algo que entiendes. El coste de escribir código se ha desplomado; el de entenderlo, no. Y no delegues lo que no entiendes.

El método: los círculos concéntricos, en visual

En los círculos concéntricos leo el código en voz alta y cada pasada reduce el área a la mitad. Esto es lo mismo, pero el material no es el código: es un artefacto visual que Claude esculpe conmigo.

1. Acota la superficie. En conversación con Fable, pregunto y me deja ver el terreno: qué módulos toca el cambio, qué depende de qué, dónde está el riesgo.

2. Pide el artefacto. "Haz un artefacto que explique este cambio". Sale una página web viva con el flujo dibujado, animaciones si ayudan, y hasta datos frescos vía MCP connectors si hacen falta.

3. Léelo en voz alta. En lugar de una PR o un repositorio, leo el artefacto y le digo a Claude lo que entiendo. Con sinceridad: los errores de mi entendimiento van saliendo solos.

4. Esculpe. Cada corrección produce una versión nueva. Talando lo que sobra, afinando lo que confunde. El artefacto guarda todas las versiones; la conversación, mi progreso.

5. La síntesis es tu luz verde. La versión condensada final es literalmente lo que entendí. Con eso ya puedo describir el resultado, que es lo único que Fable necesita. Si la tarea es larga, la suelto con /goal y me voy.

Resultado (ejemplo ilustrativo del bucle):

> Vamos a migrar el pipeline de facturación. Antes de tocar nada,
  haz un artefacto que me explique cómo fluye hoy un cargo.

✓ https://claude.ai/code/artifact/8a21...  (v1: 9 módulos, 3 colas)

> [voz] Vale, leo el diagrama... el retry vive en la cola, no en el
  worker. Y esto de "ledger snapshot" no sé qué es.

✓ v2: retry corregido en mi lectura, sección nueva: qué es el
  snapshot y cuándo se escribe

> [voz] Ahora sí. Condénsalo: solo el camino del cargo y los 2
  puntos donde puede duplicarse.

✓ v3 (final): 1 diagrama, 2 riesgos. Esto es lo que entiendo.
> /goal Migra el pipeline sin duplicar cargos...

El cincel: la skill artifact-design

Desde la v2.1.182, Claude Code carga una skill integrada, artifact-design, cada vez que construye un artefacto (también la puedes invocar a demanda como /artifact-design). La tengo en mi entorno y por dentro es un director de arte con criterio: calibra el tratamiento según la pieza (un informe no es una landing), respeta tu design system antes de elegir el suyo (decláralo en el CLAUDE.md y lo aplica), y lleva una lista explícita de vicios del "diseño IA" que evita. Es la razón de que estos artefactos se lean de un vistazo en lugar de parecer un volcado. Si quieres ese mismo criterio en las UIs de tu producto, el frontend-design skill empuja en la misma dirección.

El subproducto: la misma pieza convence a tu equipo

Aquí está el regalo del método: el artefacto que usaste para entender ya es el documento que explica el cambio. Lo compartes en la pull request o con el resto de ingenieros del equipo con un enlace. ¿Gente de producto, igual o más lista pero sin la jerga técnica? Mismo proceso, un prompt más: "crea una versión de este artefacto para producto". Tu entendimiento, esculpido una vez, sirve para todas las audiencias.

Referencia

Pieza Papel en el método
Artifacts El material: la página viva que esculpes (ya en Pro y Max)
artifact-design El cincel: criterio de diseño automático, invocable con /artifact-design
Círculos concéntricos El método padre: mismo bucle, leyendo código en vez de visual
Fable 5 El destino: el modelo al que delegas cuando ya entiendes
/goal El disparador: condición de parada para soltar la tarea larga

Documentación oficial: Share session output as artifacts · Work with Fable 5

Requisitos

  • Artifacts: plan Pro, Max, Team o Enterprise, con /login (no publica con API key, Bedrock ni Vertex).
  • Claude Code v2.1.183+ (artifacts) y v2.1.182+ (la skill artifact-design).
Guía gratuita

51 tips para dominar Claude Code.

Una página por tip. Cinco capítulos. Lo que de verdad uso a diario en producción — sin teoría, sin humo.

  • I. Empieza bien 10 tips
  • II. Conciencia 3 tips
  • III. Maestría 22 tips
  • IV. Autonomía 10 tips
  • V. Comparativa 6 tips
¿Eres desarrollador/a Web profesional?

Recibirás la guía por email · Te unes a la newsletter Gravitas · Cancela cuando quieras

de 51
#

Wmedia · 51 Tips
Guía gratuita · 51 tips · 5 capítulos

51 tips para dominar Claude Code.

¿Eres desarrollador/a Web profesional? · Cancela cuando quieras