Diseño en Sketch desde Referencia (Sketch MCP to Design)

Construye o refina un diseño en Sketch para que coincida con una referencia. Esta habilidad es para trabajar "diseño dentro de Sketch"; el flujo inverso es sketch-diseño-a-codigo.

Fidelidad ante todo

El objetivo es la paridad visual con la referencia, no una página plausible con secciones similares. "Similar" no es suficiente. No te detengas cuando el contenido exista; detente cuando la comparación de capturas de pantalla lado a lado supere los criterios de finalización en references/validation.md.

Guías requeridas de Sketch

get_guide con topic: "mcp" — siempre; prerrequisitos de MCP, reglas de run_code, manejo de fallos y verificación visual.
get_guide con topic: "use" — edición en Sketch, stacks, símbolos, estilos, anulaciones, recursos y prototipado.
get_guide con topic: "layout" — antes de crear o reestructurar Frames, Grupos, stacks, colocación en página, dimensionamiento, pines o tipos de contenedor.

Obtén subtemas de guía bajo demanda cuando la tarea los necesite: troubleshooting, layout, styling, symbols, assets y prototyping.

Prerrequisitos

Sketch ejecutándose con MCP habilitado (Ajustes → General → Permitir que herramientas de IA interactúen con documentos abiertos).
Un documento de destino está abierto, o el usuario espera que crees/utilices un documento nuevo.
Una referencia está disponible como URL, captura de pantalla o código fuente.
El alcance está lo suficientemente claro para actuar: página completa vs frame único, ancho objetivo, modo oscuro/claro y página/frame objetivo cuando el documento tiene varios candidatos.

Si MCP no está disponible, detente y llama a get_guide con topic: "troubleshooting". No adivines el diseño desde la memoria mientras MCP esté inaccesible.

Pasos

Sigue estos pasos en orden. El flujo principal debería ser suficiente para el trabajo normal; carga un archivo de referencia solo cuando el paso necesite más detalle o ejemplos.

Paso 1 — Confirmar contexto y referencia

Obtén las guías requeridas.
Resuelve el documento de destino con get_document_info.
Clasifica el tipo de referencia:
- URL — recopila título de página, ancho de viewport, estructura DOM, HTML fuente, JavaScript/CSS vinculados o empaquetados cuando estén disponibles, colores/tipografías computados, texto copia y URLs de recursos.
- Captura de pantalla — recopila dimensiones, regiones, contenido de texto, alineación y colores clave.
- Código — recopila tokens de tema, pila tipográfica, escala de espaciado, nombres de componentes, SVGs inline e importaciones de recursos.
Extrae una especificación de fidelidad y captura una captura de pantalla de anclaje de la referencia al ancho objetivo antes de cualquier mutación de diseño. La especificación debe incluir regiones (de arriba a abajo), texto copia literal, colores, tipografía, anchos de diseño y fuentes de recursos — consulta references/reference-extraction.md.

Para la extracción específica de referencias, lee references/reference-extraction.md. Para la comparación y las puertas de finalización, lee references/validation.md antes del Paso 5.

Paso 2 — Descubrir contenido reutilizable de Sketch

Inspecciona antes de mutar. Comienza con herramientas MCP de solo lectura:

Llama a get_document_info para páginas, Frames/Graphics de nivel superior, recuentos de capas y candidatos de diseño existentes.
Llama a get_layer_tree_summary en frames candidatos o páginas relevantes para jerarquía, IDs, nombres, dimensiones, fragmentos de texto, recuentos de anulaciones de instancias de símbolo y pistas de stacks.
Llama a get_design_assets y get_libraries para símbolos/componentes reutilizables y recursos de biblioteca.
Usa run_code dirigido solo cuando los resúmenes no expongan el detalle necesario.

Prefiere editar un frame existente solo cuando estés seguro de que se corresponde con el diseño solicitado. De lo contrario, crea un frame nuevo.

Paso 3 — Planificar estructura antes que píxeles

Define el plan de capas antes de dibujar:

Regiones de nivel superior y su orden.
Relaciones padre/hijo y grupos hermanos.
Anchos de región, anchos máximos de contenido y secciones a sangre completa vs en columna.
Áreas fijas/ancladas vs contenido con desplazamiento.
Candidatos a símbolo, candidatos a stack, candidatos a recurso y patrones de stack reutilizables.

No impongas una plantilla de página predeterminada. Coincide con la arquitectura de información de la referencia.

Para cada región estructurada, decide el modelo de stack de Sketch antes de dibujar: dirección, espacio, relleno, alineación, dimensionamiento, ajuste y orden visual previsto. Usa stacks para filas, columnas, barras de navegación, barras de herramientas, tarjetas, listas, formularios, grupos de botones y contenido repetido a menos que haya una razón específica para que la región sea de forma libre. Usa coordenadas manuales para colocación a nivel de página, elementos anclados, superposiciones, máscaras o arte verdaderamente de forma libre.

Paso 4 — Establecer tokens y frame base

