Tokens de diseño
Sustituye colores y espacios dispersos por tokens de diseño.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}- Modelos
- Configura un endpoint compatible con OpenAI o Anthropic usando la URL base y, si hace falta, una clave API. Prueba la conexión. Un servidor local debe estar en ejecución; las herramientas remotas pueden enviar datos por separado.
- Proyecto
- Comprueba tema oscuro y foco del teclado para no ocultar un problema de contraste.
- Revisa antes de aplicar
- Compara el comportamiento real con el resultado esperado. Si una prueba falla, investiga la causa antes de hacer más cambios.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}Lleva una decisión de diseño a un código de interfaz que funcione
Los comentarios de diseño se vuelven aplicables cuando nombran una interacción además de una apariencia. Mith DesignLab es un espacio de programación para Windows que permite convertir esos comentarios en cambios que puedes inspeccionar en tu proyecto de interfaz. Describe el elemento, el diseño que lo rodea y qué debe ocurrir cuando alguien llega a él. La conversación podrá abordar entonces los estilos y el comportamiento que producen la experiencia.
La variable de estilo del contorno de foco que se muestra aquí es un posible ejemplo de proyecto. Podrías pedir al asistente que inspeccione qué botones y enlaces la usan, proponga un ajuste acotado y explique los selectores afectados. Revisa el CSS real antes de comprobar la interfaz renderizada mediante navegación por teclado. Un valor de color de ejemplo no demuestra que todos los fondos, componentes o interacciones sean accesibles, y no implica ninguna certificación automática de diseño.
Conecta el modelo que elijas mediante un endpoint compatible con OpenAI o de Anthropic admitido, añadiendo credenciales cuando se requieran. Las opciones de IA sin censura se refieren a modelos disponibles en ese endpoint; las restricciones, herramientas y capacidad de contexto dependen del modelo y del servidor. Tras revisar los cambios propuestos, ejecuta las comprobaciones pertinentes del proyecto e inspecciona los estados afectados en tu navegador. Vincula la aceptación visual a la interfaz que las personas usarán realmente.
Trabaja a partir de comentarios de diseño
¿Qué comentario resulta más útil que pedir que se vea mejor?
Nombra el componente, el estado y el problema observable. Por ejemplo, explica que el foco del teclado deja de distinguirse sobre un panel concreto. Incluye los estilos pertinentes y un comportamiento objetivo para que el cambio propuesto tenga una condición de aceptación concreta.
¿El ejemplo de contorno de foco verifica la accesibilidad?
No. Ilustra CSS que podrías inspeccionar o adaptar. Comprueba el resultado renderizado frente a los colores circundantes, el comportamiento del teclado y los requisitos del proyecto. Una sola variable de estilo no demuestra la accesibilidad de una interfaz o sistema de componentes completo.
¿Cómo debo revisar un cambio en una variable de estilo compartida?
Localiza los componentes que la consumen e inspecciona sus estados afectados. Prueba más que el componente mencionado en la solicitud original. Los estilos compartidos pueden cambiar pantallas que, por lo demás, no están relacionadas, aunque el archivo editado sea pequeño.
¿Pueden los archivos de diseño privados mantenerse en una conexión de modelo local?
Un modelo local requiere un servidor separado en ejecución y solo define el destino de ese endpoint. Otras herramientas pueden enviar datos a otros lugares. Inspecciona esas conexiones y comparte solo el contexto de diseño necesario para explicar el cambio de código solicitado.
Mith DesignLab · Actualizado 2026-10-25