Extract a design system from a website you like

If there's a site whose look you like, extraction turns that feeling into a starting point: paste the address, and Wuizard reads the site's colours, type, corner radii and motion, matches them to live components from the library and gives you a sheet your coding agent can build with.

It copies values, never code. You get the palette, the font choices and the feel of the motion, rebuilt from Wuizard's own components, ready for you to make your own.

What it reads#

From a web address, Wuizard loads the page and its stylesheets and measures:

• Colour: the background, surface, text, muted and accent colours the page actually uses, with near-identical shades merged.
• Type: the display and body fonts, preferring fonts the page really loads over fallbacks in a font stack, plus the heading weight and letter spacing.
• Corners and shadows: the small, medium and large radii, and the shadow style when the site uses enough shadows to have one.
• Motion: transition and animation timings, turned into a spring for your sheet.

It then picks the closest starter vibe and fills the starter slots with library components that suit what it found.

Extract from a web address#

1. Open Extract in the sidebar.
2. Paste the address, such as example.com or a full https:// link to a specific page. A landing page usually says the most about a brand's style.
3. Click Extract and watch the steps: fetching the page, reading colour, measuring type and corners, detecting motion and matching library assets.

You can also start from New sheet by choosing Extract from a URL, which brings you to the same place.

Extract from a screenshot#

Some sites style themselves with JavaScript, and some pages sit behind a login. For those, use a screenshot. Drop an image anywhere on the Extract page, or click Screenshot next to the address box. PNG, JPEG and WebP all work.

Your browser shrinks the image and sends only a small sample of its pixels, so the screenshot itself isn't uploaded. A screenshot gives Wuizard the palette: it finds the background, picks the accent and matches library assets. Type, corners and motion start from the closest vibe, and you can set them in the sheet afterwards.

Read the result#

The result page shows what was found, side by side with a demo app drawn only from those values:

• Colour: each role (background, surface, text, muted, accent) with its hex value.
• Type: the display face, and the body face under it.
• Corners: the small, medium and large radii in pixels.
• Motion: the spring's stiffness and damping, with its curve.
• Matched: the library components chosen for the starter slots. Click one to open it.

Above it is the closest vibe and a count of what was read, such as the number of stylesheets, colours, fonts and transitions. When something was missing, a note says what it did instead. For example, if a site has no CSS transitions, motion uses the vibe's spring, and if it found very little CSS at all, the note suggests trying a screenshot.

Save it as a sheet#

At the bottom of the result, give the sheet a name (it starts as the first part of the site's domain) and click Create sheet. The new sheet opens in the editor, where everything is yours to change.

A few things worth doing straight away:

• Check the fonts. The sheet keeps the font names the site uses, shown as "from site" in the type picker. If a font isn't one you can use in your project, choose another; font pairings has options.
• Make the accent yours. Changing the accent colour is usually enough to stop a sheet looking like the site it came from. Colour palettes are a quick way to try alternatives.
• Review the slots. The matched components are a starting point. Swap any that don't suit your product.

The sheet design guide walks through every part of the editor.

Extract from your coding agent#

Connected agents can do the same thing. Ask yours something like:

Extract the design system from example.com and show me what you found. If I like it, save it as a sheet.

The agent calls extract_sheet, shows you the result and, once you agree, saves it with create_sheet_from_extraction, optionally making it the active sheet it builds with. If your agent isn't connected yet, see connecting your coding agent.

Which addresses work#

Extraction reads ordinary public pages over http or https on the standard ports. It won't load addresses on your own machine or a private network, or addresses with a username and password in them. If a page needs a login or builds its styles in the browser, a screenshot is the better route.

What it costs#

Each new extraction from an address or a screenshot is metered. A trial includes a few, and paid plans include a monthly number. Your recent extractions are listed on the Extract page, and reopening one costs nothing. The limits table has the current numbers.

Use it fairly#

Extraction is for capturing a feel you like, not for cloning someone else's product. It never takes logos, images or copy, and the components come from the Wuizard library rather than the site. Treat the result as a first draft: change the accent, pick your own type and make the sheet fit your product. If you want to know how this compares with pasting screenshots into a prompt, read alternatives to screenshot prompting.