Skip to content
Start Designing

Your codebase, turned into a design canvas — powered by your AI agents

Instead of throwing design files over the wall to engineering, Hexby lets you design directly on your actual coded product.

Start Designing - Free Beta
Hexby workspace views cycling through Component Map, Pages, Component View, and chat with Component View context. Open the player to watch the product video with sound.

Use cases

What you can do with Hexby

  1. 01

    Polish vibecoded apps

    Refine the UI of apps built with vibe coding tools

  2. 02

    Iterate on your existing UI

    Give designers a dedicated workspace connected to your codebase.

  3. 03

    Start from an existing design system

    Create new product designs from an established foundation.

  4. 04

    Adapt design systems to your needs

    Reuse and customize patterns from systems you love.

Hexby turns your real product code into a visual workspace where designers and product teams can review, refine and ship UI changes — using the AI coding agents they already use.

Connect your code from anywhere

Use the AI agents you already use

Why Hexby?

Your design tool and your codebase don’t speak the same language

  • Figma

    Design lives outside the product.

    You can design exactly what you want, but it's disconnected from the code that ships.

    1. Idea
    2. Design
    3. Handoff
    4. Build
    5. Production

    The gap

    Designs aren't connected to the code that actually ships.

  • AI coding agents

    Make coding easier. Leave design behind.

    Agents can change your code, but you only see the result in prompts, code, or a running app.

    1. Idea
    2. Prompt
    3. Code
    4. Production

    The gap

    Code changes, but there's no easy way to work with just the UI

  • Hexby

    Design on the real UI with your agents.

    Connect your codebase, visualize the real UI, and change it with the agents you already use.

    1. Production Codebase
    2. Visualize
    3. Design & Iterate
    4. Handoff with Visuals

    The solution

    Your codebase becomes the actual visual design environment.

Your code. Your agents. Your UI.

How it works

From code to canvas to commit

See what’s actually shipping. Change it visually.
Let your agents do the work.

  1. Hexby's repository connection screen with GitHub, GitLab, Bitbucket, Lovable, Bolt, Base44, Emergent, Rocket App, v0, Replit, and local project options.

    The codebase Hexby opened — the source of every screen on the canvas.

  2. The Hexby canvas showing a wall of real rendered screens laid out from the project.

    The same UI, laid out as a canvas of the screens the code actually renders.

  3. A live product preview with an annotation on a card and agent-ready review notes in the sidebar.

    Your existing agent does the AI work, pointed at the thing you selected.

  4. The Hexby Review view with all changes approved and the Hand off to Devs dialog ready to create a GitHub pull request.

    Submit for review. Nothing reaches the repository until somebody means it to.

Your codebase

Code is the source of truth

Instead of designing against screenshots or maintaining another artifact that drifts from production, Hexby gives your team a visual workspace on top of the code that actually runs your product.

Codebase to Hexby Canvas to Codebase.

Codebase
The Hexby canvas for a project: screens laid out as cards on the map, with the explorer on the left and agent chat on the right.
Codebase

Hexby doesn’t replace the codebase. It makes it visual.

The workspace

A visual workspace for your whole product team

Explore the workspace views, starting with Pages and the components they use.

All Components

The whole component library, rendered.

Every component you have on one free canvas, with project-wide search, filtering by kind and sorting. Zoom in and the cards become the real components, live and clickable, so you can hover them and try their states without leaving the canvas.

The Hexby All Components view for the BGS Banking project: a components list on the left and a free canvas of live previews on the right, grouped in dashed frames — Home screen, Personal info, Account summary, Quick actions and the rest of the library.

Pages

One page and all the dependencies

Pick a page and the canvas draws it together with its whole dependency closure. A shared component appears under every parent that uses it but resolves to one record, so before you change anything you can see everywhere it would land.

The Hexby Pages view for the BGS Banking project: Homescreen selected in the pages list on the left, with its dependency closure on the canvas — header, BGS logo, banking summary, accounts and business account — each showing the screen it renders.

Component Map

Every screen and component, on one canvas.

Hexby reads your project and lays out every page, layout and component as a map, connected by what actually renders what. The layout is deterministic, so the same project always draws the same map and you can learn where things live.

Zoom out to take in the shape of the whole project. Zoom in and every node shows the screen it renders, named, with the kind it is. Files you have changed pick up a git status border, so the map doubles as a picture of your work in progress.

The Hexby Component Map for the BGS Banking project: named nodes such as index.html, app.tsx, homepage.tsx, header.tsx and logo.tsx, each showing the screen it renders, joined by routed edges from parent to child.

Component View

One component, with its code underneath.

Isolates a single component in the middle of the canvas with Desktop, Tablet and Mobile breakpoints, and a resizable code dock below it showing that component's source. When the component has a companion stylesheet, the dock splits so you can see the markup and the styles together.

Hexby Component View for listingItem: the live banking welcome card in the middle of the canvas, with its TypeScript and CSS open side by side in the code dock below.

Preview App

Your real app, running inside Hexby.

Hexby starts your project's own dev server and frames the running app, with an address bar that drives its real history, route autocomplete from the analysis, and Desktop, Tablet and Mobile viewports.

The Inspect dock is where someone who does not write code gets to work: a live layers tree, controls for colour, typography, spacing and layout, and a Content tab for editing the words on the screen.

The Hexby Preview App running the BGS Banking dashboard at localhost:8080, with Comment and Inspect in the toolbar, a live welcome overview in the frame, and annotations in the right panel.

Review

See the before and after before you send it.

A live before and after comparison, both sides rendered from your own code. It reads your local git history, so opening a review is instant. Compare against the branch baseline or against the last version you sent.

