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 you 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

Frequently Asked Questions

Frequently asked questions about Hexby

Explore how Hexby fits into your existing product and development workflow.

Is Hexby an alternative to Figma for AI-generated apps?

Hexby is a visual design workspace for teams whose product UIs live in code. It turns an existing frontend codebase into a visual canvas where you can explore screens and components, try design alternatives, and refine interfaces using your existing AI coding agents. Unlike a traditional design-first workflow, Hexby lets you work with the UI that already exists in your codebase, without having to recreate it in a separate design file. You can watch a demo of the Hexby workspace here.

Hexby visual workspace showing an existing app screen connected to its reusable components on the canvas

How can I visualise my codebase when my UI designs only exist in code?

Hexby turns your existing frontend codebase into a visual workspace for exploring your application's pages and components. Instead of navigating source files to understand the UI, you can inspect rendered interfaces, explore component relationships and identify areas to improve. This helps designers, product managers and developers understand and work on coded UIs visually. You can explore the Hexby workspace in the product tour here.

Pages and reusable components in Hexby’s All Components view

How do I design and iterate on UIs when AI coding agents generate code before design files exist?

Hexby brings a visual design workflow to products built directly in code by AI coding agents. Connect your project, explore the UI on a visual canvas, experiment with layouts and components, and use your existing coding agent to implement changes. You can move between visual exploration and code implementation without first recreating your application in a separate design tool. You can explore different design directions here.

How can I improve the UI of an app built with Lovable, Bolt, Replit or other AI app builders?

Hexby helps you refine AI-generated applications after the initial build. Bring your project into a visual workspace, explore alternative layouts, improve components and polish the interface using your existing AI coding agent. Instead of rebuilding the application from scratch, you can iterate on the UI of the product you have already created. You can learn how to open your existing project here.

Can I redesign my app visually using Claude Code, Codex or Cursor?

Yes. Hexby brings visual UI exploration and iteration into your existing AI coding workflow. Work with your application's screens and components, identify the changes you want to make, and use your connected coding agent to implement them in code. You can continue using your existing agent and its subscription rather than switching to a separate AI coding agent provided by Hexby. You can find the AI assistant integration guide here.

Hexby agent picker with Claude Code, Codex, Cursor, and other coding agents

How can I explore and compare different UI designs before implementing them in code?

Hexby lets you explore alternative UI directions using your existing application as the starting point. Experiment with layouts, screens and components, review visual changes against the current interface, and refine your preferred direction with your AI coding agent. This helps teams evaluate design options before deciding which changes to implement in their codebase. You can learn how to explore and compare design ideas here.

Explore with Hexby comparing the current cabin card with an alternative design direction side by side

Can designers and product managers improve an application's UI without editing code themselves?

Hexby gives designers and product managers a visual workspace for understanding and refining an existing application's UI. They can explore screens and components, communicate desired changes and work with an AI coding agent to implement improvements. Teams can review visual changes together and hand approved work back to developers through their existing development workflow. You can learn about visual review and developer handoff here.

Pages and reusable components in Hexby’s All Components view

Can I turn an existing production codebase into a visual design canvas without recreating the UI from scratch?

Yes. Hexby creates a visual workspace from your existing frontend project so you can explore the UI that has already been implemented. You can inspect pages and components, understand how the interface is structured, and iterate on the existing product using your AI coding agent. Your codebase remains the source of truth, rather than requiring you to manually recreate each screen in a separate design file. You can find project requirements and setup instructions here.

Hexby Pages view showing an existing banking app and its connected components on the visual canvas

How can I maintain consistent UI design across pages and reusable components?

Hexby helps you explore the pages and components that make up your application, making it easier to understand how shared UI elements fit into the product. You can identify areas for refinement, explore changes to reusable components and work with your AI coding agent to implement improvements across the interface. This supports more consistent UI iteration within your existing codebase. You can learn how to give your AI agent design guidelines for consistent UI changes here.

Hexby Project Guidelines showing design instructions and reusable project design rules in Settings

How can I review AI-generated UI changes before merging them into my codebase?

Hexby gives teams a visual workspace for reviewing UI changes before they become part of the main product. You can compare the updated interface with the existing version, inspect proposed changes and collaborate with teammates on the result. When changes are ready, they can be handed back through your supported repository workflow for developer review and merging. You can learn how to review UI changes and hand them off for merging here.

Hexby Review Changes showing original and updated UI side by side with teammate comments and approval controls

Get started

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

Connect your codebase and see your product differently.

Try Hexby