Skip to content

See your UI.
Explore what’s possible.

Visualise components from your codebase, explore design alternatives, and ask your coding agent to try new ideas. Iterate on your UI visually, without starting from scratch.

TravelBuddy mainSearch pages & components ⌘ PAK
Listing card directions

One card. Three new directions.

Live preview
CurrentYour component
A timber cabin among pine trees beside a still pond
ϟ SuperhostBrightwoods CabinBrighton, Ontario, Canada5.0 ★$658/night

Your existing component. A new starting point.

01 / 07

Your components. Your product context. Room to explore.

Explore different directions

More room to explore. More confidence to build.

Explore ideas before you build them.

Compare directions and work through possibilities before committing to implementation.

Design in your real codebase.

Explore with your existing components, styles, and product context.

Share a link. Align with your team.

Share a review board so teammates can comment, request changes, and approve a direction.

Six ways to explore

Explore ideas before you build them.

Your codebase is the starting point. Explore what it could become.

01 / EXPLORE WITH HEXBY

Generate alternatives

One screen can go in many directions. Turn your existing UI into a design canvas and explore different layouts, visual styles, and ways to organize information. Compare options side by side, then refine the ideas that work best.

TRY ASKING

“Show me three directions for this dashboard: one focused on key metrics, one on recent activity, and one on actions to take next.”

02 / EXPLORE WITH HEXBY

Polish your UI

Refine spacing, typography, alignment, and visual hierarchy using your product’s existing components and styles. Explore a broader polish with your agent, then fine-tune individual details with Design Mode’s visual controls.

TRY ASKING

“Polish this settings page. Improve the spacing, make the sections easier to scan, and give the primary action more emphasis.”

03 / EXPLORE WITH HEXBY

Match a Figma design

Bring the intended design into the context of your working product. Use a Figma frame as a reference to explore changes to layout, typography, colors, and component details.

Review the result in an interactive preview and refine the differences before implementation.

TRY ASKING

“Match this screen to the linked Figma frame. Focus on the layout, typography, and spacing, using our existing components where they fit.”

04 / EXPLORE WITH HEXBY

Match a screenshot

Turn a visual reference into something you can explore in your own product. Start with a screenshot and describe what caught your eye, whether it’s the page structure, a card layout, or the overall style.

Adapt those details to your content and components.

TRY ASKING

“Use this screenshot as a reference for our pricing page. Try its card layout and visual hierarchy with our plans, content, and brand colors.”

05 / EXPLORE WITH HEXBY

Try a new feature

See how a new capability could fit before committing to the details. Explore where it belongs, how people discover it, and what the interaction feels like alongside the rest of your product.

Refine the idea in an interactive preview before moving into implementation.

TRY ASKING

“Try adding a team activity panel to this dashboard. Show a compact version in the sidebar and an expanded view with filters.”

06 / EXPLORE WITH HEXBY

Show different states

Design for the moments beyond a screen’s default view. Explore loading, empty, error, and success states with content that helps people understand what’s happening and what to do next.

Compare each state in the context of the same screen.

TRY ASKING

“Show the empty, loading, and error states for this page. Include a useful next step for the empty state and a retry action for the error.”

Prompt

Refine and iterate on ideas with your existing agents

Select something on the canvas and it comes along as context, so the agent knows which part of your UI you mean. Paste an image, run a slash command, or dictate. Use your agent for broader changes, then check the updated UI and code before sharing a review.

See how to work with your agent.
Hexby’s component canvas and contextual chat with an existing coding agent

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.

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

Your next direction starts here

Explore your next UI idea in Hexby

See the possibilities in your real product. Find a direction your team is ready to build.

Explore with Hexby