Skip to content
Design handoff, reimagined

Unicorn Horn.

Design alongside your favorite agent. You call the shots; it builds the real thing — not a picture — and Unicorn Horn turns it into a live preview your developers can actually use.

Sign in

Access is invite-only for now.

Supports
  • React
  • Vue
  • Svelte
  • Solid
  • Angular
  • Lit
  • Components
  • HTML
  • CSS
  • JavaScript
unicornhorn.app/p/brave-otter-42
Brooklyn, NY

72°

Clear, light breeze

H 76°L 61°

Air quality

32Good

Sunset

7:12PM

in 1h 24m

AIYour agentvia MCP

create_preview(

title: "Weather — bento",

framework: "react",

files: 3,

)

Preview ready · /p/brave-otter-42

The cost

Stop paying for it twice. Design it once, in code.

A mockup gets paid for twice: once to draw it, and again to rebuild it in code, with rounds of back-and-forth in between. Plug in your own numbers to see what that costs.

Your handoff, per month

Screens handed off12
Hours to rebuild each from a mockup6 h
Hours of back-and-forth on each2 h
Hourly rate$85

The handoff tab

monthly · the old way

Screens handed off
12
Rebuild from mockup
× 6 h
Back-and-forth
+ 2 h
Hourly rate
× $85/h
Hours spent
96 h

Paid for twice

$8,160/ month

Over a year$97,920

With Unicorn Horn

Rebuild from mockup72 h

It's already code. Developers wire it in.

Back-and-forthfewer rounds

Everyone reviews the running component.

Designed once · Built once

  1. [01]

    No rebuild.

    The preview is the component, in your team's framework. Developers start from working code, not from a picture of it.

  2. [02]

    No second AI bill.

    Unicorn Horn runs on the agent you already pay for — Claude Code, Cursor or any MCP client.

  3. [03]

    Fewer rounds.

    Reviewers open the running component at real screen sizes, so what gets approved is what gets built.

How it works

From prompt to shareable link in three steps.

  1. [01]

    Connect your agent

    Add Unicorn Horn as an MCP server in Claude Code, Cursor or any MCP client. One URL, OAuth or a token.

  2. [02]

    Describe what you want

    Your agent translates your prompt into real components — React, Vue, Svelte, plain HTML and more — and publishes them with create_preview.

  3. [03]

    Share the live preview

    Every preview gets a public link. Your team opens the running component, resizes it, flips versions, reads the code.

For developers

Made for the person who has to ship it.

A preview isn't a picture of the component. It's the component, with everything you need to build from it one click away. Pick a control to see what it gives you.

01 / 07 · The component

It runs.

What you open is the component, executing. Hover states, focus rings and real layout are there to inspect, not described in a note beside a picture.

Features

Built for reviewing real UI. Not screenshots of it.

Every change is a version. Your agent iterates; Unicorn Horn keeps the history. Flip between versions or restore an earlier one.

Any screen size. Flip between desktop, tablet and phone — portrait or landscape — in the viewer.

Collections. Group related previews — a flow, a feature, a design review — behind one link.

Read the code behind it. Every preview carries its source. Open it, copy it, hand it to whoever ships it.

Sandboxed. Agent-built code runs in a sandboxed frame, isolated from the app and your account.

Team workspaces. Previews, collections and tokens belong to your organization.

OAuth or tokens. Sign your agent in with OAuth, or issue an API token from the dashboard.

Token Factory

Name a color once. Your agent stops guessing.

Token Factory is your team's shared library of design tokens: colors, spacing, radii, type and shadows. Agents read it before they build, so a preview comes back in your brand, and developers export the same values it was built with.

Set --brand
Mode

The library

Brand

Color3 tokens
Brand: 3 color tokens in a sample library
ColorName
--brand#C8460E#FF8A4C
--brand-soft#C8460E24No dark value
--on-brand#FFFFFF#0A0A0A

Neutrals

