Skip to content
Getting started

Use the Chrome extension

Add the SketchXFlow extension to Chrome, connect your account, then open any site to read its design, copy it, rebuild it or audit it.

Checked against the product on

Install it and connect your account

  1. Open SketchXFlow on the Chrome Web Store and press "Add to Chrome". It works in Chrome on a computer, not on a phone.
  2. Chrome may ask you to confirm the install. Press "Continue to install" and the extension is added.
  3. Click the puzzle icon at the top right of Chrome and pin SketchXFlow, so its icon stays in the toolbar.
  4. Click the SketchXFlow icon. A panel opens at the side of the page.
  5. Press "Sign in" in the panel. A SketchXFlow page opens: sign in or create an account there, then press "Connect".

Reading a page works without an account. Sending anything to SketchXFlow needs one.

Rebuild a site you like

This is the closest match you can get to another site. The extension reads the page in your own browser, as you see it, so a page drawn in 3D or played by scrolling comes across too.

  1. Open the site in Chrome and wait for it to finish loading.
  2. Click the SketchXFlow icon and open the "Recreate" tab.
  3. Under "Rebuild it as a clean design", add anything you want changed, then tick the box to confirm the page is yours or you may copy it.
  4. Press "Rebuild in SketchXFlow". Keep the tab open while it reads the page; on a 3D site it scrolls the page for you.
  5. Press "Watch it in SketchXFlow". The design opens in the editor when it is ready, a few minutes later.

Rebuild needs a paid plan and uses coins like any design. See coins, costs and plans.

ActionCoins
Website design12

The rebuild follows the look, layout and motion. Another company's logo, 3D models and photos stay theirs: use your own in your design.

Copy a page as it is

In the "Recreate" tab, "Copy into SketchXFlow" saves the page exactly as you see it as a new design. It is free. Scripts and forms don't come along, and 3D scenes come as pictures.

What each tab does

TabWhat you get
StyleThe page's colours, fonts, text sizes, corners, spacing and shadows. Copy them as CSS or start a design from them.
StructureA design-system check with a grade and fixes, plus the page's headings and landmarks.
CodeThe tech the site is built with, the API calls it makes and basic security checks.
ComponentsNavigation, sections, cards, forms and buttons as pictures. Copy one and paste it into Figma, or save it as SVG, PNG or HTML.
AssetsEvery image and link on the page, and a check for broken links.
RecreateCopy the page as it is, or rebuild it as a clean design.
AuditA quick UI/UX check in the browser, and the full site audit with its certificate.
ProjectsYour recent SketchXFlow projects.

If something doesn't work

  • The panel shows nothing: reload the page, then click the SketchXFlow icon again.
  • It asks for access to the site: allow it. The extension only reads the page you have open.
  • A page on your own computer (localhost) can be read and copied, but Rebuild and the full audit need the live site.
  • Still stuck? Contact support.

Questions

How do I make a site like one I've seen?
Add the SketchXFlow Chrome extension, open that site, and choose Recreate, then Rebuild in SketchXFlow. It reads the page in your own browser, 3D and scrolling included. You can also paste the link in the box on the home page and press Generate.
Why does Chrome ask me to confirm before adding the extension?
With Enhanced Safe Browsing turned on, Chrome asks you to confirm extensions from publishers that are new to the Chrome Web Store. Press Continue to install and the extension is added.
Is the Chrome extension free?
Installing it, reading a page and copying a page as it is are free. Rebuilding a page as a clean design needs a paid plan and uses coins like any design.