When it is right, share the link. Teammates review it in the browser with nothing to install, and their feedback comes back pinned to the component it is about, so you reply and resolve it in the same panel.

A Hexby review in the browser: createAccountForm before and after side by side, changed components on the left, and annotations on the right asking for a white Sign Up button and a bordered social-sign-in row.

Handoff / Submit to Devs

Hand it off when it is ready to ship.

When everyone is happy, hand it off to developers. Hexby opens the pull request with the before and after attached, so the visual work lands in the same review and merge workflow you already use.

The Hexby Review view with the Hand off to Devs dialog open: all changes have been approved, and handing off will create a GitHub pull request.

Chat

Your agent, in the right panel.

Ask your agent to build, edit, or refine your components. Select something on the canvas and it comes along as context, so the agent knows exactly which file you mean. Paste an image, run a slash command, or dictate.

Answers come back as plans, diffs and permission cards you approve. Nothing is written to your project without you saying yes.

The Hexby chat panel open on the Pages view: the agent reports components that failed to render, lists searchSection, listingItem, blogCard and userCard, and offers a Fix 3 components action.

Annotate

Put your feedback right where it belongs.

Show your agent exactly what to change. Send it all in one go.

Click anywhere on the preview to pin a change

Explore with Hexby

Explore ideas before you build them.

Compare ideas on your real UI. Choose what to build.

Explore with Hexby
TravelBuddymainSearch pages & components⌘ PAK
Listing card directions

One card. Three new directions.

4 previewsSelect a preview to take a closer look
Current
A silver Airstream beside a sunlit field★ Superhost
Mississauga Airstream4.8 ★

Mississauga, Ontario, Canada

$502 / night

The original photo and listing details.

1Compact photo
A silver Airstream beside a sunlit field★ Superhost
Mississauga Airstream4.8 ★

Mississauga, Ontario, Canada

2 guests1 bedroom1 bath
$502 / nightView stay

More room to scan the stay details.

2Editorial details
Mississauga Airstream$502 / nightMississauga, Ontario, Canada
A silver Airstream beside a sunlit field★ Superhost
★ 4.8 rating

Name and nightly price take the lead.

3Stay at a glance
A silver Airstream beside a sunlit field★ Superhost
Mississauga Airstream4.8 ★

Mississauga, Ontario, Canada

2 guests1 bedroom1 bath
$502 / nightView stay

Amenities and a clear next action together.

Swipe to compare previews

Remix a project

Start something new with what already works.

Reuse an app’s design and components. Let your agent build something new.

Use existing agents

Your agents. Your stack. Your tokens.

Don’t add another AI agent to your stack.

Hexby works with the agents you already trust — including Claude Code, Codex and Cursor. Hexby provides the visual interface and workflow. Your existing agents do the AI work underneath.

No additional AI subscription required

When you use AI features, work runs on the agent accounts and tokens you already have. Hexby does not sell or bundle model usage.

  • Claude Code

    Reuses your existing Claude Code sign-in.

  • Codex

    Cached sign-in, or a one-time device code.

  • Cursor

    Relay sign-in, or your own API key.

  • Gemini

    Cached Google sign-in, or your own API key.

  • GitHub Copilot

    Uses the Copilot CLI you already have.

Ten more coding CLIs connect through the same protocol.

  • OpenCode
  • Cline
  • Qwen Code
  • Kilo Code
  • Grok Build
  • goose
  • Kimi
  • Factory Droid
  • Auggie
  • Devin

Review before merge

Nothing reaches the code until somebody means it to

Move fast without letting non-developer changes go straight to production.

Edit visually, right on real components

Select elements, make changes, and see the results instantly on your actual codebase components.

A Hexby canvas with the bankingSummary component selected and an agent chat typing “Make the cards same width”.

Review the real UI, not a screenshot

Annotate the live preview. Reviewers see the same components the code renders, so feedback lands on the thing that ships.

The Hexby Review view comparing before and after of a Create Account form, with a pinned annotation on the Google button.

Send for review, get changes back

Designers send real components for review. Approved work is ready to hand off.

Hexby with Assigned to you at 0 tasks, then 1 new, and a reviewer notification.

Developer handoff

Submit the visual work as a review round. Nothing reaches the repository until somebody means it to.

The Hexby Review view handing off approved changes, then a pull request created.

Review the code the way you already do

The visual review posts into the pull request—what changed, what was approved, and a link to open it. Developers stay in GitHub.

A GitHub comment for a Hexby Visual Review, with design approved, a link to open the visual review, and a before-and-after of the Create Account form.

Merge to production

Changes go live to production.

A GitHub pull request ready to merge, with changes approved, checks passed, and no conflicts.

Hexby gives designers and product teams a way to work close to production while keeping your existing review and merge workflows intact.

Built for modern teams

Built it with AI? Now make it better

Whether your app was built by a senior engineer, an AI coding agent, or somewhere in between, Hexby lets you bring the UI into a visual workspace and keep iterating.

Built by engineers

Your existing codebase

app.tsx
1import { Button } from "@/components/ui"
2import { Hero } from "@/sections/hero"
3
4export default function Home() {
5  return (
6    <Hero />
7  )
hexby

Bring Codebase into Hexby

Built with AI

From your favorite AI coding agent

Create a travel booking homepage with a hero section, search bar and destination cards.

  • Generating components
  • Writing code
  • Setting up pages
  • Done!

Hexby for

Designers & Product TeamsVibecoders

Get started

Your code is the source of truth. Make it visual.

Connect your codebase and see your product differently.

Try Hexby