A UI design project collects reference from everywhere: competitor apps, design systems, interaction patterns in the wild, and internal design iterations. Early-stage exploration needs a pile of everything; later stages need carefully curated inspiration for specific features. Both stages feed from the same archive. Inspiration that works for a button interaction might suggest an approach for an empty state, and a screenshot the team rejected for search might be perfect for navigation.
A reference system built around tags and canvases makes this work because no image is consumed by a single design decision. A screenshot lives in the archive tagged by interaction type, platform, and rating. The same image can be on three different inspiration canvases if three features benefit from it. Archiving a design direction does not mean deleting it—it means re-tagging so the live project stays focused.
This is what a design sprint looks like.
9:00 am — Audit last week's exploration direction
Last week's design direction sketches are still in the project folder. Open a saved view:
tag:navigation tag:exploration rating:>=2
Forty-three sketches and reference screenshots from last week's navigation exploration. Only four of them are rated 4 or higher—the ones the team thought were worth pursuing. The rest are promising-but-not-quite.
The team met yesterday and decided to pursue a radically different navigation pattern—bottom tabs instead of sidebar. Archive the old exploration:
tag:navigation tag:exploration
Rate all forty-three down by two points to mark them as closed. Remove tag:exploration, add tag:archived:navigation-sidebar. The images do not move; the metadata shifts. Any saved view built on tag:exploration immediately returns zero results and the team knows that direction is archived.
9:30 am — Collect new inspiration for bottom tab navigation
Search for existing inspiration collected on bottom tabs:
tag:navigation tag:bottom-tabs rating:>=2 in:/Volumes/Design-Archive
One hundred eighteen images from three years of design reference collecting. These range from iOS apps with different tab styles to Android Material designs to desktop applications that use tab bars. They're the foundation.
But last week's exploration revealed the team wants something more modern—edge-to-edge tabs with icons and labels in a specific arrangement. Search narrower:
tag:navigation tag:bottom-tabs tag:modern rating:>=3 added:>2026-08-01
Thirty-two images from recent reference collecting. Create a new canvas: "Bottom tabs exploration v1" and pull the top twenty by rating. Each plate is a different example of bottom navigation: full-screen first, then close-ups of the tab design, label treatment, edge handling, animation cues from the transitions, dark mode variations, and accessibility considerations.
10:15 am — Expand the search to interaction patterns
Bottom tabs are not just visual. They need interaction feedback—what happens when you tap? Pull up animation and gesture reference:
tag:navigation tag:gesture-feedback rating:>=3
Sixty-eight images covering button tap animations, tab switch transitions, swipe gestures. Not all of them are tab navigation; some are other interactions that use similar gesture language. Tag the ones that match the tab design direction:
tag:navigation tag:bottom-tabs(already applied)tag:interaction-feedbacktag:animation-cue
Do not re-organize the images. Just layer more tags on top. The same screenshot of an iOS app showing a tab press animation now has three tags and lives on three different canvases: the bottom-tabs canvas, the gesture-feedback canvas, and a separate animation-cues canvas.
11:00 am — Concepting meeting: component library components need reference
The component library team needs inspiration for their own parts—loading states, error messages, notifications, empty states. Search what exists:
tag:component-library rating:>=2
Two hundred fourteen images. Narrow by component type:
tag:component-library tag:empty-state rating:>=3
Twenty-nine images. Create a canvas for empty states: "Empty state exploration." Pull the ones that show different approaches—some with illustration, some with typography, some with no visual at all. Rate each one as you arrange them on the canvas.
Not all of them will fit your design system. Some are more playful than your brand calls for; some are too minimal. Rate the good ones 5, the promising ones 3, the mismatches 1. Later, a search for tag:empty-state rating:>=4 becomes your "approved empty state patterns."
12:30 pm — Import competitor app screenshots from research
The research team sent over screenshots from fifteen competitor apps. Download them into:
/Volumes/Design-Archive/Competitors/2026-09-11/
The watcher adds all forty-three images to the index immediately. Search for them:
added:2026-09-11 type:image
Forty-three results. Begin tagging by app name and component:
tag:competitor-app-a tag:navigation
tag:competitor-app-b tag:search
tag:competitor-app-c tag:empty-state
Each screenshot gets three to five tags. Do not wait for a bulk tagging pass. Tag as you go. Within ten minutes, every designer on the project can search:
tag:competitor-app-a rating:>=3
And pull screenshots from that specific competitor without wading through the raw pile.
1:45 pm — Build approval boards for stakeholder review
The product manager needs to present three navigation directions to stakeholders tomorrow. Create three canvases:
- "Navigation direction A: bottom tabs"
- "Navigation direction B: sidebar"
- "Navigation direction C: top navigation"
For each direction, pull your best inspiration:
tag:navigation tag:bottom-tabs rating:>=4
Drag the approved images onto canvas A. Do the same for B and C. These are not final designs; they're inspiration boards that prove to stakeholders that each direction has precedent in well-designed apps.
Each canvas is a JSON file. Export them to the shared project folder. The stakeholders can review them in Coii Ref or open the JSON files in a text editor to see exactly which apps and patterns you based each direction on.
2:30 pm — Rate and filter based on design system alignment
Review the bottom-tabs inspiration against your design system. Open the canvas and re-rate images:
- Images that match your typography approach: 5
- Images that use your color approach: 5
- Images that use different conventions: 3
The same image might get rated 5 because its tab style is perfect, but the label treatment is different from your system. That is fine. Rate what you see, not a binary yes-or-no.
A saved view for the design system team:
tag:navigation tag:design-system-aligned rating:>=4
This becomes the reference they implement against.
3:15 pm — Create a team inspiration board
Collect the best images that represent the overall design direction and put them on one board: "Approved inspiration 2026-09." This is not a component board; it is a mood board that shows the visual language, color approach, typography treatment, and overall feel.
Pull images across components:
tag:approved rating:>=5
Sixty-four images across all categories. Select the twenty that best represent the approved direction. Each plate is a different component, but they all speak the same visual language.
Save this canvas to the project folder. Six months from now, a new designer joining the project can open this single board and understand the design direction without reading documents.
4:00 pm — Archive competitor references and update tags
The screenshots you reviewed are not the latest anymore. Some of those apps have updated. Archive the old set:
added:2026-09-04 tag:competitor
Re-rate them down to 1 to mark them as historical. Replace the tag:
- Remove
tag:competitor-app-a - Add
tag:archived:competitor-app-a date:2026-09-04
Do this for all three competitor apps from the previous research batch. The images stay in your library—the team might want to reference what a competitor looked like on a specific date—but they're tagged as archived so the live inspiration view shows only current research.
4:30 pm — Update the team saved views
A designer starting work tomorrow should have clear views ready:
For navigation work:
tag:navigation tag:bottom-tabs rating:>=4
For component library:
tag:component-library rating:>=4
For design system alignment:
tag:design-system-aligned rating:>=3
For current exploration:
tag:exploration rating:>=3 -tag:archived
Each view is one line. When you rename a tag across the project, every view automatically uses the new tag. No membership lists to repair. No views to re-create.
5:00 pm — Collect screenshots from your own work
Take screenshots of your morning's work. Wireframes, quick explorations, component studies. Download them to:
/Volumes/ProjectDrive/References/Design-Work/2026-09-11/
The watcher adds them immediately. Tag them:
tag:design-work
tag:navigation-exploration
tag:2026-09-11
Tomorrow, search tag:design-work added:2026-09-11 to see everything you tried today. Rate your favorites 4 or 5. The images that did not work get 1 or 2. These are not thrown away; they're archived and tagged so you can search them later if you need to remember what you tried.
6:00 pm — Export canvases and prepare for tomorrow's design crit
Export four canvases to the shared project folder:
- Bottom tabs exploration v1 (for internal team review)
- Navigation direction A, B, C (for stakeholder review tomorrow)
- Approved inspiration 2026-09 (team mood board)
- Design system components (for handoff)
Each one is a JSON file that goes into version control. These are design artifacts just like Figma files or sketch files—they're part of your design documentation and decision history.
The scale of the inspiration library
On day one of a project, inspiration is thin. On day one hundred, there are eight thousand screenshots, wireframes, and reference images across three drives.
Old directions are tagged archived:navigation-sidebar, archived:search-v1. New directions inherit tags from earlier work—a search redesign tags images with both tag:search and tag:2.0. Saved views stay the same; only the tag names change.
When a new platform launches—a desktop version, a tablet version—search your existing tags:
tag:navigation rating:>=4
These are your approved patterns. Adapt them for the new platform. Tag the new work:
tag:navigation tag:desktop tag:2026
The same inspiration set informed both platforms without duplication or re-tagging of the original images.
Iteration without redesign
A feature might go through three design directions, two stakeholder review cycles, and four component variations. That is nine different canvases, but it is not nine separate sets of images. It is one set of inspiration, re-tagged and re-arranged each time based on what passed rating and approval gates.
Direction A pulls from tag:feature-x tag:direction-a rating:>=3. Direction B pulls from the same image archive, but with different tags and a different canvas. Both canvases live in the project folder as JSON files. Both reference the same images. Neither one requires duplication or import.
When direction B is approved by stakeholders, tag every image in that canvas with tag:approved:feature-x. Those images become the foundation for the next feature that needs similar interaction patterns. An inspiration image from competitor A that you used in direction B gets tag:used:feature-x, and when you write the design system documentation, search tag:used:* to list all the external inspiration that made it into final design.
The archive that informs next year's product
At the end of a design cycle, archive the project. Tag everything:
tag:archived:project-name tag:archived:2026
Two years later, a new product redesign needs fresh thinking. Search:
tag:navigation rating:>=4 added:>2024-01-01
What you learned about navigation patterns and interaction feedback from the last project is the foundation for the next one. The canvases are version control. The ratings are signal about what worked. Nothing is deleted; it is all still there, still searchable, and still useful.
Why this matters for teams at scale
Every designer has a personal inspiration pile—screenshots clipped from apps, color swatches, interaction details. The moment you have two people on a team, those piles should not exist in parallel. The moment you have four, keeping them in sync by hand is dead time. A shared workspace means one designer's discovery becomes every designer's foundation by morning.
A tag hierarchy also survives personnel changes and scope shifts. When a designer leaves, their discoveries do not leave with them. When a feature pivots from tabs to a sidebar, you do not lose every inspiration image—you archive the tab direction and start a new one, and both are available if the feature pivots back. This is particularly valuable on long projects where the same idea might be explored three times before shipping, and every exploration could have found something worth keeping.
The canvases as version control is what makes this work at review time. A stakeholder asks why you chose one interaction pattern over another. The answer is not "I thought it was good"; the answer is the JSON file with the inspiration set and the competitor screenshots that led to that choice. Six months later, a new feature wants to reuse a pattern. The canvas tells you exactly which precedent informed which decision. That is the difference between a library and a notebook.
Related workflows in other roles: concept artist reference workflow follows a similar tagging approach but for a different medium. Illustrator daily reference workflow is a variant focused on vector and raster work. How to rate and filter your best references digs deeper into the rating system. Tags vs folders for images explores the fundamental choice your system is built on.
Moodboard app for Mac covers the full scope of building boards. How to build a moodboard from existing folders is the technical step. How to organize references by project covers scaling this across teams and projects. What is a reference manager answers whether you even need one for design work. Or just download it and try this workflow on your next design sprint—thirty days, every feature, no card.