Skip to content
Start Designing

Design and iterate on the UI that’s actually in production

Hexby turns your codebase into a visual workspace so designers and product teams can review, iterate and update the UI that actually ships — using the AI agents you already use.

Start Designing — Free BetaSee how it works
Hexby product video. The preview plays silently; open it to hear the music and control playback.

Works with your AI agents

Connect your codebase

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 visual way to see or edit 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 Code View: a project file tree, open source files, and GitHub, GitLab, Bitbucket, Lovable, Bolt, and local repo 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 a comment 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 comparing before and after side by side, with the review approved and Hand off to Devs ready.

    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

These are the views in the app, in the order they appear in it.

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.

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.

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.

Single 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.

The Hexby Single 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.

Code View

Your whole folder structure in the code editor

A file tree, a tabbed editor, git decorations, and project-wide search and replace with case, whole word, regular expressions and include or exclude globs. It stays mounted while you move around the workspace, so your tabs and scroll position are still there when you come back.

The Hexby Code View: a file tree with git decorations on the left, open tabs for homescreen, style.css, PR.md, signin and signup, and the homescreen TypeScript source in the editor.

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:8060, with Comment and Inspect in the toolbar, a live welcome overview in the frame, and review comments 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 comments 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.

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

Pin comments on 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 comment 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 Vibecoders

Get started

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

Connect your codebase and see your product differently.

Try Hexby