capture UI inspiration
as live code

UI inspiration organizer for frontend developers and designers, to capture UI with code.

Join Stele Pricing

A Stele canvas holding captured UI: a live element capture, a bookmark, a video, colour tokens and a sticky note, beside an inspector.

the gap

inspiration is visual
implementation is code

right now they live in different worlds: a hundred open tabs, forgotten bookmarks, and no link between how a UI looks and how it is built.

we built stele to bridge the gap,
a single home for both the visual and the code.

capture

capture at the speed of thought

use the extension to capture anything: elements, code, full pages, or visual regions, without breaking your flow.

Search for action...

Capture

Bookmark this PageSave URL, title, and favicon (no screenshot)1

Capture ElementPick one element (screenshot + code) · P for full page2

Take ScreenshotDrag a region, or switch to full page / element in the dock3

Capture Screen RecordingRecord a region, or switch to full page / element in the dock4

Capture AssetsExperimentalHover any image or video and click to save it5

Your Captures

x:bookmark

kiosk

new tag

software-development

test

ui-design

↑↓Navigate

↵Select

⌘↵Open Stele

collect

save anything that inspires you

elements, screenshots, bookmarks, videos, code and notes, all as first-class blocks, stacked, grouped or filed.

tsx

const lift = {
  y: -6,
  scale: 1.02,
  shadow: '0 18px 40px',
};

keep the hoverLift, shadow and easing all captured with the markup, so the feel survives the save.⌥ ⇧ 2

stack

my folder

palette#4F46E5

Inspect panel

Markup and computed CSSReact component treeFonts, tokens and colorsContrast and a11y checks

div.nav-bar

group

[bookmark]

[image]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

Don't scatter screenshots, videos, and bookmarks across apps and lose the source code or CSS. Stele preserves live, inspectable elements on a searchable spatial canvas.

★ Killer Features

1:1 DOM & CSS Extraction
Full-page & targeted element capture
Deep inspection (React, CSS, fonts, a11y)
AI prompt generation

❖ Use Cases

Collecting inspectable frontend designs
Auditing design components and styling
Reverse-engineering captured animations
Generate AI prompts to recreate saved UI

[note]

[video]

tsx

export function Badge({
  tone,
}: Props) {
  return (
    <span
      className={TONE[tone]}
    />
  );
}

github.com

