Selección de Skillry
Suite SaaS Harborv1.0.2
Usa esta Skill para crear página web.
5.033 descargas0 me gusta1 guardados
$4.99
¿Qué obtengo al comprar esta Skill?Un prototipo completo de producto SaaS que parece un producto real y terminado: landing page, precios, inicio de sesión, un espacio de trabajo funcional y un back office de administración, más caso de cliente, changelog público y páginas legales. Todas las vistas comparten un diseño porcelana y verde azulado y un mismo estado de demo en vivo: los créditos gastados o los planes cambiados en un sitio se reflejan en todos. Las ventanas de producto se dibujan en código, con temas claro y oscuro.
Elegida con más frecuencia por
Actualizada el 3 oct 2026
Galería de vista previa
Skills similares
Ver todas las Skills
Lo que obtienes
- Vistas de landing page, precios, inicio de sesión, espacio de trabajo y administración, además de caso de cliente, changelog, páginas legales y 404, todas con rutas y un mismo estado de demo en vivo
- Un espacio de trabajo funcional para tu objeto principal: redacta, genera borradores con IA usando créditos, programa, gestiona suscriptores y ve cómo cada acción llega al feed de actividad de administración
- Tipografía Instrument Sans y Geist Mono, botones píldora verde azulado, tarjetas suaves, una paleta de comandos, temas claro y oscuro y fotos según el rol en un único archivo sin conexión
Ideal para
- Fundadores que presentan una idea SaaS y necesitan que todo el producto parezca real antes de que exista un backend
- Product managers que hacen recorridos para stakeholders o inversores por marketing, app y administración
- Desarrolladores indie que quieren un único sistema de diseño entre el sitio público y el producto con sesión iniciada
No es para
- Apps en producción con autenticación, pagos o datos reales; el inicio de sesión, el checkout y los créditos son simulaciones de front-end
- Landing pages sueltas; si solo necesitas una página de marketing, te conviene más una Skill de landing page
- Marcas de consumo llamativas y coloridas; Harbor es sereno y centrado en el producto, con un único acento verde azulado
Lanzamiento de producto y crecimiento de appsDiseño web y experiencias digitalesCrear página webCrear landing pageEstilo fijadoResultado editableEntrega rápidaPorcelana verde azuladoInterfaz en píldorasTarjetas elevadas suavesMockups con marco de ventanaUI clara y oscura
Acerca de esta Skill
Describe tu SaaS y obtén toda la superficie del producto de una vez: un sitio de marketing, precios, inicio de sesión, el espacio de trabajo donde se crea tu objeto principal y el back office que vigila el negocio. Todas las vistas comparten un diseño porcelana y verde azulado y un mismo estado de demo en vivo, así que una acción en la app aparece en la administración. Todo llega como un único archivo que se abre sin conexión en cualquier navegador.
Lo que obtienes
- Una landing page con una ventana de producto, pestañas de cómo funciona, un bento de funciones, un caso de cliente, citas, FAQ y una franja de registro
- Precios con selector de facturación, tarjetas de planes, un paquete de créditos y una tabla comparativa
- Un espacio de trabajo con sesión iniciada para redactar, programar, gestionar suscriptores y ajustes, y una vista de administración con gráfica de ingresos, selector de rango y tabla ordenable
- Caso de cliente, changelog público, páginas legales y 404, una paleta de comandos y temas claro y oscuro
- Fuentes y fotos incrustadas, para que la página no haga peticiones de red
Cómo usarlo
- Dile a la Skill el nombre de tu producto, qué crean los usuarios en él, de tres a seis funciones, la estructura de tus precios y las cifras que vigila el negocio.
- Renombra el espacio de trabajo, los paneles y las acciones según tu objeto principal, redacta el texto que falte y te lo enumera para que lo confirmes.
- Abre el archivo, inicia sesión en la demo, ejecuta la acción principal, revisa la vista de administración y pide cambios con tus palabras.
Las fotos nuevas salen de la herramienta de imágenes de tu agente, que puede tener sus propios cargos por uso.
Lo que necesitas antes de empezar
- Tú aportas
- Nombre del producto y su objeto principal, lo que los usuarios crean o gestionan · De tres a seis funciones, la estructura de tus precios y las tres o cuatro cifras que vigila el negocio · Un caso de cliente, además de fotos reales si el sitio muestra personas reales
- Dependencias
- Node.js 18 o superior en la máquina de tu agente, para ejecutar el script incluido que genera el archivo único sin conexión · Acceso a internet mientras se genera el archivo, para descargar las fuentes una vez e incrustarlas · Una herramienta de imágenes en tu agente para las fotos del inicio de sesión, el caso de cliente y los retratos; opcional si aportas las tuyas
- Costos externos
- Las fotos que no aportes se generan con la herramienta de imágenes de tu propio agente, que puede tener sus propios cargos de uso. Las ventanas de producto se dibujan en código y el archivo final no hace peticiones de red. Ver el ejemplo no cuesta nada.
- Última prueba
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Reseñas de usuarios
Cargando reseñas…