Refore

Refore is a browser-based conveRSIon tool built for UI and product design teams. Instead of screenshotting a web page and rebuilding it by hand, Refore reads the page's HTML and CSS and reconstructs it as an editable design file. The result is a layer-organized document that can be opened and modified in popular interface design APPlications, which makes it useful for benchmarking competitors, catching up design files for shipped features, or polishing pages produced by AI coding assistants.

What it does

The workflow relies on two plugins working together. A browser extension records a page or a selected portion of it, then a companion plugin insIDE the design application imports that recording. Refore parses the captured markup and styles, then recreates elements as separate text, shape and image layers rather than a flat image. It also captures some interACTive states, such as menus that appear on hover, so prototypes can reflect how the real page behaves.

Key capabilities

• Full-page or component capture: import an entire page or pick just a navigation bar, form or card cluster.
• Position and style fidelity: element coordinates, sizing, spacing, colors, typography, radii, shadows and gradients are cARRied across with close to pixel-level accuracy.
• Original image retrieval: images are pulled from their source URLs rather than copied from screenshots, helping preserve resolution.
• AI-generated HTML support: pages ouTPUt by tools such as Cursor or claude can be brought in and edited as structured layers.
• Layer cleanup: automated naming replaces generic labels with descriptive ones, and font substitution can be applied in bulk to avoid missing-typeface breakage.
• Auto layout conversion: flex and grid structures are translated into the design tool's own auto layout system.
• Multi-page imports: related screens in a flow can be recorded together.

Who it is for

The tool suits interface designers who want to study and adapt strong web designs, product managers who need design files that match what engineering already shipped, indie developers without a dedicated designer, and students learning layout by examining real pages layer by layer. Teams working across multiple design applications benefit most, since the Same capture can be routed to different editors.

How to get started

Install the browser extension in a Chromium-based browser, then install the matching import plugin in the design application you use. Open the target page, trigger a capture, and choose full page, selected region or interactive content. Switch to the design tool, launch the plugin, and pick the recording. Once imported, review layer names, apply a font replacement if needed, and begin editing.

Pricing and access

Refore uses a free tier with a limited number of imports per week plus paid indiVidual and team plans. Exact quotas, seat rules and pricing may change, so confirm current terms on the official site before committing. The service is presented in Simplified Chinese and runs in the browser, so a Chromium browser and the relevant design plugin are required. Availability, supported design applications and plan details may vary by region.