Crea o empareja muestras/estilos compartidos del documento para fondo, borde, texto, marca, texto atenuado y superficies importantes. Establece intencionadamente el fondo de la página/frame y elimina rellenos accidentales de grupos estructurales. Para detalles de símbolos, llama a get_guide con topic: "symbols".

Usa valores de la referencia: CSS computado, colores muestreados de la captura de pantalla o tokens de código. Para detalles de estilo, llama a get_guide con topic: "styling".

Paso 5 — Construir diseño incrementalmente

Aplica ediciones pequeñas y reversibles con run_code. Un script debe realizar una pequeña acción.

Nunca construyas una página completa, una región de nivel superior o un diseño de múltiples secciones en un solo script. No combines sondeo, creación, estilo y reordenamiento en la misma ejecución. Mantén los scripts planos: inicializa, busca el destino por ID, realiza una mutación, registra JSON. Evita funciones auxiliares profundas, IIFEs anidadas y árboles de control largos.

Construye de afuera hacia adentro:

Frame de página y fondo.
Contenedores de región de nivel superior del plano de capas.
Configuraciones de stack para cada región antes de los hijos detallados.
Texto, formas e instancias de símbolo dentro de cada región en pequeños lotes hermanos.
Regiones fijas/ancladas después de que la estructura padre sea correcta.

Construye una región de nivel superior a la vez. Después del lote de contenido de cada región:

Toma get_screenshot del frame al ancho de anclaje de referencia.
Compara esa banda de región con la referencia anclada — enumera las diferencias usando la taxonomía en references/validation.md.
Corrige las discrepancias principales antes de comenzar la siguiente región.

Después de ediciones estructurales, vuelve a consultar con get_layer_tree_summary o captura una captura de pantalla del frame. Para patrones seguros de reordenar/reparentar, lee references/editing-patterns.md.

Paso 6 — Símbolos, recursos y anulaciones

Usa símbolos existentes del documento/biblioteca antes de dibujar grupos de capas únicos repetidos. La UI repetida normalmente debería convertirse en un símbolo maestro con instancias y anulaciones.

Antes de dibujar formas detalladas, clasifica cada elemento visual no textual. Exporta/importa fotos, capturas de pantalla, ilustraciones, SVGs complejos, imágenes de producto, marcas, iconos detallados, degradados y ruido como recursos SVG/PNG/imagen. Recrea solo primitivas de UI simples, vectores editables simples, divisores, píldoras y formas básicas en Sketch.

Para iconos/logos/imágenes, establece el diseño con marcadores de posición simples primero, luego importa/asigna recursos de imagen reales una vez que la geometría y el orden del stack sean estables. Prefiere anulaciones de imagen de símbolo en capas dedicadas para recursos repetidos.

Para patrones de anulación de símbolo, lee references/symbols.md. Para detalles de importación/exportación, llama a get_guide con topic: "assets".

Paso 7 — Solo correcciones dirigidas

Cuando el usuario informe un problema o la comparación de capturas de pantalla muestre una discrepancia:

Inspecciona la capa actual con get_layer_tree_summary o una sonda dirigida antes de mutar.
Cambia solo la propiedad informada: un valor de frame, estilo de texto, color, orden de capa, propiedad de stack o anulación.
Vuelve a capturar la pantalla y confirma que los recuentos de hijos no hayan cambiado a menos que la eliminación fuera intencional.

Si el diseño se rompe o se pierden capas, dilo inmediatamente e indica al usuario que deshaga/revierta antes de continuar.

Paso 8 — Validación final y entrega

No afirmes que está completo hasta que se cumplan los criterios de finalización — consulta references/validation.md → Criterios de finalización.

Captura una get_screenshot de todo el frame al ancho de anclaje de referencia.
Ejecuta la puerta de región para cada banda en la especificación de fidelidad contra la captura de pantalla de anclaje de referencia.
Si queda alguna diferencia importante, vuelve al Paso 7 e itera. No entregues con diseños "suficientemente cercanos".
Resume los símbolos utilizados, tokens/estilos creados, nombre e ID del artboard/frame de destino, regiones verificadas y cualquier diferencia menor restante.
No ejecutes zoomToFitCanvas hasta que la tarea esté completa.

Reglas

Reglas específicas de dirección para Sketch → diseño. Las reglas genéricas de MCP/script provienen de get_guide con topic: "mcp" y las reglas de contenido de Sketch provienen de get_guide con topic: "use".

