Turn a screenshot folder into searchable design references

Turn a screenshot folder into a useful design reference library by adding a searchable note beside each image. Record the source, the screen pattern, and the specific decision worth borrowing. Then retrieve references for the component you are building and pass the selected images to your coding agent with a short brief.

You can start with files and a text editor. A folder named inspiration becomes hard to use because filenames rarely explain why you saved an image. A note that says "pricing comparison with a quiet secondary action" gives you a search phrase and a reason to open it.

Start with the next design task

Choose one job, such as revising a pricing section or making a dense settings page easier to scan. Collect the saved images that might help with that job in a working folder. Keep the rest of the archive where it is. A complete catalog is unnecessary before the first useful retrieval.

Remove duplicate exports from the working set. Keep alternate captures when they show a meaningful difference, such as a mobile layout or an expanded menu. Label those differences. Two nearly identical hero crops add little unless you can explain which decision the second one supports.

Preserve the source beside the image

Give each reference a stable local id. Store the original image and a text note under that id so a future rename does not break the connection. Record missing facts as unknown. A download timestamp does not establish the day a website looked that way.

Reference id: pricing-comparison-01
Image: pricing-comparison-01.png
Source page: unknown, recover before sharing publicly
Captured on: unknown
Viewport and state: desktop, dimensions unknown, comparison visible
Pattern: pricing comparison
Style cues: restrained color, thin dividers, compact rows
Borrow: row alignment and separation of primary and secondary actions
Keep from our product: plan names, prices, components, and copy
Missing evidence: mobile layout and billing-toggle behavior

Replace the template values with facts you can verify. Keep the source page address separate from the image path. Record a known creator or curator too. For private product captures, remove customer details before sharing and use your team's approved storage. Keep notes about asset reuse conditions alongside the source information.

Tag observable decisions

Use a small vocabulary you will remember while building. Separate the kind of screen from its visual treatment. Pricing names the task. Compact comparison rows with thin separators describes the treatment. A company name remains useful provenance, but it rarely describes the layout problem you are trying to solve.

• Record the screen pattern, such as navigation, pricing, search results, or a form.
• Describe visible relationships, such as a narrow text column beside a large product image.
• Label the viewport, theme, and interaction state when known.
• Write one sentence about the decision you want to reuse and one about the parts you will keep specific to your product.

Search your notes for a real task phrase. Try "mobile pricing comparison" or "dense form with grouped fields". If the results are vague, improve the captions of the relevant images. Adding more tags to the whole archive usually costs more effort than correcting the few notes you actually need.

Repair gaps in the captures

A cropped button provides little evidence about its place in a page. Keep enough surrounding content to see alignment and hierarchy. Pair a page overview with a readable crop when a long image makes the section too small to inspect. Preserve the original so later readers can check what the crop leaves out.

If you can revisit the source, capture the missing viewport or state. Playwright supports full-page screenshots and screenshots of an individual element, so you can save both the page context and the detail. Its screenshot documentation describes both capture options.

Label a desktop-only reference accordingly. Ask the agent to propose mobile behavior, then review that proposal as a new design decision. A desktop image cannot establish whether a menu collapses, which column moves first, or how a comparison table behaves on a phone.

Retrieve a small set and assign each image a job

Choose a main reference for composition. Add another only when it answers a different question, such as mobile navigation. This is a starting rule for this workflow, not a measured limit on model performance. A collection of unrelated favorites leaves you with unresolved design choices before implementation begins.

Build our pricing comparison using the attached reference.
First describe the layout you can actually see. Say if the image is unavailable.
Borrow the row alignment and the visual distinction between actions.
Use our existing components, tokens, plan names, prices, and copy.
The screenshot shows desktop only. Propose mobile behavior before implementing it.
List missing information instead of treating guesses as observed facts.

Attach the image files through an image-capable workflow, or retrieve them through a tool that returns images. Confirm that the agent can inspect them. A file path or source URL needs an available tool to resolve it. Our guide to design references for coding agents explains that handoff in more detail.

Use a registry when your folder has a gap

A personal folder preserves your selections and private context. A curated registry helps when you need a pattern you have not saved. swaggin provides free search, metadata, and low-resolution fold previews. Crisp folds, overviews, and segments require a license. Use the metadata to narrow the selection before retrieving images.

Browse the gallery for candidates or use the setup instructions to connect an agent. swaggin does not import personal screenshot folders. Your folder and notes stay local in this workflow. The registry supplies additional references while your task brief records the decisions.

Check retrieval and the resulting page

Before calling the migration useful, retrieve a reference by task rather than by filename. Open the result and check that its caption still describes the image. After implementation, compare the rendered page with the selected reference at similar viewport sizes. Fix the largest difference in hierarchy or alignment before adjusting small decoration.

• Can you find the reference using the component and visual decision?
• Can another person recover the source and distinguish known facts from missing context?
• Did the agent inspect the image before writing the component?
• Does the result preserve your content and established design system?
• Have you reviewed mobile behavior and the states absent from the reference?

If the result still looks interchangeable, check whether your captions describe only page structure. Why coding agents build the same landing page separates structural patterns from visual choices. Revise the reference note with the decision you wanted, then use that note for the next pass.