Communitygithub.com

design-inspo

Find design inspiration from curated gallery sites. Use when a user needs UI/UX references, design examples, or inspiration for specific components (navbars, CTAs, hero sections, landing pages, etc.), full websites, SaaS products, mobile apps, animations, icons, branding, or design systems. Helps select the right inspiration source and browse examples.

design-inspo 是什麼?

design-inspo is a Claude Code agent skill that find design inspiration from curated gallery sites. Use when a user needs UI/UX references, design examples, or inspiration for specific components (navbars, CTAs, hero sections, landing pages, etc.), full websites, SaaS products, mobile apps, animations, icons, branding, or design systems. Helps select the right inspiration source and browse examples.

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Design Inspiration

Route design research to the right curated gallery based on what the user needs.

Quick Lookup

NeedSiteURL
Web design (general)Curated Designcurated.design
Landing pagesLanding Lovelanding.love
SaaS websitesSaasposaaspo.com
Navbars / navigationNavbar Gallerynavbar.gallery
CTA sectionsCTA Gallerycta.gallery
Animations / motionApp Motionappmotion.design
Mobile apps (iOS/Web)Mobbinmobbin.com
Rebrands / brandingRebrand Galleryrebrand.gallery
IconsHuge Iconshugeicons.com
Design systems / componentsComponent Gallerycomponent.gallery
Hero sectionsHero Captureherocapture.com
3D iconsIcoonicoon.co

How to Use

  1. Identify the design element the user needs inspiration for
  2. Recommend 1-3 sites from the catalog above (most specific first)
  3. Open the site via browser tool if the user wants to browse live examples
  4. Screenshot specific examples when the user wants visual references saved

Browsing Sites

Use the browser tool to navigate and screenshot galleries:

browser → navigate to site URL
browser → snapshot to find examples
browser → screenshot to capture specific designs

For Mobbin (requires account for full access), Navbar Gallery, and Component Gallery — these have structured categories that can be navigated via their sidebar/filter UI.

When Multiple Sites Apply

  • Full page design → curated.design + landing.love
  • Specific component → navbar.gallery / cta.gallery / component.gallery
  • Mobile-first → mobbin.com
  • Motion/interaction → appmotion.design (if available) + landing.love (has video recordings)
  • Brand identity → rebrand.gallery
  • Icon search → hugeicons.com (2D) + icoon.co (3D)

Extended Catalog

For additional sites and detailed descriptions, see 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 (

money-challenge

Design a public economic-outcome challenge for an AI product launch. Use when you want measurable proof that your agent creates or saves money. Covers the #musemoneychallenge mechanic: time-boxed, hashtag-tracked, user-submitted dollar outcomes with verification discipline.

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.

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.

相關技能