Color5 tokens
Neutrals: 5 color tokens in a sample library
ColorName
--borderoklch(0.92 0 0)oklch(0.3 0 0)
--surface#FFFFFF#0F0F11
--surface-2#F4F4F5#1A1A1E
--text#18181B#FAFAFA
--text-muted#52525B#A1A1AA

Radius

Radius1 token
Radius: 1 radius tokens in a sample library
CornerName
--radius-card14px

Shadow

Shadow1 token
Shadow: 1 shadow tokens in a sample library
ShadowName
--elevated0 8px 20px -6px #18181B330 8px 20px -6px #000000CC

Built with it

Read from it

get_design_tokens()via MCP

{  "tokens": [    {      "name": "brand",      "kind": "color",      "variable": "--brand",      "light": "#C8460E",      "dark": "#FF8A4C",      "group": "Brand"    },    {      "name": "brand-soft",      "kind": "color",      "variable": "--brand-soft",      "light": "#C8460E24",      "dark": null,      "group": "Brand"    },    {      "name": "on-brand",      "kind": "color",      "variable": "--on-brand",      "light": "#FFFFFF",      "dark": "#0A0A0A",      "group": "Brand"    },    {      "name": "border",      "kind": "color",      "variable": "--border",      "light": "oklch(0.92 0 0)",      "dark": "oklch(0.3 0 0)",      "group": "Neutrals"    },    {      "name": "surface",      "kind": "color",      "variable": "--surface",      "light": "#FFFFFF",      "dark": "#0F0F11",      "group": "Neutrals"    },    {      "name": "surface-2",      "kind": "color",      "variable": "--surface-2",      "light": "#F4F4F5",      "dark": "#1A1A1E",      "group": "Neutrals"    },    {      "name": "text",      "kind": "color",      "variable": "--text",      "light": "#18181B",      "dark": "#FAFAFA",      "group": "Neutrals"    },    {      "name": "text-muted",      "kind": "color",      "variable": "--text-muted",      "light": "#52525B",      "dark": "#A1A1AA",      "group": "Neutrals"    },    {      "name": "radius-card",      "kind": "radius",      "variable": "--radius-card",      "light": "14px",      "dark": null,      "group": "Radius"    },    {      "name": "elevated",      "kind": "shadow",      "variable": "--elevated",      "light": "0 8px 20px -6px #18181B33",      "dark": "0 8px 20px -6px #000000CC",      "group": "Shadow"    }  ],  "count": 10,  "publicUrl": "https://unicornhorn.app/t/k7q2m9xw"}
  1. [01]

    More than colors.

    Colors, spacing, radii, type and shadows, each a named CSS variable. Colors and shadows can carry a dark value too.

  2. [02]

    Bring what you have.

    Paste CSS variables, a Tailwind v4 theme or design-tokens JSON to start. Export the same three ways.

  3. [03]

    One library, every reader.

    Admins set the values. Teammates copy them, agents read them over MCP, and a public link covers everyone else.

The Unicorn System

Every unicorn starts with a horn.

Three parts, one system. The Horn hands your design to developers as real code. The Unicorn is the designer who writes it. The Scan shows where it all ends up.

Now playing

Night Drive

Horizon Club · Afterglow

The Horn

For designers who direct agents.

Code is the language developers and the web speak. With an agent, you speak it too: describe what you want, and it's built in your developers' framework of choice. Unicorn Horn turns it into a live preview they can open, inspect and ship.

The Unicorn

For designers who code.

The design engineer: you design in the medium itself and own the design arm of the product end to end, from tokens and components to the docs your team builds with. What's a design engineer?

The Scan

For systems out in the wild.

Once your components ship, UhScan reads the repos your teams build in and shows what's adopted, what's drifting and what should have been retired. See UhScan

Describe it. Preview it. Share it.

Connect your agent in a minute. Send your team a link to the real thing, not a picture of it.

Sign in

Access is invite-only for now.