Skip to content

Designing in the AI era

Designing in the AI era
starts with the real app.

AI can turn an idea into a working app quickly. But getting the look, feel, and experience right still takes design.

Hexby lets you design directly on your actual coded product. Explore new directions, refine real screens in Design Mode or with your AI agent, and bring your team changes they can see, try, and review.

Replay music app filling the preview workspace, with a cursor and three detailed annotations.
PlaylistCarousel.tsx

The design gap

When AI builds the app, what happens to design?

Engineers are using AI to build new prototypes and flows faster than the design process can keep up. By the time designers explore an idea and hand it over, the product has already moved on.

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

Meet Hexby. Your code converted into a visual canvas.

See your app’s actual pages and components in one visual workspace. Select what you want to change, refine details with Design Mode’s visual controls, and explore bigger ideas with your AI agent.

Bring your design decisions directly into the product—from the first exploration to visual review and developer handoff.

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.

How it works

From existing code to a reviewed UI change

  1. Hexby’s project connection screen for opening an existing codebase.

    Bring the codebase into Hexby, explore its UI, work with your agent, then review the changes.

  2. Hexby’s canvas showing the screens and components already in the project.

    Browse screens and components, and inspect the pieces relevant to your task.

  3. A coding agent chat in Hexby, grounded in the project’s existing UI.

    Use Claude Code, Codex, Cursor and other preferred agents.

  4. Hexby review board with a brief, before-and-after Settings screens, and change notes.

    Share a board with before-and-after screens, a brief, and change notes. Collect feedback and approval, then create a GitHub pull request for developer review.

Design Mode

Shape the details directly on your real UI

Select an element in the preview or Layers. Use Figma-like controls in Properties to edit text, typography, colors, spacing, sizing, and layout, then see the result as you work.

Use your AI agent for new sections, broader redesigns, and changes to how the app behaves.

Explore with Hexby

Explore ideas before you build them.

Try new layouts, build new flows, match a design reference, or explore UI states using your existing components. Compare different directions before your agent builds it.

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

Remix a project

Start with an existing project and use its visual language, layouts, and reusable components as the foundation for a new app, keeping the original app intact.

StayhavenStays  Saved stays
A LITTLE ESCAPE. A LOT TO REMEMBER.

Somewhere worth staying.

Discover cabins, city hideaways, and a place to make your own.

Stays worth slowing down forView all stays →

Make this a website about events.

+ Agent Auto↑
TravelBuddyExplore  My tickets
GOOD TIMES, CLOSE TO HOME

Go out. Find your people.

Live music, fresh discoveries, and a reason to get together.

Worth going out forView all events →
SAT, JUN 14Lakeside SessionsHarbourfront · TorontoFrom $35
FRI, JUN 20Cinema Under the StarsEvergreen · TorontoFrom $18
SAT, JUN 21Jazz After DarkThe Drake · TorontoFrom $24

Visual review

Review the experience visually

Prepare a board with before-and-after screens, a brief, and change notes. Check the board, then invite teammates to review in their browser. They can comment on specific elements, request changes, or approve the shared version.

Refine the UI in Design Mode or with your agent, then send an updated version for another approval. Reviewers see the version you sent; local edits are shared when you send an update.

Hexby review board with a brief, before-and-after Settings screens, and numbered change notes

Developer handoff

Give developers a PR with the visual context

Once the shared version is approved, create a GitHub pull request with screenshots and the review link. Developers can review the UI alongside the code and merge it through your team’s usual checks. Creating the pull request does not merge or release the changes.

A GitHub pull request with a Hexby visual review and before-and-after product screens

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

Shape what comes next

Turn your codebase into a design canvas

Explore a better flow, refine the details, or build something new from what already works.

Start designing with Hexby