ui.rip (also called uirip or rip ui) is a UI reverse engineering tool that converts any live website into a production-ready Next.js project. Paste a URL, and ui.rip captures the full page — including SPA states, modals, and dynamic content — then generates clean React components with TypeScript and Tailwind CSS.

Is reverse engineering websites legal?

Yes. ui.rip captures the rendered DOM — the same HTML and CSS any browser sees. It does not access server-side code, databases, or private APIs.

Can ui.rip capture JavaScript-heavy SPAs?

Yes. It uses a real browser engine to render pages built with React, Vue, Angular, Svelte, and other SPA frameworks, capturing the post-hydration DOM.

What frameworks does ui.rip support?

ui.rip detects 10+ frameworks and outputs Next.js projects with React components, TypeScript, and Tailwind CSS.

No. Credits never expire and there is no subscription. Capturing and inspecting is free — credits are spent on download.

How is ui.rip different from v0 or screenshot-to-code?

ui.rip reverse engineers live websites via DOM crawling, unlike v0 (text prompts), screenshot-to-code (images), Locofy (Figma), or HTTrack (raw HTML mirroring).

Visual Branding Guide

1. Logo System

The wordmark is the brand. No abstract symbol needed. The monospace font signals "developer tool" instantly.

Variant A · Dot-Accent

ui.rip

The blue dot is the brand's signature. Minimal. Recognizable at any size.

Variant B · Glitch Wordmark

ui.rip

RGB channel split. Hero moments only — launch campaigns, Product Hunt.

Variant C · Deconstructed Brackets

<ui.> rip

Broken closing tag — the slash cuts through. Favicon, app icon, merch.

Variant D · Underscore Rip

ui.rip

Gap in the underline at the dot position — represents the "rip," a clean break.

2. Color System

Dark mode only. The dark aesthetic is core to the brand identity — developer-native, serious tool, late-night builder energy.

Backgrounds

#0A0A0B

Base

#0F1115

Surface

#1A1D23

Elevated

#22252D

Hover

Text

Aa

#F5F5F5

Primary

Aa

#A1A1AA

Secondary

Aa

#71717A

Tertiary

Accents

#3B82F6

Electric Blue (primary)

#A3FF12

Acid Green (hacker)

#8B5CF6

Neon Purple (AI)

#FF3B3B

Rip Red (energy)

Borders & Dividers

#2A2D35

Border

#3B82F620

Glow (10% blue)

Accent Usage Rules

Accent	When to Use	When NOT to Use
Electric Blue	Primary CTAs, links, active states, logo dot	Body text, large filled areas
Acid Green	Special launches, "beta" badges, terminal content	Primary UI — it's loud, use sparingly
Neon Purple	AI-related features, premium badges	Competing with blue on the same screen
Rip Red	Error states, destructive actions, the word "rip"	Navigation, primary CTAs, body elements

3. Typography System

Three fonts — each with a clear role.

Display · Space Grotesk Bold · 64px · -0.03em

Reverse engineer UI.

Heading 1 · Space Grotesk Bold · 40px · -0.02em

Capture. Compile. React.

Heading 2 · Space Grotesk SemiBold · 28px · -0.01em

How it works

Heading 3 · Space Grotesk Medium · 20px

Pipeline stages

Body · Inter Regular · 16px

ui.rip captures a live website and outputs structured React components.

Body Small · Inter Regular · 14px

Free to capture. Credits to download.

Code · JetBrains Mono Regular · 14px

npx ui-rip capture https://stripe.com

Label / Badge · Inter SemiBold · 11px · uppercase · 0.08em

Beta 3 Credits New

Font	Role	Why
Space Grotesk	Headlines, display	Geometric sans with personality. Sharp terminals. Modern without being trendy.
Inter	Body, UI text	Industry standard for developer tools. Optimized for screens.
JetBrains Mono	Code, technical	Developer-native. Ligatures for code readability.

4. Iconography & Pipeline Icons

