Communitygithub.com

design-inspo

Encuentra inspiración de diseño en sitios de galerías seleccionadas. Úsalo cuando un usuario necesite referencias de UI/UX, ejemplos de diseño o inspiración para componentes específicos (barras de navegación, CTAs, secciones de héroe, páginas de aterrizaje, etc.), sitios web completos, productos SaaS, aplicaciones móviles, animaciones, iconos, branding o sistemas de diseño. Ayuda a elegir la fuente de inspiración adecuada y a navegar por los ejemplos.

¿Qué es design-inspo?

Esta habilidad, design-inspo, ayuda a desarrolladores y agentes de IA a encontrar rápidamente inspiración de diseño de alta calidad dirigiendo las consultas de los usuarios a las galerías seleccionadas más adecuadas. Está diseñada para su uso con herramientas de IA como Claude Code, Cursor o Codex, y agiliza la investigación de diseño al correlacionar la necesidad del usuario (por ejemplo, un componente específico como una barra de navegación o un tipo de página como una página de aterrizaje) con una galería curada de forma óptima. La habilidad mantiene un catálogo de sitios populares como Curated Design, Landing Love y Mobbin, y ofrece recomendaciones de 1 a 3 sitios priorizando los más específicos para la consulta. También incluye flujos de trabajo prácticos para navegar por estos sitios usando una herramienta de navegador, tomar capturas de pantalla de ejemplos y manejar escenarios donde múltiples galerías son relevantes, por ejemplo, combinando curated.design y landing.love para diseños de página completa. La habilidad está respaldada por un archivo de catálogo extendido en 'references/catalog.md' para obtener más detalles.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/unisone/openclaw-skill-suite/tree/main/skills/design-inspo

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Inspiración de Diseño

Dirige la investigación de diseño a la galería seleccionada adecuada según lo que necesite el usuario.

Consulta Rápida

NecesidadSitioURL
Diseño web (general)Curated Designcurated.design
Páginas de aterrizajeLanding Lovelanding.love
Sitios web SaaSSaasposaaspo.com
Barras de navegación / navegaciónNavbar Gallerynavbar.gallery
Secciones CTACTA Gallerycta.gallery
Animaciones / movimientoApp Motionappmotion.design
Apps móviles (iOS/Web)Mobbinmobbin.com
Rebranding / brandingRebrand Galleryrebrand.gallery
IconosHuge Iconshugeicons.com
Sistemas de diseño / componentesComponent Gallerycomponent.gallery
Secciones de héroeHero Captureherocapture.com
Iconos 3DIcoonicoon.co

Cómo Usarlo

  1. Identifica el elemento de diseño para el que el usuario necesita inspiración
  2. Recomienda de 1 a 3 sitios del catálogo anterior (el más específico primero)
  3. Abre el sitio mediante la herramienta de navegador si el usuario quiere explorar ejemplos en vivo
  4. Captura ejemplos específicos cuando el usuario quiera guardar referencias visuales

Navegando por los Sitios

Usa la herramienta de navegador para navegar y capturar galerías:

navegador → navegar a la URL del sitio
navegador → capturar para encontrar ejemplos
navegador → hacer captura de pantalla para capturar diseños específicos

Para Mobbin (requiere cuenta para acceso completo), Navbar Gallery y Component Gallery — estos tienen categorías estructuradas que se pueden navegar mediante su interfaz de barra lateral/filtro.

Cuando Aplican Múltiples Sitios

  • Diseño de página completa → curated.design + landing.love
  • Componente específico → navbar.gallery / cta.gallery / component.gallery
  • Prioridad móvil → mobbin.com
  • Movimiento/interacción → appmotion.design (si está disponible) + landing.love (tiene grabaciones de video)
  • Identidad de marca → rebrand.gallery
  • Búsqueda de iconos → hugeicons.com (2D) + icoon.co (3D)

Catálogo Extendido

Para sitios adicionales y descripciones detalladas, consulta references/catalog.md.

Individual skills in this repo

This repo contains 10 individual skills — each has its own dedicated page.

astra-operator

Delegate computer-use and browser tasks to OpenAI

graphrag

Build a GraphRAG pipeline over documents. Use when plain vector search returns chunks without connections, when questions need multi-hop reasoning (

mundane-demos

Demo strategy that leads with mundane real-life utility instead of benchmarks. Use when presenting an AI agent or product to non-technical audiences. Covers picking tasks the viewer did this morning, showing end-to-end completion, and letting speed be the wow factor.

release-notes

Generate polished release notes from git history. Use when cutting a release, before publishing a GitHub release, or when you need a changelog from commits between two tags. Groups changes by type, surfaces breaking changes, and drafts highlights.

remotion-product-demos

Create Apple-keynote-quality product demo videos with Remotion. Covers glass phone mockups, floating 3D spheres, typing animations, card UIs, ripple effects, and smooth scene transitions. Use when asked to create product demos, app showcase videos, UI walkthrough animations, or

repo-security-scan

Scan a repository for high-signal security issues and produce a report. Use when auditing a codebase for leaked secrets or vulnerable dependencies, before a release, or when onboarding an unfamiliar repo. Runs gitleaks secret scanning and osv-scanner dependency checks.

secure-agent-design

Security architecture patterns for personal AI agents that touch real accounts. Use when designing an agent with access to inbox, calendar, finances, or shopping. Covers per-user isolated VMs, pre-action sentinel checks, least-privilege connectors, human approval gates, and single-use payment credentials.

testimonial-launch

Turn user testimonials into launch distribution. Use when launching a product or feature and you want real user proof to carry the announcement instead of marketing copy. Covers soliciting specific testimonials, curating them, and amplifying via quote-posts.

unisone/openclaw-skill-suite

Create Apple-keynote-quality product demo videos with Remotion. Covers glass phone mockups, floating 3D spheres, typing animations, card UIs, ripple effects, and smooth scene transitions. Use when asked to create product demos, app showcase videos, UI walkthrough animations, or

validator-quotes

Earn and deploy third-party validator quotes for a launch. Use when you need credibility beyond your own claims. Covers who to approach, how to get honest reactions, and how to amplify them via quote-posts, based on the founder/CEO validators behind the Muse launch.

Skills relacionados