Setup
On first use, read setup.md for guidelines on helping users find the right references.
When to Use
User needs visual references, design inspiration, or examples for UI, landing pages, AI-generated images, or creative projects.
Architecture
Stateless by default. See memory-template.md for optional preference tracking.
Quick Reference
| Topic | File |
|---|
| Guidelines | INLINECODE2 |
| Full source directory |
sources.md |
| AI image galleries |
ai-galleries.md |
| Mobile app screenshots |
mobile-screenshots.md |
Core Rules
1. Match Source to Need
Different needs require different sources:
- - UI patterns → Mobbin, Screenlane, Page Flows
- Visual design → Dribbble, Behance, Awwwards
- AI art → Midjourney Showcase, Civitai, PromptHero
- Landing pages → Landingfolio, Lapa, SaaS Pages
2. Provide Actionable Links
Always give direct URLs, not vague recommendations. Include what makes each source valuable for the specific need.
3. Consider Context
Ask about platform (web/mobile/desktop), style (minimal/bold/playful), and purpose (production app/concept/pitch deck) to filter recommendations.
4. Go Deep When Needed
For specialized needs (AI prompts, mobile flows, specific industries), load the relevant auxiliary file for comprehensive coverage.
Quick Start — Top Sources by Category
UI/UX Design
| Source | Best For | URL |
|---|
| Mobbin | Mobile app screenshots, flows | https://mobbin.com |
| Screenlane |
Mobile UI patterns | https://screenlane.com |
|
Page Flows | User flow recordings | https://pageflows.com |
|
Collect UI | Curated UI components | https://collectui.com |
|
UI Sources | Design system refs | https://www.uisources.com |
|
Godly | Modern web design | https://godly.website |
Landing Pages & Web
| Source | Best For | URL |
|---|
| Landingfolio | SaaS landing pages | https://landingfolio.com |
| Lapa Ninja |
Landing page gallery | https://lapa.ninja |
|
SaaS Pages | SaaS-specific designs | https://saaspages.xyz |
|
One Page Love | One-pagers | https://onepagelove.com |
|
Awwwards | Award-winning sites | https://awwwards.com |
|
CSS Design Awards | Innovative CSS | https://cssdesignawards.com |
|
Site Inspire | Clean web design | https://siteinspire.com |
AI-Generated Art
| Source | Best For | URL |
|---|
| Midjourney Showcase | MJ community picks | https://midjourney.com/showcase |
| Civitai |
SD models + images | https://civitai.com |
|
PromptHero | Prompts + results | https://prompthero.com |
|
Lexica | SD image search | https://lexica.art |
|
OpenArt | Multi-model gallery | https://openart.ai |
|
PlaygroundAI | AI art community | https://playgroundai.com |
|
Krea | AI design inspiration | https://krea.ai |
Visual Design & Illustration
| Source | Best For | URL |
|---|
| Dribbble | Designer portfolios | https://dribbble.com |
| Behance |
Creative projects | https://behance.net |
|
Pinterest | Mood boards | https://pinterest.com |
|
Designspiration | Visual search | https://designspiration.com |
|
Muzli | Design aggregator | https://muz.li |
|
Abduzeedo | Design blog | https://abduzeedo.com |
Colors & Palettes
| Source | Best For | URL |
|---|
| Coolors | Palette generator | https://coolors.co |
| Color Hunt |
Curated palettes | https://colorhunt.co |
|
Adobe Color | Color wheel + trends | https://color.adobe.com |
|
Realtime Colors | Palette on real UI | https://realtimecolors.com |
|
Happy Hues | Palettes in context | https://happyhues.co |
|
Culrs | Curated colors | https://culrs.com |
|
Picular | Color from keywords | https://picular.co |
Typography
| Source | Best For | URL |
|---|
| Typewolf | Font recommendations | https://typewolf.com |
| Fonts In Use |
Real-world examples | https://fontsinuse.com |
|
Font Pair | Font combinations | https://fontpair.co |
|
Google Fonts | Free fonts | https://fonts.google.com |
|
Font Share | Free quality fonts | https://fontshare.com |
|
Fontjoy | AI font pairing | https://fontjoy.com |
Icons & Illustrations
| Source | Best For | URL |
|---|
| Noun Project | Icons | https://thenounproject.com |
| Feather Icons |
Minimal icons | https://feathericons.com |
|
Heroicons | Tailwind icons | https://heroicons.com |
|
Lucide | Open source icons | https://lucide.dev |
|
Illustrations.co | Free illustrations | https://illlustrations.co |
|
unDraw | Customizable SVGs | https://undraw.co |
|
Blush | Mix-and-match | https://blush.design |
|
Storyset | Animated illus. | https://storyset.com |
Motion & Animation
| Source | Best For | URL |
|---|
| Lottie Files | JSON animations | https://lottiefiles.com |
| UI Movement |
UI animations | https://uimovement.com |
|
Animated Drawings | Motion refs | https://animatedbackgrounds.me |
|
GSAP Showcase | GSAP examples | https://gsap.com/showcase |
Common Traps
- - Too broad → asking "show me inspiration" without context leads to generic results. Always clarify: mobile or web? What industry? What vibe?
- Ignoring context → Dribbble is great for concepts but often impractical for production. Match source to whether user needs realistic or aspirational refs.
- Outdated sources → Some galleries haven't updated in years. Prioritize actively maintained sources (Mobbin, Godly, Awwwards).
- Forgetting AI galleries → For image generation prompts and style refs, AI-specific galleries (Civitai, PromptHero) are more relevant than traditional design sites.
Related Skills
Install with
clawhub install <slug> if user confirms:
- -
design - design principles - INLINECODE8 - color theory and palettes
- INLINECODE9 - UI component patterns
- INLINECODE10 - AI image creation
- INLINECODE11 - frontend implementation
Feedback
- - If useful: INLINECODE12
- Stay updated: INLINECODE13
设置
首次使用时，请阅读 setup.md 以获取帮助用户找到正确参考资料的指南。
使用时机
当用户需要UI、落地页、AI生成图像或创意项目的视觉参考、设计灵感或示例时使用。
架构
默认无状态。可选偏好追踪请参见 memory-template.md。
快速参考
sources.md |
| AI图像画廊 | ai-galleries.md |
| 移动应用截图 | mobile-screenshots.md |
核心规则
1. 匹配来源与需求
不同需求需要不同来源：
- - UI模式 → Mobbin、Screenlane、Page Flows
- 视觉设计 → Dribbble、Behance、Awwwards
- AI艺术 → Midjourney Showcase、Civitai、PromptHero
- 落地页 → Landingfolio、Lapa、SaaS Pages
2. 提供可操作链接
始终提供直接URL，而非模糊建议。说明每个来源对特定需求的价值所在。
3. 考虑上下文
询问平台（网页/移动端/桌面端）、风格（简约/大胆/趣味）和用途（生产应用/概念稿/演示文稿）以筛选推荐。
4. 必要时深入挖掘
对于专业需求（AI提示词、移动端流程、特定行业），加载相关辅助文件以获得全面覆盖。
快速入门 — 按类别划分的顶级来源
UI/UX设计
| 来源 | 最佳用途 | URL |
|---|
| Mobbin | 移动应用截图、流程 | https://mobbin.com |
| Screenlane |
移动端UI模式 | https://screenlane.com |
|
Page Flows | 用户流程录制 | https://pageflows.com |
|
Collect UI | 精选UI组件 | https://collectui.com |
|
UI Sources | 设计系统参考 | https://www.uisources.com |
|
Godly | 现代网页设计 | https://godly.website |
落地页与网页
| 来源 | 最佳用途 | URL |
|---|
| Landingfolio | SaaS落地页 | https://landingfolio.com |
| Lapa Ninja |
落地页画廊 | https://lapa.ninja |
|
SaaS Pages | SaaS专属设计 | https://saaspages.xyz |
|
One Page Love | 单页设计 | https://onepagelove.com |
|
Awwwards | 获奖网站 | https://awwwards.com |
|
CSS Design Awards | 创新CSS | https://cssdesignawards.com |
|
Site Inspire | 简洁网页设计 | https://siteinspire.com |
AI生成艺术
| 来源 | 最佳用途 | URL |
|---|
| Midjourney Showcase | MJ社区精选 | https://midjourney.com/showcase |
| Civitai |
SD模型+图像 | https://civitai.com |
|
PromptHero | 提示词+结果 | https://prompthero.com |
|
Lexica | SD图像搜索 | https://lexica.art |
|
OpenArt | 多模型画廊 | https://openart.ai |
|
PlaygroundAI | AI艺术社区 | https://playgroundai.com |
|
Krea | AI设计灵感 | https://krea.ai |
视觉设计与插画
| 来源 | 最佳用途 | URL |
|---|
| Dribbble | 设计师作品集 | https://dribbble.com |
| Behance |
创意项目 | https://behance.net |
|
Pinterest | 情绪板 | https://pinterest.com |
|
Designspiration | 视觉搜索 | https://designspiration.com |
|
Muzli | 设计聚合器 | https://muz.li |
|
Abduzeedo | 设计博客 | https://abduzeedo.com |
色彩与调色板
| 来源 | 最佳用途 | URL |
|---|
| Coolors | 调色板生成器 | https://coolors.co |
| Color Hunt |
精选调色板 | https://colorhunt.co |
|
Adobe Color | 色轮+趋势 | https://color.adobe.com |
|
Realtime Colors | 真实UI上的调色板 | https://realtimecolors.com |
|
Happy Hues | 上下文中的调色板 | https://happyhues.co |
|
Culrs | 精选色彩 | https://culrs.com |
|
Picular | 关键词生成色彩 | https://picular.co |
字体排印
| 来源 | 最佳用途 | URL |
|---|
| Typewolf | 字体推荐 | https://typewolf.com |
| Fonts In Use |
真实案例 | https://fontsinuse.com |
|
Font Pair | 字体组合 | https://fontpair.co |
|
Google Fonts | 免费字体 | https://fonts.google.com |
|
Font Share | 免费优质字体 | https://fontshare.com |
|
Fontjoy | AI字体配对 | https://fontjoy.com |
图标与插画
| 来源 | 最佳用途 | URL |
|---|
| Noun Project | 图标 | https://thenounproject.com |
| Feather Icons |
极简图标 | https://feathericons.com |
|
Heroicons | Tailwind图标 | https://heroicons.com |
|
Lucide | 开源图标 | https://lucide.dev |
|
Illustrations.co | 免费插画 | https://illlustrations.co |
|
unDraw | 可定制SVG | https://undraw.co |
|
Blush | 混搭组合 | https://blush.design |
|
Storyset | 动画插画 | https://storyset.com |
动效与动画
| 来源 | 最佳用途 | URL |
|---|
| Lottie Files | JSON动画 | https://lottiefiles.com |
| UI Movement |
UI动画 | https://uimovement.com |
|
Animated Drawings | 动效参考 | https://animatedbackgrounds.me |
|
GSAP Showcase | GSAP示例 | https://gsap.com/showcase |
常见陷阱
- - 过于宽泛 → 无上下文地要求展示灵感会导致泛泛的结果。务必明确：移动端还是网页？什么行业？什么风格？
- 忽略上下文 → Dribbble适合概念稿，但通常不适用于生产环境。根据用户需要的是实际参考还是理想化参考来匹配来源。
- 过时来源 → 部分画廊多年未更新。优先选择持续维护的来源（Mobbin、Godly、Awwwards）。
- 忘记AI画廊 → 对于图像生成提示词和风格参考，AI专属画廊（Civitai、PromptHero）比传统设计网站更相关。
相关技能
如用户确认，使用 clawhub install
安装：
- - design - 设计原则
- colors - 色彩理论与调色板
- ui - UI组件模式
- image-generation - AI图像创作
- frontend - 前端实现
反馈
- - 如有帮助：clawhub star inspiration
- 保持更新：clawhub sync
