Archivos SVG que puedes editar
Cambia textos, formas y distribución. Conserva el paquete original como referencia y realiza las modificaciones en una copia de trabajo.
Diseño de servicios de imágenes IA · Paquete SVG
Plantillas UI para tu generador de imágenes IA: diseña el recorrido completo
Estas plantillas UI ayudan a desarrolladores independientes y equipos de producto a planificar algo más que la caja del prompt. Revisa cómo se conectan la generación, el historial y los planes. Después adapta los SVG con AI UI Designer Skill, gratuito para Codex o Claude Code, según los campos, textos y colores de tu servicio.
Incluido con una suscripción de pago activa. No se descuentan créditos.
Diseños SVG estáticos · Textos de ejemplo en chino · Sin código de aplicación
- Páginas de escritorio
- 6
- Temas de color
- 2
- Referencias móviles
- 2
- Fuentes editables
- SVG
Del primer prompt a la gestión de imágenes y planes
Comprueba qué ocurre antes y después de generar: cómo se accede al servicio, dónde se consultan los trabajos y cómo se presentan los planes. Cada página de escritorio incluye un wireframe en gris y diseños claro y oscuro.
Inicio del producto
Revisa cómo presentar la utilidad del servicio, sus ejemplos y el acceso a la generación.
Acceso y registro
Examina el formulario de acceso y consulta los campos de registro y errores en el tablero de estados.
Espacio de generación
Organiza prompt, modelo, proporciones, cantidad, coste en créditos y resultados.
Historial de imágenes
Planifica la búsqueda, los detalles, la reutilización de parámetros y la confirmación de borrado.
Planes y créditos
Consulta el saldo, los planes de ejemplo y los diseños del resultado de compra.
Ajustes de cuenta
Sitúa la edición del perfil, la confirmación de guardado y el cierre de sesión.
Las vistas previas muestran los textos chinos originales y datos ficticios. Los controles, formularios y pantallas de compra son diseños estáticos.
Planifica también las esperas, los errores y las pantallas vacías
El ZIP reúne páginas, componentes y notas del escenario para revisar la coherencia entre pantallas mientras adaptas el diseño.
Estructura antes que color
Se incluyen 2 archivos JSON de temas. Examina la jerarquía en los wireframes y elige después el diseño claro u oscuro para tu interfaz.
Componentes y estados de interfaz
Consulta botones, campos, selectores, tarjetas y diálogos, junto con diseños de generación en curso, historial vacío, créditos insuficientes, error de acceso y pago fallido.
Referencias móviles delimitadas
El espacio de generación y el historial están dibujados a 390px de ancho. El resto de páginas tiene indicaciones de comportamiento móvil en el escenario, sin diseños móviles independientes.
Importa el paquete y describe los cambios de tu producto
Utiliza el Skill gratuito para importar los archivos. Los scripts auxiliares requieren Python 3.9 o posterior.
- 1
Descarga el ZIP con tu suscripción
Inicia sesión con una suscripción de pago activa de AI UI Designer. Descargar el paquete no consume créditos de generación.
- 2
Indica al Skill dónde está el archivo
Instala AI UI Designer Skill en Codex o Claude Code. Facilita la ruta local del ZIP y pide al asistente que lo importe.
- 3
Adapta los campos y revisa el SVG
Elige tema y explica los cambios de contenido y distribución. Revisa el resultado y sigue ajustando la copia de trabajo, conservando los originales.
Ejemplo: un panel de creatividades para una tienda online
Usa el tema claro del paquete de generación de imágenes para diseñar un panel de banners de producto. Incluye campos para nombre y ventajas del producto y un selector de proporciones. Mantén la explicación del coste en créditos y las tarjetas de resultados. Entrega el diseño como SVG editable.
¿Partes de tus requisitos o de pantallas ya diseñadas?
El Skill gratuito permite diseñar desde tus requisitos, importar paquetes y aplicar temas. La suscripción de pago activa es necesaria para descargar este conjunto de páginas desde la web.
- Diseñar desde tus requisitos
- Skill gratuito · Gratis
- Importar paquetes y aplicar temas
- Skill gratuito · Gratis
- Descargar este conjunto de páginas
- Paquete de escenarios · Suscripción de pago activa
- Usar archivos descargados en local
- Paquete de escenarios · También tras finalizar la suscripción
FAQ
Archivos incluidos y condiciones de descarga
Aclara qué recibes como diseño y qué necesita desarrollo para funcionar.
Comprueba las pantallas antes de empezar a adaptarlas
Revisa las plantillas UI de generación, historial y planes. Si encajan con tu producto, descarga el paquete SVG con tu suscripción de pago activa y personalízalo con el Skill gratuito.
Descargar las plantillas SVGIncluido con una suscripción de pago activa. No se descuentan créditos.