design-reference

name	design-reference
description	Use when the user asks to screenshot a page, capture a design, save a reference, or shares a design URL (Mobbin, Dribbble, Figma, Behance, Awwwards) for visual inspection.
version	0.1.0
user-invocable	false

Design Reference Capture with IBR

Capture screenshots of any web page — local or external — and return the image directly for visual inspection. Save captured designs to a persistent reference library for later retrieval. Complements the design-validation skill which returns structured data; this skill returns actual images.

When to Activate

• User shares a URL from a design site (Mobbin, Dribbble, Behance, Awwwards, Figma screenshots)
• User says "screenshot this", "capture this design", "use this as reference", "show me this page"
• Visual inspection of a page is needed to guide implementation
• User wants to save a design for later reference
• Replicating an external UI requires seeing the target design

Primary Workflow: Capture & View

Call the ibr screenshot MCP tool to navigate to any URL and return the captured image.

Input: url (required), plus optional viewport, selector, full_page, wait_for, delay, save_as

Returns: Base64 image content block (visible in context) + metadata text

Basic capture

Call ibr screenshot with just the URL. The returned image enables describing visual patterns, identifying UI components, extracting design details, and guiding implementation decisions.

External site tips

External sites (Mobbin, Dribbble, etc.) are JS-heavy. The tool auto-applies a 2000ms delay for non-localhost URLs. For sites needing more time:

• Increase delay (e.g., delay: 5000 for slow-loading galleries)
• Set wait_for to a CSS selector for specific content (e.g., wait_for: ".design-image")
• Set selector to capture just the design element, excluding page chrome

Viewport options

• desktop (default): 1920x1080 — full desktop view
• mobile: 375x667 — mobile design patterns
• tablet: 768x1024 — tablet layouts

Element capture

To capture a specific component rather than the full page, pass a selector:

selector: ".card-component"
selector: "#hero-section"
selector: "[data-design-id='abc123']"

Saving to Reference Library

To persist a captured design for later retrieval, include save_as with a descriptive name:

save_as: "mobbin-login-screen"
save_as: "dribbble-dashboard-card"
save_as: "competitor-pricing-page"

References are stored in .ibr/references/ with an index.json manifest tracking name, URL, viewport, capture date, and file size.

Managing References

Call the ibr references MCP tool to manage saved designs.

List all references

Call with action: "list" (or no arguments — list is the default). Returns a text summary of all saved references with metadata.

Show a reference image

Call with action: "show" and name: "reference-name". Returns the image as a base64 content block — useful when implementing a design captured in a previous session.

Delete a reference

Call with action: "delete" and name: "reference-name". Removes both the PNG file and the index entry.

Decision Tree: Which IBR Tool to Use

Need	Tool	Returns
See what a page looks like	ibr screenshot	Image (visible in context)
Exact CSS values, handlers, a11y	ibr scan	Structured text data
Save a design for later	ibr screenshot with save_as	Image + saves to library
Retrieve a saved design	ibr references with show	Image from library
Visual regression baseline	ibr snapshot	Session-managed baseline
Compare after changes	ibr compare	Diff verdict + regions

Screenshot vs scan

• Screenshot — see the page: design inspiration, visual bugs, canvas/SVG content, external reference sites
• Scan — validate the page: check CSS values, handler wiring, accessibility attributes, console errors

Both tools complement each other. Capture a screenshot for visual context, then scan for precise validation.

Workflow: Replicate an External Design

1. Capture the target design: call ibr screenshot with save_as
2. Implement the UI based on the captured reference image
3. Validate the implementation: call ibr scan to check CSS, handlers, a11y
4. Compare visually: call ibr screenshot on the local implementation
5. Iterate until the implementation matches the reference

Workflow: Design Review

1. Capture the current state: call ibr screenshot on the live page
2. Inspect the image and identify issues
3. Fix issues in code
4. Re-capture to verify visual changes
5. Optionally save as reference: save_as: "approved-state"

ibr — design validation