Browse commands

/impeccable craft

Craft

Primero da forma al diseño, luego constrúyelo, todo en un solo flujo.

01ShapeEntrevista de discovery. Propósito, usuarios, restricciones, dirección.
02Cargar referenciasEspacial, tipografía, movimiento, color, interacción.
03ConstruirEstructura, jerarquía, tipo, color, estados, movimiento, responsive.
04Iteración visualVerificar en el navegador, refinar hasta que coincida con el brief.

Cada fase es innegable. La etapa de discovery es donde la mayoría de los resultados de IA fracasan: para cuando existe código, el pensamiento ya está bloqueado.

Cuándo usarlo

/impeccable craft es el comando de construcción de extremo a extremo. Dale una descripción de función y ejecuta todo el pipeline: discovery estructurado, carga de referencias, implementación, iteración visual. Úsalo cuando estés comenzando una función nueva desde cero y quieras todo el flujo de trabajo en una sola invocación.

Recurre a él cuando:

  • Estás construyendo una función nueva y quieres el flujo completo. No quieres gestionar los pasos tú mismo.
  • Sabes qué estás construyendo pero no cómo debería verse. La fase de discovery fuerza el pensamiento de diseño antes de que la implementación lo bloquee.
  • Quieres iteración visual por defecto. craft verifica el resultado en un navegador y refina hasta que el nivel de acabado sea alto, en lugar de entregar la primera versión funcional.

Si solo quieres el pensamiento sin el código, usa /impeccable shape de forma independiente. Si ya tienes una visión clara y solo quieres construir, llama a /impeccable directamente con tu descripción de función. craft está en medio: estructurado, completo, con opinión.

Cómo funciona

craft ejecuta cuatro fases en orden:

  1. Dar forma al diseño. Ejecuta /impeccable shape internamente: una breve conversación de discovery sobre propósito, usuarios, contenido, restricciones y objetivos. El resultado es un brief de diseño que puedes leer y rebatir.
  2. Cargar referencias. Basado en el brief, incorpora los archivos de referencia adecuados (espacial, tipografía, movimiento, color, interacción, responsive, escritura UX) para que el modelo tenga los principios relevantes cargados antes de comenzar a codificar.
  3. Construir. Implementa la función en un orden deliberado: primero estructura, luego espaciado y jerarquía, luego tipo y color, luego estados, luego movimiento, luego responsive. Cada decisión se remonta al brief.
  4. Iteración visual. Abre el resultado en un navegador, lo verifica contra el brief y el catálogo de anti-patrones, y refina hasta que coincida con la intención. Este paso es crítico. La primera versión funcional nunca es la versión final.

La fase de discovery no se puede saltar y ese es el punto. La mayoría de las UIs generadas por IA fracasan porque nadie preguntó qué intentaba lograr el usuario antes de que el modelo empezara a escribir JSX. craft invierte ese orden.

Pruébalo

/impeccable craft a pricing page for a developer tool

Espera primero una entrevista de discovery de 5 a 10 preguntas. Preguntas sobre tu audiencia, la personalidad del producto, el tono emocional que deseas, anti-referencias y restricciones. Luego un brief de diseño. Luego implementación, con el navegador verificado en cada etapa. Espera múltiples rondas de iteración en la fase de acabado visual.

La ejecución completa es más larga que un comando típico porque incluye el pensamiento, la construcción y el refinamiento. Ese es el intercambio: más estructura al inicio, menos correcciones después.

Errores comunes

  • Usarlo para cambios pequeños. craft es para funciones nuevas, no para retoques. Para código existente, recurre a /impeccable polish, /impeccable critique o un comando de refinamiento específico.
  • Apresurar la fase de discovery. La entrevista parece lenta comparada con “simplemente empezar a codificar”. No lo es. Responder las preguntas con cuidado produce un brief más preciso, que produce una construcción más precisa, que produce menos reescrituras.
  • Saltarse la iteración visual. La fase existe por una razón. La brecha entre “tcnicamente funciona” y “se siente bien” se cierra con acabado visual, no con revisión de código. Deja que se ejecute.