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.

Stele: The UI Workdesk

Canvas to curate frontend inspiration

▶

keep the hoverLift, shadow and easing all captured with the markup.⌥ ⇧ 2

stack

my folder

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

Faithful DOM & CSS capture
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
Inspecting how animations were built
AI prompt context from any capture

[note]

[video]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (a nav, a card, a button) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

github.com

badge.tsx

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

[code snippet]

[element]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

▶

keep the hoverLift, shadow and easing all captured with the markup.⌥ ⇧ 2

stack

my folder

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

Faithful DOM & CSS capture
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
Inspecting how animations were built
AI prompt context from any capture

[note]

[video]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (a nav, a card, a button) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

github.com

badge.tsx

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

[code snippet]

[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
See the exact fonts, colors, and shadows a capture uses, read straight from its CSS.
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 hand raw context to your AI.
Asset Capture
Save SVGs, images and web fonts 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 to start · captures stay private

beta members get Pro cheaper for life

for as long as you keep your subscription active

stop saving dead pixels.
capture UI as live code.

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

Start Capturing Install Extension

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 work out how they were built. 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

capture elements, screenshots, recordings, code, assets & bookmarks instantly

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

Faithful DOM & CSS capture
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
Inspecting how animations were built
AI prompt context from any capture

[note]

[video]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (a nav, a card, a button) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

github.com

badge.tsx

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

[code snippet]

[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

Faithful DOM & CSS capture
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
Inspecting how animations were built
AI prompt context from any capture

[note]

[video]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (a nav, a card, a button) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

github.com

badge.tsx

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

[code snippet]

[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

Faithful DOM & CSS capture
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
Inspecting how animations were built
AI prompt context from any capture

[note]

[video]

💡 Quick Tip:

Press ⌥ ⇧ 2 and click any web element (a nav, a card, a button) to capture its exact HTML & CSS styles.

Target: div.nav-bar

[sticky note]

github.com

badge.tsx

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

[code snippet]

[element]

Stele: The UI Workdesk

Canvas to curate frontend inspiration

▶

keep the hoverLift, shadow and easing all captured with the markup.⌥ ⇧ 2

stack

my folder

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 stele.so, 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 · your captures stay private to you

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 Capture

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