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.

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.
- Idea
- Design
- Handoff
- Build
- 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.
- Idea
- Prompt
- Code
- 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.
- Production Codebase
- Visualize
- Design & Iterate
- 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.

Hexby doesn’t replace the codebase. It makes it visual.
How it works
From existing code to a reviewed UI change

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

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

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

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.
Select an element in the preview to start designing.
Mississauga, Ontario, Canada
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.
One card. Three new directions.
★ SuperhostMississauga, Ontario, Canada
The original photo and listing details.
★ SuperhostMississauga, Ontario, Canada
More room to scan the stay details.
★ SuperhostName and nightly price take the lead.
★ SuperhostMississauga, Ontario, Canada
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.
Somewhere worth staying.
Discover cabins, city hideaways, and a place to make your own.
Make this a website about events.
+ Agent Auto↑Go out. Find your people.
Live music, fresh discoveries, and a reason to get together.
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.

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.

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.

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.

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.

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.

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.



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.

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.

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.

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