Communitygithub.com

design-inspo

Encontre inspiração de design em galerias curadas. Use quando o usuário precisar de referências de UI/UX, exemplos de design ou inspiração para componentes específicos (navbars, CTAs, seções hero, landing pages, etc.), sites completos, produtos SaaS, aplicativos móveis, animações, ícones, branding ou sistemas de design. Ajuda a selecionar a fonte de inspiração correta e navegar pelos exemplos.

O que é design-inspo?

Esta skill de inspiração de design, chamada `design-inspo`, atua como um guia de curadoria para desenvolvedores e designers que precisam de referências visuais rápidas. Ela mapeia as necessidades do usuário (como 'preciso de exemplos de navbar' ou 'quero ver landing pages') para galerias especializadas como `navbar.gallery`, `landing.love` e `saaspo.com`. A skill recomenda de 1 a 3 sites específicos com base no tipo de elemento (componente, página inteira, mobile, motion, branding, ícones, etc.), abrindo os sites no navegador e capturando screenshots de exemplos relevantes. Suporta plataformas como Claude Code, Cursor e Codex, e seu funcionamento é simples: identificar o elemento desejado, sugerir as galerias mais adequadas, navegar com a ferramenta de browser e registrar exemplos visuais. Quando o usuário precisa de inspiração para componentes específicos, ela prioriza sites como `navbar.gallery` ou `cta.gallery`; para páginas completas, recomenda `curated.design` e `landing.love`; para motion, `appmotion.design`; e para mobile-first, `mobbin.com`. A skill também fornece um catálogo estendido em `references/catalog.md` para mais opções.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Inspiração de Design

Direcione a pesquisa de design para a galeria curada certa com base no que o usuário precisa.

Consulta Rápida

NecessidadeSiteURL
Design web (geral)Curated Designcurated.design
Landing pagesLanding Lovelanding.love
Sites SaaSSaasposaaspo.com
Navbars / navegaçãoNavbar Gallerynavbar.gallery
Seções CTACTA Gallerycta.gallery
Animações / movimentoApp Motionappmotion.design
Aplicativos móveis (iOS/Web)Mobbinmobbin.com
Rebrands / brandingRebrand Galleryrebrand.gallery
ÍconesHuge Iconshugeicons.com
Sistemas de design / componentesComponent Gallerycomponent.gallery
Seções heroHero Captureherocapture.com
Ícones 3DIcoonicoon.co

Como Usar

  1. Identifique o elemento de design para o qual o usuário precisa de inspiração
  2. Recomende de 1 a 3 sites do catálogo acima (o mais específico primeiro)
  3. Abra o site por meio da ferramenta de navegador, se o usuário quiser navegar por exemplos ao vivo
  4. Capture screenshots de exemplos específicos quando o usuário quiser referências visuais salvas

Navegando nos Sites

Use a ferramenta de navegador para navegar e capturar screenshots das galerias:

browser → navegar até a URL do site
browser → snapshot para encontrar exemplos
browser → screenshot para capturar designs específicos

Para Mobbin (requer conta para acesso completo), Navbar Gallery e Component Gallery — estes possuem categorias estruturadas que podem ser navegadas por meio da interface de sidebar/filtros.

Quando Vários Sites se Aplicam

  • Design de página completa → curated.design + landing.love
  • Componente específico → navbar.gallery / cta.gallery / component.gallery
  • Mobile-first → mobbin.com
  • Movimento/interação → appmotion.design (se disponível) + landing.love (tem gravações de vídeo)
  • Identidade de marca → rebrand.gallery
  • Pesquisa de ícones → hugeicons.com (2D) + icoon.co (3D)

Catálogo Estendido

Para sites adicionais e descrições detalhadas, consulte 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.

Habilidades Relacionadas