El botón ya existe. Aun así, un agente de IA crea uno nuevo con su propio color, un espaciado distinto y una variante adicional. En la captura de pantalla, la réplica parece similar. En el proyecto, sin embargo, ha aparecido un segundo componente que a partir de ahora habría que mantener por separado. El problema no es solo la comprensión de imágenes, sino la falta de identidad del componente.
Figma Code Connect vincula los componentes de diseño con sus equivalentes en el código y hace que estas relaciones se puedan usar en Dev Mode y MCP. La documentación actual describe así una vía concreta para el contexto. No demuestra ninguna mejora generalizada de calidad ni de costes. Nuestra pregunta es: ¿qué información necesita un agente para reutilizar de verdad el botón existente?
La variante es un contrato
Nuestro propio componente de ejemplo se llama QuietButton. Tiene una apariencia primaria y otra secundaria, además de un estado deshabilitado. La instrucción no es «Construye algo parecido», sino «Usa este componente en una configuración permitida». Suena obvio, pero exige una relación precisa entre diseño y código.
Design: understated action button
Code: QuietButton
Allowed variant: secondary
Label: View details
State: enabledEsta tarjeta es un esquema de mapeo propio, no un archivo de configuración de Code Connect. Hace visible dónde un agente tendría que adivinar de otro modo. Un valor que suena parecido, como «quiet», no es automáticamente un parámetro válido si el componente real espera «secondary».
Lo mismo ocurre con el contenido y el estado. Un botón atenuado por motivos decorativos puede implementarse de forma distinta a un control que está realmente deshabilitado. Por eso, la impresión visual por sí sola no basta para el mapeo técnico.
Un pequeño ejemplo real es mejor que una larga descripción de estilo
Junto con el mapeo, dale al agente un uso existente. Para un componente HTML sencillo, podría tener este aspecto:
<button class="action action--secondary" type="button">
View details
</button>Las clases pertenecen a nuestro ejemplo. Qué reglas de CSS llevan es algo que debe determinar tu propio proyecto. El valor añadido es que no se espera que el agente invente primero una estructura nueva. Recibe un punto de partida concreto con cambios limitados.
Un complemento útil nombra lo que debe conservarse: el mismo componente, las variantes válidas, el manejo por teclado existente y el propósito real de la acción. Una amplia colección de material con ejemplos contradictorios podría ayudar menos que un extracto breve y actual.
Los mapeos desactualizados pueden resultar muy convincentes
Supongamos que el proyecto cambia el nombre de una propiedad. El mapeo antiguo sigue siendo comprensible y está bien formateado. Para el agente es un contexto plausible, pero técnicamente erróneo. Por eso, la conexión con el código actual también tiene que mantenerse.
Para revisar de forma práctica lo que ya tienes, elige tres componentes de uso frecuente. Anota un uso real de cada uno y sus variantes permitidas. Compara estos detalles con el código actual antes de publicar un mapeo nuevo. Este ejercicio sugerido no afirma que ya se haya realizado una revisión del repositorio ni que una ejecución de IA haya sido superada.
Un contraejemplo afina el mapeo: ¿qué debería pasar si el diseño pide una variante que el componente no tiene en absoluto? En lugar de inventar discretamente un botón nuevo, la implementación debería señalar esta carencia. Así, el contexto que falta se convierte en una decisión de diseño deliberada que puede tomarse en el proyecto real.
Los valores de marca complementan el componente, pero no lo sustituyen
Si reutilizas un componente de página propio en KENJTEC, la hoja de marca de KENJTEC BrandStudio ai puede aportar colores, fuentes y formas concretos. Aplica estos valores de forma deliberada al ejemplo HTML/CSS existente, en lugar de dejar que el componente se reinvente solo a partir de una imagen.
Después, tu propio HTML, CSS y JavaScript pueden prepararse manualmente en el modo de desarrollador de KENJTEC WebSiteBuilder ai, verse por separado en la vista previa y publicarse como código personalizado. Esto no implica una importación automática de Code Connect ni alojamiento de aplicaciones React. El mapeo permanece en tu flujo de desarrollo externo.
La lección técnica es transferible: un sistema de diseño no consiste solo en formas parecidas. Necesita relaciones verificables entre las variantes visibles y los componentes reales. Cuanto más concretas sean estas relaciones, menos tendrá que adivinar un agente y más fácil será evaluar su resultado frente al proyecto existente.
Fuentes y estado
Investigación y documentación a fecha de 25 de octubre de 2026. Code Connect: Introduction.
