Define la pantalla antes de escribir código
Convierte los requisitos de tu página en un wireframe SVG. Revisa los campos, las acciones y la distribución; después trabaja el diseño visual con tu asistente de programación. Puedes empezar sin comprar un paquete de escenas.
Descarga sin iniciar sesión. Salida SVG estática; el asistente y el uso de modelos se pagan por separado.
De los requisitos a una estructura que puedes revisar
Primero decide qué necesita la página. Después ajusta tipografía, espaciado y color.
Este ejemplo de una herramienta para carteles de producto muestra el flujo gratuito sin paquetes de pago. Abre los dos SVG para ver cómo se mantienen los campos, la acción principal y los resultados.
Usa el skill ai-ui-designer. Diseña una herramienta para carteles de producto con nombre, argumentos de venta, selector de tamaño, botón para generar y cuadrícula de resultados.
Describe la tarea y los controles que necesita el usuario.
Descarga y descomprime el ZIP. Coloca la carpeta ai-ui-designer en el directorio de skills de tu instalación de Codex o Claude Code.
SKILL.md debe estar directamente dentro de ai-ui-designer. El paquete incluye instrucciones de diseño, referencias y scripts auxiliares.
Comprueba que al descomprimir no se haya creado una carpeta adicional.
Invoca el skill y explica qué página necesitas, para quién y con qué contenido.
Codex: $ai-ui-designer Claude Code: /ai-ui-designer Diseña un wireframe SVG para la página de inicio de mi producto con propuesta de valor, funciones y una acción de registro.
Revísalo en un navegador o visor SVG. Pide, por ejemplo, títulos más claros o más espacio alrededor del botón principal.
Si no aparece, revisa la ruta y SKILL.md. Codex detecta los cambios automáticamente; reinícialo si hace falta. En Claude Code, consulta el menú /.
Necesitas tu propio asistente y acceso a modelos. Los scripts locales para paquetes requieren Python 3.9 o posterior. Descargar paquetes opcionales de este sitio requiere una suscripción de pago activa.
Sitúa los bloques de contenido, campos y acciones en un wireframe en escala de grises.
Ajusta tipografía, espacios, colores e imágenes sin perder la distribución aprobada.
Guarda los SVG en tu proyecto y solicita revisiones conforme se definan los requisitos.
El skill incluye wireframes, diseño UI en color, aplicación de temas y gestión local de paquetes.
Los paquetes de escenas son referencias opcionales. No necesitas descargarlos para empezar.
Obtendrás archivos SVG y orientación de diseño. Los botones dibujados no ejecutan inicios de sesión, pagos ni generación de imágenes.
La aplicación se desarrolla en una tarea aparte. La disponibilidad del asistente y los costes del modelo dependen de cada herramienta.
Consulta las páginas, temas y recursos de diseño en la ficha del paquete.
Recurso opcional. La descarga requiere una suscripción de pago activa; el skill sigue siendo gratuito.
Descarga el skill de diseño UI, instálalo en tu asistente y convierte tus requisitos en un SVG que puedas revisar y afinar antes de desarrollar.
