Jonathon's AI Wiki

Design Inspiration Galleries (Curated Reference List)

5 min read

Source: Design Inspiration Galleries User Provided 2026 04 17 (user-provided 2026-04-17), Design Inspiration Galleries User Provided 2026 04 19 (user-provided 2026-04-19 — 4 new resources: Design Library, AI Mobile App Builder, Fonts, second Animation gallery)

Curated design-inspiration galleries and resource libraries — reference sites to feed Claude Code (and yourself) when building UI. Each resource focuses on one layer of the interface problem (landing structure, navbar patterns, typography, mobile flows, icons, …). Best used as pre-work: pick 3–5 references from the right gallery, drop the URLs or screenshots into your prompt, then ask Claude Code to synthesize — often more effective than describing the aesthetic abstractly. Composes cleanly with DESIGN.md (that gives agents a spec; these give you the reference material to pick the spec from).

The galleries

CategoryURLWhat to use it for
Web Designhttp://curated.designGeneral web-design inspiration across categories — starting point when scope is broad
Design Libraryhttp://curations.supplyAlternative general-purpose design library; pair with curated.design when one doesn’t surface a fit
Landing Pageshttp://landing.loveLanding-page-specific gallery — structure, hero patterns, conversion shapes
SaaS Websiteshttp://saaspo.comSaaS marketing site references — feature grids, pricing pages, product-tour layouts
Navbarshttp://navbar.galleryNavigation patterns — primary + secondary nav, mega-menus, mobile transforms
CTA Sectionshttp://cta.galleryCall-to-action block examples — waitlist, pricing CTA, inline CTAs, footer closers
Animation (app motion)http://appmotion.designApp motion and animation reference — micro-interactions, transitions, scroll-triggered effects
Animation (60fps)http://60fps.designCompanion animation gallery — crossref with appmotion.design for broader motion coverage
Fontshttp://uncut.wtfFree commercial-license type foundry / font gallery — starting point when you need a non-default typeface quickly
Mobile Appshttp://mobbin.com/?via=abrahamMobile-app UI patterns — the standard reference for iOS/Android flows
AI Mobile App Builderhttp://sleek.design/?ref=abrahambwAI-driven mobile app builder — reference for what AI-generated mobile UI looks like today, and a potential build-surface in its own right
Brandshttp://rebrand.galleryRebranding examples — before/after identity work, useful for brand-refresh briefs
Iconshttp://hugeicons.com/?via=AbrahamIcon library
Design Systemshttp://component.galleryComponent-level references — tables, dropdowns, forms across many design systems

How to use these with Claude Code

  1. Pick references before prompting. For any UI build, open the matching gallery for 2–3 minutes and screenshot 3–5 examples that match the brief. This precedes prompt writing — you want reference material first, not refinement last.
  2. Feed references as URLs or images. Claude Code can read image attachments; Claude Design can import from URLs and images directly. Paste the references into the conversation with a brief note on which specific aspects you want to pull from each.
  3. Combine gallery references with a DESIGN.md. Galleries give you the inspiration; a DESIGN.md gives the agent a concrete design-system spec. Both together is the strongest constraint set.
  4. Use per-layer galleries to decompose a page. A full marketing page needs: hero (landing.love), navbar (navbar.gallery), feature section (curated.design or saaspo.com), CTA (cta.gallery), motion polish (appmotion.design). Pick one reference per layer, synthesize.
  5. Default Claude output still fights you. Per Opus 4.7’s default house style (cream/serif/terracotta), generic “don’t do that” prompts don’t work. Use the galleries as the “specify a concrete alternative” mechanism.
Workflow phase (per Design Skills Workflow)Galleries most useful at this phase
Context gatheringcurated.design, curations.supply, saaspo.com, rebrand.gallery
Direction / moodcurated.design, curations.supply, landing.love, appmotion.design, 60fps.design
Component-level decisionsnavbar.gallery, cta.gallery, component.gallery
Mobile-specific workmobbin.com, sleek.design
Typographyuncut.wtf
Iconographyhugeicons.com
Motion polish passappmotion.design, 60fps.design

Open Questions

  • Freshness. Galleries drift — sites listed today may have redesigned next year. Useful to periodically re-scan the curated list.
  • Licensing. Screenshotted references are fair-use for internal inspiration; don’t copy designs verbatim into production work.
  • Better-than-mobbin alternatives. Mobbin is the de facto mobile reference but paywalled at scale — any fully-open alternatives worth tracking?
  • AI-first equivalents. These are human-facing galleries. Is there an emerging “AI-first” equivalent that exposes references in a form optimized for agent consumption (machine-readable tokens, DESIGN.md snippets)?

Try It

  1. Run the per-layer decomposition once. Take a real in-progress page. Before any prompt, open each gallery that matches a layer (hero / navbar / feature / CTA / motion). Pick one reference per layer. Screenshot. Paste references into Claude Code with explicit “pull the hero structure from reference 1, navbar from reference 2” instructions. Compare output against your normal “just describe it” workflow.
  2. Pair galleries with a DESIGN.md. Pick a reference from a gallery, then grab the matching DESIGN.md from VoltAgent’s collection if it exists. Feed both to Claude Code. Measure whether the combined constraint produces better output than either alone.
  3. Bookmark the full list — a one-time mechanical action that takes a minute and saves dozens of “where was that good SaaS landing page I saw?” moments.
  4. Build your own gallery per project. As you find reference work during a project, stash URLs + screenshots in a references/ folder. Feed the folder into every Claude Code session via CLAUDE.md.

Graph View

Backlinks