Communitygithub.com

设计灵感

从精心策划的画廊网站中寻找设计灵感。当用户需要 UI/UX 参考、设计范例或特定组件(导航栏、CTA、Hero 区、落地页等)、完整网站、SaaS 产品、移动应用、动效、图标、品牌或设计系统的灵感时使用。帮助选择合适的灵感来源并浏览示例。

设计灵感 是什么?

该技能旨在帮助用户从一系列精选的设计画廊网站中高效获取 UI/UX 灵感。它支持 Claude Code、Cursor、Codex 等 AI 代理平台,通过一个结构化的快速查找表(覆盖通用网页设计、落地页、SaaS 网站、导航栏、CTA、动效、移动应用、品牌重塑、图标、设计系统、Hero 区及 3D 图标)来精准定位最合适的灵感来源。其工作流程包括:识别用户所需的设计元素、推荐 1-3 个最具体的网站、使用浏览器工具导航并截图以提供视觉参考。对于多需求场景(如页面设计、组件、移动优先、动效等),技能还提供组合推荐策略,并附有扩展目录的引用,以实现全面的灵感覆盖。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

设计灵感 是做什么的?

根据用户需求,将设计调研导向合适的精品画廊。

快速查找

需求网站链接
网页设计(通用)Curated Designcurated.design
落地页Landing Lovelanding.love
SaaS 网站Saasposaaspo.com
导航栏 / 导航Navbar Gallerynavbar.gallery
CTA 区域CTA Gallerycta.gallery
动效 / 运动设计App Motionappmotion.design
移动应用(iOS/Web)Mobbinmobbin.com
品牌重塑 / 品牌设计Rebrand Galleryrebrand.gallery
图标Huge Iconshugeicons.com
设计系统 / 组件Component Gallerycomponent.gallery
Hero 区域Hero Captureherocapture.com
3D 图标Icoonicoon.co

使用方法

  1. 识别用户需要灵感的设计元素
  2. 推荐上述列表中的 1-3 个网站(优先推荐最具体的)
  3. 打开网站:如果用户想浏览实时示例,则通过浏览器工具打开
  4. 截图具体示例:当用户需要保存视觉参考时,截图保存

浏览网站

使用浏览器工具导航并截图画廊内容:

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

对于 Mobbin(需要账号才能完全访问)、Navbar Gallery 和 Component Gallery——这些网站具有结构化的分类,可以通过其侧边栏/筛选界面进行导航。

多网站适用场景

  • 完整页面设计 → curated.design + landing.love
  • 特定组件 → navbar.gallery / cta.gallery / component.gallery
  • 移动优先 → mobbin.com
  • 动效/交互 → appmotion.design(如可用)+ landing.love(有视频录制)
  • 品牌形象 → rebrand.gallery
  • 图标搜索 → hugeicons.com(2D)+ icoon.co(3D)

扩展目录

更多网站及详细说明,请参阅 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.

相关技能