Outlined / line icons. 1.5px stroke, 2px corner radius, 24x24 grid. Lucide primary + custom extensions.

Capture

Probe

Analyze

Generate

Enhance

Verify

UI Decomposition Visual

HEADER

HERO

Card

<FeatureCard /> x3

FOOTER

5. Layout & Spacing

Spacing Scale (base: 4px)

4 xs

8 sm

16 md

24 lg

32 xl

48 2xl

64 3xl

80 4xl

96 5xl

128 6xl

Border Radius Scale

0px none

4px sm

8px md

12px lg

full

6. Component Patterns

Feature Card

Capture

BFS state-tree traversal. Click. Snapshot. Recurse.

Learn more →

Probe

Inject inspection engine. Look deep into computed styles and structure.

Learn more →

Generate

HTML to JSX. Full Next.js scaffold with clean components.

Learn more →

CTA Buttons

URL Input Pattern

Reverse engineer UI.

Free to capture · Credits to download

7. Page Concepts

Pipeline Flow

How ui.rip works

Capture

BFS the state tree

HTML + assets

→

Probe

Inject inspector

Probe JSON

→

Analyze

Detect patterns

Analysis result

→

Generate

HTML → JSX

Next.js project

Pricing Cards

Simple credits. Clear results.

Starter

$25

5 rips

$5/rip

Builder

$60

15 rips

$4/rip

save 20%

Popular

Pro

$120

40 rips

$3/rip

save 40%

Agency

$250

100 rips

$2.50/rip

save 50%

Credits never expire · No subscription required

Before / After Split

Before

Live website

After

</PricingGrid>

</PricingPage>

Generated React

8. Motion & Animation

Subtle, purposeful motion. Never animate body text or essential UI.

Card Hover (200ms)

Hover me

Border and glow transition on hover.

Button Hover (150ms)

Link Hover (slide underline)

Learn more about the pipeline

Scanning Effect

Glitch Effect — Brand Moments Only

RGB channel split + horizontal slice displacement. NEVER use on body text, navigation, forms, inputs, or pricing.

9. Social Media Templates

X/Twitter · 1200x675

"Stop rebuilding
the same navbar."

ui.rip

Product Hunt · 1270x760

<ui.> rip

Reverse engineer UI.

Any website → React components in minutes.

• Free to capture

• Credits to download

• Pixel-verified output

10. Sticker & Merch Concepts

ui.rip

Reverse
engineer UI.

</ >

stop
rebuilding.

T-Shirt Front

ui.rip

Small wordmark, left chest

T-Shirt Back

Capture.

Compile.

React.

ui.rip

Large text centered, small logo bottom right

11. Design System Tokens

CSS custom properties for the full token set.

:root {
  /* Backgrounds */
  --color-bg-base:        #0A0A0B;
  --color-bg-surface:     #0F1115;
  --color-bg-elevated:    #1A1D23;
  --color-bg-hover:       #22252D;

  /* Text */
  --color-text-primary:   #F5F5F5;
  --color-text-secondary: #A1A1AA;
  --color-text-tertiary:  #71717A;

  /* Accent */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #2563EB;
  --color-accent-green:   #A3FF12;
  --color-accent-purple:  #8B5CF6;
  --color-accent-red:     #FF3B3B;

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Borders */
  --color-border:        #2A2D35;
  --color-border-active: #3B82F6;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-glow: 0 0 20px rgba(59,130,246,0.12);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   300ms cubic-bezier(0.4,0,0.2,1);
}

12. Do's and Don'ts

Do

Use generous whitespace. Let elements breathe.
Keep text hierarchy clear: one display heading per section.
Use code/mono font for anything technical.
Use the blue accent for ONE focal point per view.
Show real output. Developers trust evidence, not promises.

Don't

Never use gradients on text.
Never use more than 2 accent colors on one screen.
Never use stock photography.
Never use rounded/playful fonts.
Never put body text below 14px.
Never use light backgrounds (no light mode at launch).
Never animate body text or essential UI.
Never use drop shadows on text.