Ir a la guía de uso
Create Canvaspor ibelick

Create Canvas Skill.

Mantén alternativas de diseño interactivas en un espacio de comparación con nombres y posiciones ajustables.

  • Exploración de diseño
  • Lienzo
Revisión de la fuente · create-canvasSKILL.md
Tarea Mantén alternativas de diseño interactivas en un espacio de comparación con nombres y posiciones ajustables. Resultados Un registro definido en el código de vistas previas interactivas con nombre. Antes de empezar Los elementos incluidos y la implementación de las vistas siguen en el código; el almacenamiento no puede crear ni ocultar contenido.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Mantén alternativas de diseño interactivas en un espacio de comparación con nombres y posiciones ajustables

Crea un lienzo libre con vistas previas nombradas, alternativas independientes, distribución guardada e interacciones seguras que preservan los datos introducidos.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Create Canvas crea un espacio para explorar varias alternativas de diseño interactivas mediante la conversación. Cada vista previa tiene un ID estable y un nombre legible en un registro definido en el código. Puedes copiar el nombre para referirte a una versión concreta, mover vistas con tiradores dedicados y navegar mediante desplazamiento o zoom.

El contenido permanece en los archivos fuente y el almacenamiento del navegador recuerda la distribución. Esa separación concreta las solicitudes posteriores: una versión nueva recibe identidad y estado propios, mientras que un cambio en una versión existente conserva su posición. Los experimentos siguen siendo locales hasta que se solicite llevarlos a producción.

Entregables esperados

  • Un registro definido en el código de vistas previas interactivas con nombre.
  • Un lienzo con tiradores de movimiento, controles de cámara y selección global de tema cuando esté disponible.
  • Posiciones guardadas de cámara y elementos, con un informe de interacciones verificadas y no probadas.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Establecer una vista previa segura

    Inspecciona un lienzo existente antes de crear otro. Monta una vista con datos sintéticos, una etiqueta separada y un tirador de movimiento usando el framework del proyecto.

  2. 02
    Añadir alternativas distintas

    Da a cada variación un ID estable, nombre único y estado independiente. Conserva las alternativas anteriores y sus posiciones medidas al añadir contenido.

  3. 03
    Preservar la entrada al navegar

    Separa los gestos del lienzo de escritura, selección y desplazamiento anidado. Conserva los portales nativos y comprueba que copiar, mover o hacer zoom no vuelva a montar las vistas previas.

  4. 04
    Guardar la distribución y verificar

    Persiste valores acotados de cámara, el tema compatible y las posiciones por ID del registro. Valida recargas, almacenamiento malformado y gestos pertinentes de dispositivos antes de afirmar que funcionan.

02 Cuándo usarlo

Cuándo usarlo

Los elementos incluidos y la implementación de las vistas siguen en el código; el almacenamiento no puede crear ni ocultar contenido.

Buen encaje

  • Comparación de diseñosMantén varias alternativas interactivas juntas y refiérete a ellas por nombres exactos.
  • Exploración continuaRetoma un espacio existente sin perder alternativas anteriores ni decisiones de distribución.

Límites que conviene comprobar

  • El código define el contenidoLos elementos incluidos y la implementación de las vistas siguen en el código; el almacenamiento no puede crear ni ocultar contenido.
  • Aislamiento de producciónLos experimentos usan datos de prueba seguros y no cambian el código de componentes de producción.
  • Editor de alcance limitadoDibujo, conectores, redimensionamiento e historial de deshacer se omiten salvo petición.

Aporta estos datos

  • Lista de experimentosNombra alternativas, dimensiones previstas y diferencias que quieres explorar.
  • Componentes segurosProporciona las API públicas de los componentes y datos de prueba que eviten información personal y escrituras reales.
  • Espacio existenteIdentifica la ruta, el registro, el tema y la distribución que deben conservarse.

03 Decisiones importantes

Decisiones importantes

  1. Referencias precisas

    Los nombres copiables evitan ambigüedad en peticiones posteriores, como cambiar una versión.

  2. Alternativas independientes

    Las versiones nuevas mantienen identidades y estados interactivos separados.

  3. Distribución persistente

    La distribución guardada restaura posiciones mientras el código actual sigue siendo la autoridad.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Nombra alternativas, dimensiones previstas y diferencias que quieres explorar.

Archivo fuente original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa create-canvas para comparar tres experimentos de tarjetas de precios en nuestro proyecto existente. Conserva la tarjeta original y crea dos alternativas con nombres independientes y los mismos datos de planes y dimensiones. Usa datos de prueba seguros y conserva las implementaciones actuales de componentes de producción. Añade nombres copiables, tiradores de movimiento dedicados y controles de desplazamiento, zoom y ajuste a la vista. Preserva escritura y selección dentro de las vistas previas. Guarda la distribución, no el contenido de formularios. Al terminar, prueba recargas, movimiento y zoom, e informa de gestos de dispositivos o comportamientos del historial del navegador que no hayas podido verificar.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Las alternativas nuevas conservan ID, nombres y posiciones anteriores.
  • Cambiar la cámara o mover elementos no borra los datos introducidos en las vistas previas.
  • El almacenamiento contiene solo distribución y las entradas inválidas recurren a una alternativa segura.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
ibelick
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 4907a526b079
Resumen editorial de la fuente
Mantén alternativas de diseño interactivas en un espacio de comparación con nombres y posiciones ajustables.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿El almacenamiento del navegador puede ser la fuente del contenido?

No. El registro define qué elementos existen y su implementación; las posiciones guardadas solo se aplican a los ID actuales.

¿Un iframe separado garantiza seguridad?

No. La fuente exige providers y datos de prueba seguros antes de montar; separar documentos no impide por sí solo solicitudes reales.

¿Restablecer elimina los experimentos?

Restablecer cambia la cámara y conserva los elementos, sus posiciones, temas y borradores.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Archivo fuente original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md