Documentation

Extract, remix, and ship any design.

Install the extension, capture a design system from any live site, fuse it into your project with Magic Fusion, and export clean React + Tailwind. Here's everything, start to ship.

Install the extension

InferNet runs as a Chrome extension. Once installed, an InferNet button appears in your toolbar — click it on any live website to begin an extraction. InferNet is currently in early access for teams — contact us for access.

  1. Add InferNet from the Chrome Web Store.
  2. Pin the extension to your toolbar for one-click access.
  3. Open any website you admire and click the InferNet icon.
InferNet works on any public page you can load in your browser — marketing sites, dashboards, component galleries, landing pages.

Quickstart

From a fresh install to production-ready code in three moves:

  1. Capture — click the InferNet icon on a live site. It maps the page's design system: type scale, color tokens, spacing, components and motion.
  2. Fuse — point InferNet at your own project and let Magic Fusion reconcile the captured design against your existing styles.
  3. Ship — export clean React + Tailwind and drop it straight into your codebase.

Core concepts

InferNet doesn't screenshot or scrape frozen markup. It reconstructs a design as a structured system you can edit — that's the difference between a copy and a recipe.

  • Extraction — the captured design system of a page: tokens, components, layout and motion.
  • Design tokens — the atomic values (color, type, spacing, radius, shadow) that define a look.
  • Magic Fusion — the AI engine that merges an extraction into your existing project, reconciling conflicting styles automatically.
  • Export — production-ready React + Tailwind generated from an extraction.

Extracting a design

Click the InferNet icon on any page to start. You can capture a whole page or select a single component — a hero, a pricing card, a nav — for granular control. InferNet resolves the underlying structure rather than flattening it into a snapshot.

flowwhat an extraction captures
# One click on a live page produces:
components   # structural building blocks, kept as a system
tokens       # color · typography · spacing · radius · shadow
motion       # transitions and animation timing
layout       # grid, rhythm and responsive behavior

Capture scope: full page vs. single component

Every extraction starts with a scope decision — how much of a page you want InferNet to resolve. Both modes produce the same structured token system; they differ in how much of the page they map.

scopewhat it maps · when to use it
full pageMaps the whole page as one system — global tokens, layout rhythm, and every component on it. Use it to learn a site's entire design language or to seed a new project from a reference.
componentMaps a single element you select — a hero, a pricing card, a nav bar — and just the tokens it touches. Use it to lift one pattern without pulling in the rest of the page.

Component captures are the building blocks of a remix: pull a hero from one site, a pricing table from another, and fuse them with your own brand tokens using Magic Fusion. Because each capture is a structured system rather than a snapshot, the pieces stay editable and reconcile cleanly.

Tip. Start with a component capture when you only need one pattern — it keeps the extracted token set small and focused, so the export drops into an existing repo with less to reconcile.

Design tokens

Everything InferNet extracts arrives as structured tokens — not scraped, screenshot markup. Tune any value before you export, and the change propagates across the whole system.

token groupwhat it holds
colorPalette, semantic roles (bg, ink, accent), and states.
typeFont families, the full type scale, weights and line-height.
spaceSpacing rhythm and layout gaps as a consistent scale.
radiusCorner radii across buttons, cards and inputs.
motionTransition durations, easing curves and animation timing.

Magic Fusion

Magic Fusion is InferNet's flagship engine. Instead of dumping a foreign design on top of your app, it merges an extracted design into your existing project — mapping the new tokens onto your conventions and reconciling conflicting styles automatically.

  • Aligns the captured type scale and spacing to your project's baseline.
  • Maps extracted color roles onto your existing token names.
  • Flags genuine conflicts instead of silently overwriting.
Remix multiple sources. Fuse the hero of one site, the pricing of another and your own brand tokens into a single, coherent design.

No-code editing

Draw annotations directly on the preview instead of writing CSS. Circle an element, mark a change, and InferNet turns your marks into clean code — a designer-friendly way to refine before export.

Exporting code

Export any extraction as production-ready React + Tailwind. The output is a real component system — editable, renameable and yours — not a tangle of inline styles.

bashdrop into your project
# Export produces clean, componentized code:
src/
  components/   # reusable, named React components
  tokens.css    # the extracted design system
  # Tailwind config extended with your tokens

Templates

Start from 100+ community templates instead of a blank page, or remix multiple sources into one unified design. Templates are extractions too — fully editable systems, not static themes.

Legality & fair use

InferNet extracts design patterns and structural tokens — color, type, spacing, layout and motion — the reusable ideas behind a design. It is a tool for learning from and remixing design systems, not for verbatim reproduction of copyrighted content, logos or brand assets.

  • Do not copy trademarks, logos, brand names or proprietary content.
  • Do use extracted patterns and tokens as a starting point for your own original work.
  • You are responsible for the sites you build and the assets you ship.
Design systems — grids, type scales, spacing rhythm — are broadly reusable ideas. Specific copyrighted content and trademarks are not. InferNet gives you the recipe; what you cook with it is on you.

Privacy & data

  • Local-first capture — extraction runs against pages you load in your own browser.
  • Minimal data collection — we only store what's needed to run your workspace; extraction happens in your browser.
  • Your exports are yours — generated code lives in your project, not locked to InferNet.
Questions for a security or privacy review? Email hello@infernet.app.

About InferNet

InferNet is built and operated by INFERNET AI PTE. LTD., registered in Singapore (UEN 202506302K). We're building the tool that turns the entire internet into your design library — clone any website's design system and remix it into production-ready code with AI.

Get in touch: hello@infernet.app