[code snippet]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (like Vercel's nav) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

[element]

tsx

const lift = {
  y: -6,
  scale: 1.02,
  shadow: '0 18px 40px',
};

keep the hoverLift, shadow and easing all captured with the markup, so the feel survives the save.⌥ ⇧ 2

stack

my folder

palette#4F46E5

Inspect panel

Markup and computed CSSReact component treeFonts, tokens and colorsContrast and a11y checks

div.nav-bar

group

[bookmark]

[image]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

Don't scatter screenshots, videos, and bookmarks across apps and lose the source code or CSS. Stele preserves live, inspectable elements on a searchable spatial canvas.

★ Killer Features

1:1 DOM & CSS Extraction
Full-page & targeted element capture
Deep inspection (React, CSS, fonts, a11y)
AI prompt generation

❖ Use Cases

Collecting inspectable frontend designs
Auditing design components and styling
Reverse-engineering captured animations
Generate AI prompts to recreate saved UI

[note]

[video]

tsx

export function Badge({
  tone,
}: Props) {
  return (
    <span
      className={TONE[tone]}
    />
  );
}

github.com

[code snippet]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (like Vercel's nav) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

[element]

under the hood

everything comes with the screenshot

a capture is not a picture. it is the markup, the styles, the assets and the tokens, kept together.

Design Tokens
Instantly extract the exact fonts, colors, and shadows used by top design teams.
WCAG Accessibility
Quickly audit your UI for color contrast, focus boundaries, and full axe-core compliance.
AI Auto-Tagging
AI automatically categorizes every component. Search for 'dark mode' or 'pricing' to find what you need.
Instant Export
Copy components to Figma, grab production-ready React code, or extract raw context for your AI.
Asset Extraction
Extract SVGs, images, and web fonts perfectly intact. Say goodbye to broken vectors.
Semantic Search
Find anything in your workspace instantly. Search for 'login modal' or 'blue button' and jump straight to the right component.
Multiple Views
Organize your folders as a square grid, an icon grid, a masonry moodboard, or an infinite canvas. Section any of them by day.
MCP Protocol
Instantly connect to Cursor or Claude. Let your AI agents search, read, and write components using the Model Context Protocol.
Universal Import
Pull inspiration directly from Pinterest, Twitter, Dribbble, Behance, and Raindrop into a single unified canvas.

stop screenshotting
start collecting

Join the Beta

free while in beta

stop saving dead pixels.
capture UI as live code.

Live sandboxes you can inspect, export as Figma code, or feed to AI.

Start Capturing

A UI inspiration organizer for frontend developers and designers, capture to canvas to code.

Start Capturing with Stele

capture runs in the chrome extension, on desktop. the canvas is here.

inspiration is visual
implementation is code

right now, they live in entirely different worlds. designers hoard screenshots in figma, while developers bury ui snapshots in local folders, relying on manual inspection to reverse engineer them. we end up with a hundred open tabs, forgotten bookmarks, and a massive disconnect between how a ui looks and how it's actually built.

we built stele to bridge the gap.
a single home for both the visual and the code.

capture at the speed of thought

save elements, code, full pages, or visual regions instantly without breaking your flow.

Extensions

stele

Search for action...

Capture

Bookmark this PageSave URL, title, and favicon (no screenshot)1

Capture ElementPick one element (screenshot + code) · P for full page2

Take ScreenshotDrag a region, or switch to full page / element in the dock3

Capture Screen RecordingRecord a region, or switch to full page / element in the dock4

Capture AssetsExperimentalHover any image or video and click to save it5

Your Captures

x:bookmark

kiosk

new tag

software-development

test

ui-design

↑↓Navigate

↵Select

⌘↵Open Stele

img.painting280×280 Captured Painting

save anything
that inspires you

[bookmark]

[image]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

Don't scatter screenshots, videos, and bookmarks across apps and lose the source code or CSS. Stele preserves live, inspectable elements on a searchable spatial canvas.

★ Killer Features

1:1 DOM & CSS Extraction
Full-page & targeted element capture
Deep inspection (React, CSS, fonts, a11y)
AI prompt generation

❖ Use Cases

Collecting inspectable frontend designs
Auditing design components and styling
Reverse-engineering captured animations
Generate AI prompts to recreate saved UI

[note]

[video]

tsx

export function Badge({
  tone,
}: Props) {
  return (
    <span
      className={TONE[tone]}
    />
  );
}

github.com

[code snippet]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (like Vercel's nav) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

[element]

[bookmark]

[image]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

Don't scatter screenshots, videos, and bookmarks across apps and lose the source code or CSS. Stele preserves live, inspectable elements on a searchable spatial canvas.

★ Killer Features

1:1 DOM & CSS Extraction
Full-page & targeted element capture
Deep inspection (React, CSS, fonts, a11y)
AI prompt generation

❖ Use Cases

Collecting inspectable frontend designs
Auditing design components and styling
Reverse-engineering captured animations
Generate AI prompts to recreate saved UI

[note]

[video]

tsx

export function Badge({
  tone,
}: Props) {
  return (
    <span
      className={TONE[tone]}
    />
  );
}

github.com

[code snippet]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (like Vercel's nav) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

[element]

[bookmark]

[image]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

Don't scatter screenshots, videos, and bookmarks across apps and lose the source code or CSS. Stele preserves live, inspectable elements on a searchable spatial canvas.

★ Killer Features

1:1 DOM & CSS Extraction
Full-page & targeted element capture
Deep inspection (React, CSS, fonts, a11y)
AI prompt generation

❖ Use Cases

Collecting inspectable frontend designs
Auditing design components and styling
Reverse-engineering captured animations
Generate AI prompts to recreate saved UI

[note]

[video]

tsx

export function Badge({
  tone,
}: Props) {
  return (
    <span
      className={TONE[tone]}
    />
  );
}

github.com

[code snippet]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (like Vercel's nav) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

[element]

tsx

const lift = {
  y: -6,
  scale: 1.02,
  shadow: '0 18px 40px',
};

keep the hoverLift, shadow and easing all captured with the markup, so the feel survives the save.⌥ ⇧ 2

stack

my folder

palette#4F46E5

Inspect panel

Markup and computed CSSReact component treeFonts, tokens and colorsContrast and a11y checks

div.nav-bar

group

find and organize designs
exactly how you remember it

the site can change
your capture never does

real HTML and CSS frozen exactly as you saw them

font: Helvetica Neue
heading: 42px / 500
colour: #08080a
padding: 0 56px

read from the saved capture of obscura.studio, 2026-06-18

component library that builds itself,
every time you hit capture

stop screenshotting
start collecting

capture. inspect. ship.

Join the Beta See Pricing

* free while in beta · chrome extension included

capture UI inspiration as live code

inspiration is visual implementation is code

capture at the speed of thought

save anything that inspires you

everything comes with the screenshot

Design Tokens

WCAG Accessibility

AI Auto-Tagging

Instant Export

Asset Extraction

Semantic Search

Multiple Views

MCP Protocol

Universal Import

stop screenshottingstart collecting

inspiration is visual implementation is code

capture at the speed of thought

Extensions

save anythingthat inspires you

find and organize designsexactly how you remember it

the site can changeyour capture never does

component library that builds itself,every time you hit capture

stop screenshottingstart collecting

capture UI inspiration
as live code

inspiration is visual
implementation is code

stop screenshotting
start collecting

inspiration is visual
implementation is code

save anything
that inspires you

find and organize designs
exactly how you remember it

the site can change
your capture never does

component library that builds itself,
every time you hit capture

stop screenshotting
start collecting