Parchea, no reconstruyas. Si el contenido existe, corrige frames, estilos, anulaciones u orden en lugar de eliminar y recrear regiones principales.
Verifica los recuentos de hijos antes y después de operaciones de reordenar, reparentar, agregar o eliminar.
Nunca asignes parent.layers = [...]; usa layer.index para reordenar y child.parent = newParent para reparentar.
Coincide con la estructura de regiones de la referencia; el mismo contenido visual debe tener la misma relación padre/hermano a menos que haya una razón deliberada para desviarse.
Captura una captura de pantalla después de cada lote significativo y usa las diferencias de la captura para elegir la siguiente edición.
El diseño estructurado usa stacks por defecto. Si los hermanos se comportan como contenido flex, grid, lista, formulario, navegación o tarjeta en la referencia, crea o conserva un stack de Sketch en lugar de posicionar manualmente cada hijo.
Los recursos son recursos. No redibujes arte complejo, fotos, capturas de pantalla o marcas como aproximaciones vectoriales de baja fidelidad; exporta/importa o asigna recursos de imagen/SVG.
No adivines. No inventes diseño, copia, colores, espaciado o recursos de la memoria o patrones genéricos de UI. Extrae de la referencia; si falta un valor, vuelve a obtenerlo o pregunta al usuario.
Anclaje de referencia siempre. Compara la salida de Sketch con la captura de pantalla de referencia capturada, no con tu recuerdo de la página.
Puerta de finalización. No te detengas porque las secciones existan o la página "se vea similar". Detente cuando se superen los criterios de finalización de references/validation.md.

Dificultades comunes

Recrear la página para corregir una pequeña discrepancia desperdicia trabajo ajustado e introduce nuevos errores. Haz ediciones quirúrgicas basadas en las diferencias de las capturas de pantalla.
Colocar imágenes directamente en instancias de símbolo puede romper la jerarquía o fallar en la API. Pon las capas de imagen en el maestro y controla anulaciones de imagen por instancia.
Saltar las capturas de pantalla oculta errores de diseño, orden y color. Captura una captura de pantalla de cada lote.
Reordenar con parent.layers = [...] puede eliminar hijos o duplicar IDs de objeto. Usa patrones seguros de reordenamiento.
El orden del stack puede parecer invertido si se malinterpretan el índice y la dirección de empaquetado. Usa get_guide con topic: "layout" y verifica con captura de pantalla.
Los scripts de página o región completa son difíciles de validar, depurar y recuperar. Divide por región, configuración de stack y pequeños lotes hermanos.
El diseño estructurado construido con frames manuales se desvía cuando cambia el espaciado o el orden. Usa stacks de Sketch para filas, columnas, listas, formularios, navegaciones, tarjetas y regiones repetidas.
El arte complejo reconstruido como formas primitivas produce aproximaciones de baja calidad. Exporta/importa SVG/PNG o usa anulaciones de imagen; reserva las formas para primitivas de UI simples.
Las capturas de pantalla de página solo en la primera pintura pueden omitir imágenes perezosas y estados de UI activados por desplazamiento. Usa herramientas de navegador o agente, desplázate para activar el contenido, luego captura el viewport objetivo.
Finalización prematura: el agente agrega encabezado/cuerpo/pie de página con estilo genérico y se detiene. Ejecuta la puerta de región y los criterios de finalización; sigue corrigiendo hasta que las diferencias principales desaparezcan.
Copia y colores improvisados: encabezados parafraseados, relleno tipo lorem o grises/azules predeterminados en lugar de valores extraídos. Usa la especificación de fidelidad literal; vuelve a muestrear los colores de la referencia.
Permanencia de marcadores de posición: cajas grises dejadas como "logos" o "imágenes de héroe". Exporta/importa recursos reales antes de la entrega a menos que el usuario haya solicitado marcadores de posición.

Solución de problemas

Para fallos de puente/llamada a herramienta, errores de analizador, problemas de conexión MCP o fallos de captura de pantalla, llama a get_guide con topic: "troubleshooting" antes de reintentar.

Para fallos de operación de documento:

Problemas de diseño/stack/orden → get_guide con topic: "layout".
Problemas de anulación de símbolo → get_guide con topic: "symbols".
Problemas de exportación/importación/imagen → get_guide con topic: "assets".

Síntomas de construcción de diseño

El recuento de hijos disminuyó después de un script: indica al usuario que deshaga, luego inspecciona la operación. No repitas una asignación masiva de capas.
get_screenshot está vacío o es incorrecto: vuelve a resolver el ID del frame/capa, luego captura la página o el frame padre si es necesario.
La anulación de símbolo no tiene efecto: vuelve a obtener get_symbol_overrides, reconstruye el ID de anulación desde commonOverrideIDPrefix + '_' + property, luego captura la pantalla.
El texto se superpone en un stack de filas: inspecciona el orden de los hijos y el espacio; corrige una propiedad de stack o un índice de hijo a la vez.

Referencias

get_guide con topic: "mcp" — herramientas MCP, run_code, solución de problemas, verificación visual y reglas de finalización
get_guide con topic: "use" — edición en Sketch, stacks, símbolos, estilos, anulaciones, recursos y verificación de contenido
get_guide con topic: "layout" — stacks, colocación en página, dimensionamiento, pines, tipos de contenedor, reordenar/reparentar y desviación de diseño
Extracción de referencia
Patrones seguros de edición
Patrones de anulación de símbolo
Bucle de validación
API de JavaScript de Sketch
StackLayout
Anulaciones de símbolo (confirma mediante get_symbol_overrides en MCP)

madsouris/sketch-diseño-desde-referencia

¿Qué es sketch-diseño-desde-referencia?

Preguntar en tu IA favorita

Documentación