HTML funcional, no mockups
Abre el archivo, navega por él y despliégalo. Sin herramientas de diseño de por medio.
Landing pages y sitios de producto · Portafolios y sitios personales · Tiendas online y dashboards
Skills de diseño web para agentes de IA
Plantillas de diseño web que tu agente convierte en HTML funcional: landing pages completas, portafolios y dashboards, o una sola sección de Hero, precios o testimonios.
Funciona en
Elige una Skill de página web para empezar
Qué hacen las Skills de diseño web
Todas las Skills de aquí terminan en un archivo que puedes abrir en el navegador.
Sitios completos o secciones sueltas
Sitios de varias páginas, o una sola sección de Hero, testimonios o gráfico para insertar en una página que ya tienes.
Responsive por defecto
Las maquetaciones se prueban en anchos de escritorio y móvil antes de publicarse.
Encuentra Skills de página web para tu rol
Cada página de rol selecciona las Skills que mejor encajan con ese trabajo.
FundadorSitios de producto, pitch decks y videos de lanzamiento antes de la primera contratación.
DiseñadorUn sistema de diseño que tu agente repite, para que tú te ocupes de los detalles.
Profesional de marketingPáginas de campaña, videos de lanzamiento e imágenes para redes a partir de un solo brief.
Vendedor de ecommercePáginas de tienda, pósteres y videos promocionales para cada nuevo producto.Cómo crear una página web con una Skill
Tres pasos en Claude Code, Codex o Cursor. Sin necesidad de apps de diseño.
- 1
Pega el prompt de instalación
Copia el prompt de instalación en tu agente o ejecuta el comando de abajo. La Skill se guarda en la carpeta de skills de tu agente.
npx skillry-cli@latest install bs-testimonial-masonry-wall - 2
Llámala con una barra
Escribe una barra y el nombre de la Skill, y luego di lo que quieres con tus propias palabras.
/bs-testimonial-masonry-wall Crea una landing page responsive a partir de este brief, los textos y el kit de marca. - 3
Revisa y entrega
Abre el archivo que ha creado, pide cambios en el mismo chat y luego publícalo o entrégalo.
index.html
¿Por qué usar una Skill de página web en lugar de un prompt?
Un prompt puede crear una página. Una Skill web añade base en el producto, interacción responsive, validación y una entrega mantenible.
| Aspecto | Un prompt a secas | Una Skill |
|---|---|---|
| Contenido | Rellena una plantilla conocida con texto de relleno | Construye la página en torno a tu audiencia real, los datos del producto y las pruebas |
| Interacción | Dibuja botones y pestañas que solo parecen correctos | Conecta estados reales, navegación y gestión de errores |
| Entrega | Devuelve código que parece terminado | Sigue tu stack, enumera las dependencias y comprueba el uso en móvil y con teclado |
Lo que puedes crear con una Skill de diseño web
- 01Landing pages para un lanzamiento o una campañaConvierte tus textos e imágenes en una página con secciones claras y un botón de registro o de compra.
- 02Prototipos clicablesMaqueta pantallas y botones reales para que tu equipo pueda probar el producto antes de construirlo.
- 03DashboardsOrganiza cifras, tablas y gráficos para que sean fáciles de leer en cualquier pantalla.
- 04Piezas de página reutilizablesBotones, tarjetas y maquetaciones con un mismo estilo, para que las páginas nuevas combinen con las que ya tienes.
Cómo elegir una Skill de diseño web
- 1Elige un estilo que encaje con tu productoSaaS, portafolio, tienda o página de evento: elige el aspecto que encaje con lo que estás construyendo.
- 2Prueba el ejemplo en vivoCada página de Skill tiene un sitio de ejemplo funcional por el que puedes navegar, en escritorio y en móvil.
- 3Descárgala y pruébalaInstálala en tu agente y crea una página con tu propio contenido. Lo sabrás en minutos.
Todas las Skills, un solo plan
Instala cualquier Skill de esta página y todas las nuevas que añadamos. Cancela cuando quieras.
Cancela cuando quieras
Mensual
9,99 US$ / mes
Acceso Premium completo, con facturación mensual.
- Acceso a todas las Skills Premium
- Instala desde la web o la CLI
- Acceso seguro por CLI autorizado en el navegador
- Actualizaciones continuas de Skills
- Nuevas Skills Premium incluidas
- Cancela cuando lo necesites
Ahorra un 34% al año
El más popularAnual
79 US$ / año
Acceso Premium completo a un precio anual más bajo.
- Acceso a todas las Skills Premium
- Instala desde la web o la CLI
- Acceso seguro por CLI autorizado en el navegador
- Actualizaciones continuas de Skills
- Nuevas Skills Premium incluidas
- Cancela cuando lo necesites
Pago único · Precio fundador
Oferta fundadorVitalicio fundador
169 US$ pago único
Precio fundador: sube a medida que crece la biblioteca.
- Acceso a todas las Skills Premium
- Instala desde la web o la CLI
- Acceso seguro por CLI autorizado en el navegador
- Actualizaciones continuas de Skills
- Nuevas Skills Premium incluidas
- Sin suscripción ni cargos de renovación
Cancela cuando quieras. Los pagos son no reembolsables.
Preguntas frecuentes sobre Skills de Página web
¿Puedo usar una Skill web en mi proyecto actual?
Sí, si la Skill indica que se adapta a tu proyecto. Si no, entrega una página independiente y tú planificas la integración.
¿Recibo HTML editable o solo una vista previa?
Código editable. Tu agente escribe los archivos HTML por ti, y la lista «Lo que obtienes» de la página de detalle indica los archivos, recursos y pasos de ejecución exactos.
¿Están conectados los pagos y la analítica?
No, a menos que la página de detalle lo indique. Un botón de pago o un gráfico en el diseño es solo UI hasta que conectes tu propio servicio.
¿Qué debo comprobar antes de publicar la página?
Haz clic en cada control y luego prueba la página en anchos de escritorio y de móvil, solo con teclado y con el movimiento reducido activado. Comprueba también los textos largos, los estados de error y cualquier función de exportación o sin conexión que prometa la Skill.
Explora otros tipos de resultado
Encuentra la Skill adecuada para tu próxima página web
Landing pages, sitios y páginas interactivas como HTML funcional.
Explorar todas las Skills