Design reference

Skill tyroneross/interface-built-right/skills/design-reference

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.From its SKILL.md

Install

npx -y skills add tyroneross/interface-built-right --skill design-reference

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.7 KB, as published. Nobody here has run it

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

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

Workflow: Design Review

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

ibr — design validation