Design & Components

A solo builder can start from a broad visual feed, narrow by screen type or aesthetic, and then move from reference to implementation-ready parts. The reference path includes focused galleries and design-system registries, while component sources split into baseline primitives, AI-chat states, motion, searchable registries and chart libraries. Product character work adds a separate path: stabilize the mascot visually, then map restrained code-driven states to moments such as idle, success or error. Branding examples remain references rather than reusable parts, so they should inform direction before code is copied.

Start here

1. Filtering Web Design References — Choose a reference source from the criterion already in hand.
2. Land-book — Narrow by screen type and color when those constraints are known.
3. shadcn/ui — Start implementation from baseline primitives rather than bespoke controls.
4. 21st.dev — Search across component options once the needed part has a name.

Pages

Choosing a screen direction

• Filtering Web Design References — LOOPY's playbook for editor picks, type-and-color filters and seed-image similarity
• Best Designs on X — Broad editor-curated feed when no criterion exists yet
• Land-book — Web design archive narrowed by category and color
• Same Energy — Visual similarity search from one seed image
• Supahero — Hero-section-only reference library
• Dark.design — Dark web design gallery
• Mac App Supply — Mac app landing-page collection
• Loadmore — Mobile-web experiment gallery
• Layers — AI-native product templates
• Dribbble — Mobile screen and icon references
• Pinterest — Mobile moodboard collection

Design systems and brand references

• Oh My Design — Registry of company design-system documentation
• Stanley — AI bot character-branding reference

Components and motion

• Animating Mascots as Product Interface States — César Álvarez; brief named emotional states, render them in code and correct motion by watching
• shadcn/ui — Baseline design-system components
• Beautiful UI — AI-chat approval and streaming primitives
• BeUI — React and Motion components
• Rare UI — Distinctive animated components
• Transitions — UI transition references
• 21st.dev — Searchable component registry
• ThreeUI — Three.js components, shaders and templates

Charts

• Mono Charts — Monochrome React chart visualizers
• Tremor — Copy-and-paste chart and dashboard components

Gaps

• A decision playbook comparing baseline libraries, registries and motion-focused collections by stack, accessibility and maintenance.
• A repeatable handoff from a chosen reference into an AI coding brief with visual acceptance criteria.
• Accessibility, reduced-motion and performance evidence for code-driven mascot states.
• Production evidence for the newer galleries and component sources; the current list is a single curator's collection.